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.

Sign up for GitHub

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

Card.html #4

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Card.html #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
801c225
fiz filtro de paises por continente
Gabsvb1 Aug 12, 2023
9be5f7a
Criação e exibição de cards
Gabsvb1 Aug 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions src/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
// estas funciones son de ejemplo

export const example = () => {
return 'example';
};
export const filtroPaises = (paises,continente) =>{
return paises.filter(
(pais)=> pais.continents[0] === continente
)
}

export const anotherExample = () => {
return 'OMG';
};
117 changes: 107 additions & 10 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,109 @@
<!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>Love Travelers</title>
<link rel="stylesheet" href="style.css" />
</head>


<body>
<div id="root">
<nav id="menu">

<button class="btn">
<svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<span>HOME</span>
</button>

<button class="btn">
<svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<span>COUNTRIES</span>
</button>

<button class="btn">
<svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<span>ABOUT</span>
</button>
</nav>
<div class="pages-container">
<!-- <div class="home-welcome">

<p>Seja bem-vinda(o) à nossa empresa de Intercâmbio! Estamos felizes em ter você aqui. Nossa página web é
dedicada a ajudar pessoas como você a encontrar oportunidades de intercâmbio em todo o mundo. Aqui você pode
encontrar informações importantes sobre os países como destinos populares, câmbio local e linguagem.
Esperamos que você encontre o destino ideal e tenha uma experiência incrível! Não hesite em nos contatar
para tirar dúvidas, compreender sobre a documentação necessária e consultar orçamentos.</p>
<img src="" alt="Imagem representativa de intercâmbio e viagens">
<p>©️ Gabriella Bruno ©️Maria Luiza Mineiro </p>
</div> -->

<div id="page-contries" class="page">
<div id="countries-header">
<span class="title">lovetravelers</span>
<span> Reuna informações e escolha conosco o destino de seu intercambio:</span>
</div>
<div id="coutries-filter-conteiner">
<select>
<option value="africa">Africa</option>
<option value="america">América</option>
<option value="asia">Asia</option>
<option value="oceania">oceania</option>
<option value="europa">Europa</option>
<option value="antartida">Antartida</option>
</select>
<select>
<option value="a-z">A-Z</option>
<option value="z-a">Z-A</option>
</select>
</div>
<div id="countries-conteiner">
<!-- <div class="card">
<img src="https://picsum.photos/200/100" alt="">
<span class="card-title">Brasil</span>
<span class="card-informations">gfhfhfhgfhg</span>
<span class="card-informations">hggfhgfhgf</span>
<span class="card-informations">hhgnjhghg</span>
</div> -->
</div>


</div>

<!-- <div id="about-end">
<h1> About</h1>
<p> Sou Gabriella Vieira Bruno, aluna da SP011 da Laboratória, esse é o segundo projeto realizado do programa.
Estou muito animada em compartilhar com vocês um pouco sobre mim e sobre o que estamos fazendo aqui na
Laboratoria. </p>
<img src=""> colocar a imagem da Gabi

<p>Sou Maria Luiza Mineiro Batista, aluna da SP011. Na Laboratória, estamos trabalhando duro para criar
soluções inovadoras para o usuário. Esse é o segundo projeto e estou muito orgulhosa do que consegui até
agora. </p>
<img src=""> colocar a imagem da Malu

<p>Espero que você goste do nosso trabalho e fique à vontade para entrar em contato conosco se tiver alguma
dúvida ou sugestão. Obrigada por visitar o nosso site!</p>

<p>©️ Gabriella Bruno ©️Maria Luiza Mineiro</p>
</div> -->

</div>



</div>
<script src="main.js" type="module"></script>
</body>

</html>
45 changes: 40 additions & 5 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,41 @@
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 paises from "./data/countries/countries.js";

console.log(example, data);

paises.countries.forEach((pais) => {
const countriesConteiner = document.querySelector("#countries-conteiner");

// criação do card
const card = document.createElement("div");
card.classList.add("card");

// criação da imagem
const imagem = document.createElement("img");
imagem.src = pais.flags.png;
imagem.width = "150";
card.appendChild(imagem);

// criação do titulo
const title = document.createElement("span");
title.classList.add("card-title");
title.innerText = pais.name.common;
card.appendChild(title);

// criação das linguagens
if (pais.languages) {
const languages = document.createElement("span");
languages.classList.add("card-informations");
languages.innerText = `linguagens: ${Object.values(pais.languages).join(
", "
)}`;
card.appendChild(languages);
}

// criação da capital
const capital = document.createElement("span");
capital.classList.add("card-informations");
capital.innerText = pais.capital;
card.appendChild(capital);

// renderiza o card na tela
countriesConteiner.appendChild(card);
});
94 changes: 94 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
body{
width: 100%;
height: 100%;
padding: 10px;

}

.btn {
width: 155px;
height: 30px;
cursor: pointer;
background: transparent;
border: 1px solid red;
border-radius: 20px;
outline: none;
transition: 1s ease-in-out;

}

svg {
position: absolute;
left: 0;
top: 0;
fill: none;
stroke: #fff;
stroke-dasharray: 150 480;
stroke-dashoffset: 150;
transition: 1s ease-in-out;
}

.btn:hover {
transition: 1s ease-in-out;
background: #4F95DA;
}

.btn:hover svg {
stroke-dashoffset: -480;
}

.btn span {
color: white;
font-size: 18px;
font-weight: 100;
}

#menu {
margin: 0 auto;
width: 550px;
background-color: #91C9FF;
padding: 20px;
display: flex;
justify-content: space-between;
}

.page {
border: 1px solid red;
padding: 0 20%;
display: flex;
flex-direction: column;
}
#countries-header{
border: 1px solid green;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
}
#coutries-filter-conteiner {
width: 181px;
margin: 0 auto;
display: flex;
justify-content: space-between;

}

#countries-conteiner {
height: 800px;
border: 1px solid greenyellow;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
overflow-y: scroll;
}
.card {
background-color: lightcoral;
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}