Skip to content

Commit bb64fe6

Browse files
JessicaRamosOliveiraJessicaRamosOliveira
authored
Merge pull request #4 from hortenciahs/T001
T001
2 parents d066259 + bffa8e9 commit bb64fe6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+984
-1271
lines changed

‎README.md

+61-938
Large diffs are not rendered by default.

‎src/data/Favicon/about.txt

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
This favicon was generated using the following graphics from Twitter Twemoji:
2+
3+
- Graphics Title: 1f9da.svg
4+
- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
5+
- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f9da.svg
6+
- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

‎src/data/Favicon/android-chrome-192x192.png

14.5 KB
Loading

‎src/data/Favicon/android-chrome-512x512.png

46.4 KB
Loading

‎src/data/Favicon/apple-touch-icon.png

13.1 KB
Loading

‎src/data/Favicon/favicon-16x16.png

702 Bytes
Loading

‎src/data/Favicon/favicon-32x32.png

1.6 KB
Loading

‎src/data/Favicon/favicon.ico

15 KB
Binary file not shown.

‎src/data/Favicon/site.webmanifest

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

‎src/data/Imagens IA/aerobica.jpeg

173 KB
Loading

‎src/data/Imagens IA/bridwatching.jpg

137 KB
Loading

‎src/data/Imagens IA/caminhada.jpeg

225 KB
Loading

‎src/data/Imagens IA/camping.jpg

136 KB
Loading

‎src/data/Imagens IA/cerâmica.jpeg

136 KB
Loading

‎src/data/Imagens IA/cooking.jpg

130 KB
Loading

‎src/data/Imagens IA/corrida.jpeg

147 KB
Loading

‎src/data/Imagens IA/criaçãoDeVelas.jpeg

125 KB
Loading

‎src/data/Imagens IA/croche.jpeg

166 KB
Loading

‎src/data/Imagens IA/cuidados com a pele.jpeg

154 KB
Loading

‎src/data/Imagens IA/dança.jpeg

251 KB
Loading

‎src/data/Imagens IA/gardening.jpg

164 KB
Loading

‎src/data/Imagens IA/leitura.jpeg

141 KB
Loading

‎src/data/Imagens IA/maquiagem.jpeg.jpg

86.8 KB
Loading

‎src/data/Imagens IA/nadar1.jpeg

165 KB
Loading

‎src/data/Imagens IA/nailArt.jpeg

103 KB
Loading

‎src/data/Imagens IA/penteados.jpeg

108 KB
Loading

‎src/data/Imagens IA/photography.jpg

98.9 KB
Loading

‎src/data/Imagens IA/pilates.jpeg

207 KB
Loading

‎src/data/Imagens IA/puzzlesolving.jpg

95.5 KB
Loading

‎src/data/Imagens IA/sabonetes.jpeg

199 KB
Loading

‎src/data/Imagens IA/scrapbooking.jpeg

25.3 KB
Loading

‎src/data/Imagens IA/sewing.jpg

150 KB
Loading

‎src/data/Imagens IA/writing.jpg

107 KB
Loading

‎src/data/dataset.js

+224-286
Large diffs are not rendered by default.

‎src/dataFunctions.js

+62-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,66 @@
11
// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
22

