Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dezenovedemaio #60

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
1 change: 1 addition & 0 deletions SAP010-data-lovers
Submodule SAP010-data-lovers added at 66d67d
5,646 changes: 5,646 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"htmlhint": "^1.0.0",
"jest": "^27.0.1",
"opener": "^1.5.1",
"serve": "^13.0.2"
"serve": "^14.2.0"
},
"engines": {
"node": ">=16.x"
Expand All @@ -31,4 +31,4 @@
"version": "5.5.0",
"commit": "df7115b8ec46293bf1e868fdedcc42e9b3861226"
}
}
}
Binary file added src/background.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 21 additions & 7 deletions src/data.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
// estas funciones son de ejemplo
//lógica da função para filtrar os nomes dos personagens
function searchName(fullName) {
const filterName = (character) => {
if (character.fullName.toLowerCase().includes(fullName.toLowerCase())) {
return true;
}
return false;
};

const filteredNames = characters.got.filter(filterName);
return filteredNames;
}

export const example = () => {
return 'example';
};
function Aggregate(family, filteredNames) {
const numeroNomesFiltrados = filteredNames.length;
const totalFamily = family.length;
return `O tipo selecionado corresponde à ${((numbercharacterfiltered / totalFamily) * 100).toFixed(2)}% pertencente à família.`;
}

export const anotherExample = () => {
return 'OMG';
};
export {
buscarNome,
calculoAgragado
}
82 changes: 72 additions & 10 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data Lovers</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="root"></div>
<script src="main.js" type="module"></script>
</body>
</html>

<head>
<meta charset="utf-8" />
<title>GAME OF THRONES</title>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="./throneicon.png" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/ac359e685a.js" crossorigin="anonymous"></script>
</head>

<body>
<header id="header">
<div id="logo">
<a href="./"> <img src="logo.png" alt="Logo Game of Thrones"></a>
</div>
<div id="container-right">
<div class="search-box">
<input class="search-input" id="search-input" type="text" placeholder="Pesquisar por nome">
<a href="#" class="search-btn">
<i class="fas fa-search"></i>
</a>
</div>
<a href="https://www.hbo.com/game-of-thrones/season-1/" target="_blank"><button id="watch-now">ASSISTA A
SÉRIE</button></a>
</div>
</header>

<main id="main">
<nav class="menu-hamburguer">
<div class="menu">
<a href="./about.html" class="menu-item">Sobre a série</a>
<ul>
<li class="menu-item">filtrar por:</li>
<li class="menu-sub-item">
<select id="filter-by-tittle">
<option disabled selected style="display: none;">TÍTULO</option>
</select>
</li>
<li class="menu-sub-item">
<select id="filter-by-family">
<option disabled selected style="display: none;">FAMÍLIA</option>
</select>
</li>
<li class="menu-sub-item">
<select id="filter-by-born">
<option disabled selected style="display: none;">ANO DE NASCIMENTO</option>
</select>
</li>
</ul>
<ul>
<li class="menu-item">ordenar por:</li>
<li class="menu-sub-item">
<select id="order-by-name">
<option value="a-z">A-Z</option>
<option value="z-a">Z-A</option>
</select>
</li>
</ul>
<a href="./quemsomosnos.html" class="menu-item">Quem somos nós</a>
</div>
<a href="#" class="menu-icon">
<i class="fas fa-bars fa-lg"></i>
</a>
</nav>
<!-- Incluir aqui os cards dos personagens -->
<div id="characterContainer" class="card-container"> </div>
<script src="main.js" type="module"></script>
</body>

</html>
Binary file added src/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 55 additions & 5 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,56 @@
import { example } from './data.js';
// import data from './data/lol/lol.js';
import data from './data/pokemon/pokemon.js';
// import data from './data/rickandmorty/rickandmorty.js';
import characters from "./data/got/got.js";

console.log(example, data);
function showCharacterCards() {
const container = document.getElementById("characterContainer");

// Limpa o conteúdo do container
container.innerHTML = "";

// Itera sobre os personagens e cria os cards dinamicamente
characters.got.forEach(character => {
const card = document.createElement("div");
card.classList.add ("card");

const image = document.createElement("img");
image.src = character.imageUrl;

const name = document.createElement("h2");
name.textContent = character.fullName;

const title = document.createElement("p");
title.textContent = character.title;

const family = document.createElement("p");
family.textContent = "Family: " + character.family;

const born = document.createElement("p");
born.textContent = "Born: " + character.born;

card.appendChild(image);
card.appendChild(name);
card.appendChild(title);
card.appendChild(family);
card.appendChild(born);

container.appendChild(card);
});
}

// Chama a função para exibir os cards dos personagens
showCharacterCards();

document.addEventListener("DOMContentLoaded", () => {
const menuIcon = document.querySelector(".menu-icon");
menuIcon.addEventListener("click", switchMenu);

function switchMenu() {
const menuDisplay = document.querySelector(".menu").style.display;
if (menuDisplay === "none" || !menuDisplay) {
document.querySelector(".menu").style.display = "flex";
document.querySelector(".menu-icon").innerHTML = "<i class='fas fa-times fa-lg'></i>";
} else {
document.querySelector(".menu").style.display = "none";
document.querySelector(".menu-icon").innerHTML = "<i class='fas fa-bars fa-lg'></i>";
}
}
});
Loading