3-
export const example = () => {
4-
return 'example';
3+
export const filterBy = (data, filterBy, value) =>{
4+
const filteredData = data.filter(item => {
5+
return item.facts[filterBy] ===value;
6+
});
7+
return filteredData;
58
};
69

7-
export const anotherExample = () => {
8-
return [];
9-
};
10+
// export const ordenarHobbies = (data, sortBy, value) => {
11+
// if (value === "asc"){
12+
// return data.sort((a, b ) => {a.facts[sortBy] - b.facts[sortBy]
13+
// })
14+
// } else {
15+
// return data.sort((a, b ) => {b.facts[sortBy] - a.facts[sortBy]
16+
// })
17+
18+
// }
19+
// };
20+
21+
export const sortBy = (data, sortBy, value) => {
22+
// mais caro
23+
if (value === "asc"){
24+
return data.sort((a, b ) => {return a.facts[sortBy] - b.facts[sortBy]})
25+
} else {
26+
// mais barato
27+
return data.sort((a, b ) => {return b.facts[sortBy] - a.facts[sortBy]})
28+
}
29+
}
30+
31+
const calcularCustoMedio = (data)=>{
32+
// resultado é o acumulador
33+
//o 0 é o mesmo que 'const valorInicial = 0;'
34+
35+
const somaTotal = data.reduce(
36+
(resultado, data) => {
37+
resultado = resultado + data.facts.custoParaIniciar;
38+
return resultado
39+
},
40+
0
41+
);
42+
return parseFloat(somaTotal/data.length)
43+
//console.log("resultado final: " + somaTotal);
44+
//console.log("media final: " + somaTotal / data.length);
45+
}
46+
const calcularNivelMedioDeDificuldade = (data)=> {
47+
const somaTotal = data.reduce(
48+
(resultado, data) => {
49+
resultado = resultado + data.facts.nivelDeDificuldade;
50+
//console.log(resultado)
51+
return resultado
52+
},
53+
0
54+
);
55+
return parseFloat(somaTotal/data.length)
56+
//console.log("resultado final: " + somaTotal);
57+
//console.log("media final: " + somaTotal / data.length);
58+
59+
}
60+
export const computeStats = (data)=>{
61+
const mediaCusto = calcularCustoMedio (data)
62+
const mediaNivelDificuldade = calcularNivelMedioDeDificuldade (data)
63+
return {
64+
mediaCusto:mediaCusto.toFixed(2) ,mediaNivelDificuldade:mediaNivelDificuldade.toFixed(2)
65+
}
66+
}

‎src/index.html

+54-23
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,72 @@
44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Data Lovers</title>
7+
<title>Data Verse</title>
8+
<!-- favicon -->
9+
<link rel="icon" type="image/x-icon" href="\data\Favicon\favicon.ico">
10+
<!-- fim do favicon -->
811
<link rel="stylesheet" href="style.css" />
12+
<!-- fonte do Google -->
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
916
</head>
10-
1117
<body>
18+
<!-- ondas -->
19+
<div class="custom-shape-divider-top-1707265856">
20+
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
21+
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
22+
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
23+
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
24+
</svg>
25+
</div>
26+
1227
<header>
13-
<h1>Mulheres na Ciência</h1>
28+
<h1>Qual o hobby ideal para você?</h1>
1429
</header>
30+
1531
<main>
16-
<h2>Conheça as mulheres que marcaram a ciência com suas pesquisas e estudos.</h2>
32+
<h2>Descubra qual hobby você mais se identifica de forma simples e objetiva!</h2>
33+
<!-- divs computestats -->
34+
<div class="estatisticas">
35+
<div class="calcularNivelMedioDeDificuldade" id="calcularNivelMedioDeDificuldade">
36+
<span>Media Nível de Dificuldade: 0 </span>
37+
</div>
38+
39+
<div id="custoParaIniciar">
40+
<span>Media Custo: R$0,00</span>
41+
</div>
42+
</div>
43+
<!-- divs select e botão mostrar todos -->
44+
<div class="containerFiltro">
1745
<section class="ordenacao">
18-
<label for="ordenacao">Ordenação</label>
19-
<select name="order" id="ordenacao">
20-
<option>A-Z</option>
21-
<option>Z-A</option>
46+
<label for="ordenacao"></label>
47+
<select data-testid="selecionar-ordenar" name="ordem" id="ordenacao">
48+
<option value="buscar">Buscar por custo</option>
49+
<option value="asc">Menor Custo</option>
50+
<option value="desc">Maior Custo</option>
2251
</select>
23-
52+
</section>
2453
<section class="filtros">
25-
<label for="filtro">Filtro</label>
26-
<select name="filtro" id="filtro">
27-
<option>todos</option>
28-
<option>Ciencia de la Computación</option>
29-
<option>Matemáticas</option>
30-
<option>Filosofía</option>
31-
<option>Video Juegos</option>
32-
<option>Física</option>
33-
<option>Astronomía</option>
34-
<option>Teste</option>
54+
<label for="filtro"></label>
55+
<select data-testid="selecionar-filtro" name="filtroCategoria" id="filtro">
56+
<option value="Todos">Buscar por categoria</option>
57+
<option value="artesanato">Artesanato</option>
58+
<option value="beleza">Beleza</option>
59+
<option value="movimentar o corpo">Movimentando Seu Corpo</option>
60+
<option value="mente">Mente</option>
61+
<option value="natureza">Natureza</option>
3562
</select>
3663
</section>
37-
64+
<section>
65+
<button data-testid="button-clear">Mostrar Todos</button>
66+
</section>
67+
</div>
3868
</main>
39-
<div id="root">
40-
</div>
41-
<footer> Hortencia Silva </footer>
69+
<section id="root">
70+
<!-- Aqui irão conter todos os cards -->
71+
</section>
72+
<footer>Hortência Silva, Jéssica Ramos e Marcela Ferraz</footer>
4273
<script src="main.js" type="module"></script>
4374
</body>
4475

‎src/main.js

+131-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,134 @@
1-
import { example } from './dataFunctions.js';
2-
import { renderItems } from './view.js';
1+
// import { filterBy, sortBy, computeStats} from './dataFunctions.js';
2+
// import { renderItems } from './view.js';
3+
// import data from './data/dataset.js';
34

5+
6+
// let cardsExibidos = data;
7+
// const listaHobby = document.querySelector("#root");
8+
9+
// document.addEventListener("DOMContentLoaded", () => {
10+
// listaHobby.appendChild(renderItems(data))
11+
// const stats = computeStats(data)
12+
// const mediaCusto = document.querySelector("span");
13+
// const mediaNivelDificuldade = document.querySelector("span");
14+
// mediaCusto.textContent = `Média de Custo: ${stats.mediaCusto}`;
15+
// mediaNivelDificuldade.textContent = `Média de Nível de Dificuldade: ${stats.mediaNivelDificuldade}`;
16+
// const statsContainer = document.getElementById("calcularNivelMedioDeDificuldade");
17+
// statsContainer.appendChild(mediaCusto);
18+
// statsContainer.appendChild(mediaNivelDificuldade);
19+
// const statsContainer2 = document.getElementById("custoParaIniciar");
20+
// statsContainer2.appendChild;
21+
// console.log(mediaNivelDificuldade);
22+
23+
// });
24+
// // listaHobby.appendChild(renderItems(data));
25+
// // filtro de dados
26+
// const selCategoria = document.querySelector('[name="filtroCategoria"]');
27+
28+
// selCategoria.addEventListener('change', (event) => {
29+
30+
// const mostrarCategoria = event.target.value;
31+
// cardsExibidos = filterBy(data, 'categoriaHobby', mostrarCategoria)
32+
33+
// listaHobby.innerHTML = ""
34+
// listaHobby.appendChild(renderItems(cardsExibidos))
35+
36+
// })
37+
// // ordenação
38+
// // console.log(ordenarHobbies(data, 'custoParaIniciar', "desc"))
39+
40+
// const selOrdem = document.querySelector('[name="ordem"]');
41+
42+
// selOrdem.addEventListener('change', (event) => {
43+
44+
// const mostrarOrdem = event.target.value;
45+
46+
// cardsExibidos = sortBy(cardsExibidos, 'custoParaIniciar', mostrarOrdem)
47+
// listaHobby.innerHTML = ""
48+
// listaHobby.appendChild(renderItems(cardsExibidos))
49+
// })
50+
51+
// botao de limpar
52+
53+
import { filterBy, sortBy, computeStats } from './dataFunctions.js';
54+
import { renderItems } from './view.js'; // Certifique-se de ter um arquivo view.js com a função renderItems implementada.
455
import data from './data/dataset.js';
556

6-
console.log(example, renderItems(data), data);
57+
let cardsExibidos = data;
58+
const listaHobby = document.querySelector("#root");
59+
60+
document.addEventListener("DOMContentLoaded", () => {
61+
listaHobby.appendChild(renderItems(data));
62+
63+
const statsContainer = document.getElementById("calcularNivelMedioDeDificuldade");
64+
const statsContainer2 = document.getElementById("custoParaIniciar");
65+
66+
const selCategoria = document.querySelector('[name="filtroCategoria"]');
67+
const selOrdem = document.querySelector("#ordenacao");
68+
69+
selCategoria.addEventListener('change', (event) => {
70+
const mostrarCategoria = event.target.value;
71+
cardsExibidos = filterBy(data, 'categoriaHobby', mostrarCategoria);
72+
listaHobby.innerHTML = "";
73+
listaHobby.appendChild(renderItems(cardsExibidos));
74+
75+
// Limpa as estatísticas antes de calcular e exibir
76+
statsContainer.innerHTML = "";
77+
statsContainer2.innerHTML = "";
78+
79+
// Calcula e exibe as estatísticas
80+
const stats = computeStats(cardsExibidos);
81+
const mediaCustoParaIniciar = document.createElement("span");
82+
const mediaNivelDificuldade = document.createElement("span");
83+
84+
mediaCustoParaIniciar.textContent = `Média de Custo para Iniciar: R$${stats.mediaCusto}`;
85+
mediaNivelDificuldade.textContent = `Média de Nível de Dificuldade: ${stats.mediaNivelDificuldade}`;
86+
87+
statsContainer.appendChild(mediaNivelDificuldade);
88+
statsContainer2.appendChild(mediaCustoParaIniciar);
89+
});
90+
91+
92+
93+
selOrdem.addEventListener('change', (event) => {
94+
const mostrarOrdem = event.target.value;
95+
cardsExibidos = sortBy(cardsExibidos, 'custoParaIniciar', mostrarOrdem);
96+
listaHobby.innerHTML = "";
97+
listaHobby.appendChild(renderItems(cardsExibidos));
98+
});
99+
100+
});
101+
102+
103+
const mostrarTodos = document.querySelector('[data-testid="button-clear"]');
104+
const statsContainer = document.querySelector('#calcularNivelMedioDeDificuldade');
105+
const statsContainer2 = document.querySelector('#custoParaIniciar');
106+
const selOrdem = document.querySelector('#ordenacao');
107+
const selCategoria = document.querySelector('#filtro');
108+
109+
mostrarTodos.addEventListener("click", () => {
110+
// zera a lista de cards
111+
listaHobby.innerHTML = "";
112+
113+
// zera o sort
114+
selOrdem.value = "buscar";
115+
116+
// zera o filter
117+
selCategoria.value = "Todos";
118+
119+
//zera a média de dificuldade
120+
statsContainer.innerHTML = "Media Nível de Dificuldade: 0";
121+
122+
//zera a média de custo
123+
statsContainer2.innerHTML = "Media Custo: R$0,00";
124+
125+
// renderiza novamente
126+
listaHobby.appendChild(renderItems(data));
127+
128+
});
129+
130+
131+
// função computestats OK
132+
// colocar um span no html com id e o texto resultados
133+
// usar template string ex. ${cards} resultados
134+
// usar reduce

0 commit comments

Comments
 (0)