Updates

hortenciahs · Mar 12, 2024 · 98c4fa7 · 98c4fa7
commit 98c4fa7
Show file tree

Hide file tree

Showing 41 changed files with 762 additions and 0 deletions.
diff --git a/data/Favicon/about.txt b/data/Favicon/about.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following graphics from Twitter Twemoji:
+
+- Graphics Title: 1f9da.svg
+- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
+- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f9da.svg
+- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
diff --git a/data/Favicon/android-chrome-192x192.png b/data/Favicon/android-chrome-192x192.png
diff --git a/data/Favicon/android-chrome-512x512.png b/data/Favicon/android-chrome-512x512.png
diff --git a/data/Favicon/apple-touch-icon.png b/data/Favicon/apple-touch-icon.png
diff --git a/data/Favicon/favicon-16x16.png b/data/Favicon/favicon-16x16.png
diff --git a/data/Favicon/favicon-32x32.png b/data/Favicon/favicon-32x32.png
diff --git a/data/Favicon/favicon.ico b/data/Favicon/favicon.ico
diff --git a/data/Favicon/site.webmanifest b/data/Favicon/site.webmanifest
@@ -0,0 +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"}
diff --git a/data/Imagens IA/aerobica.jpeg b/data/Imagens IA/aerobica.jpeg
diff --git a/data/Imagens IA/bridwatching.jpg b/data/Imagens IA/bridwatching.jpg
diff --git a/data/Imagens IA/caminhada.jpeg b/data/Imagens IA/caminhada.jpeg
diff --git a/data/Imagens IA/camping.jpg b/data/Imagens IA/camping.jpg
diff --git a/data/Imagens IA/cerâmica.jpeg b/data/Imagens IA/cerâmica.jpeg
diff --git a/data/Imagens IA/cooking.jpg b/data/Imagens IA/cooking.jpg
diff --git a/data/Imagens IA/corrida.jpeg b/data/Imagens IA/corrida.jpeg
diff --git a/data/Imagens IA/criaçãoDeVelas.jpeg b/data/Imagens IA/criaçãoDeVelas.jpeg
diff --git a/data/Imagens IA/croche.jpeg b/data/Imagens IA/croche.jpeg
diff --git a/data/Imagens IA/cuidados com a pele.jpeg b/data/Imagens IA/cuidados com a pele.jpeg
diff --git a/data/Imagens IA/dança.jpeg b/data/Imagens IA/dança.jpeg
diff --git a/data/Imagens IA/gardening.jpg b/data/Imagens IA/gardening.jpg
diff --git a/data/Imagens IA/leitura.jpeg b/data/Imagens IA/leitura.jpeg
diff --git a/data/Imagens IA/maquiagem.jpeg.jpg b/data/Imagens IA/maquiagem.jpeg.jpg
diff --git a/data/Imagens IA/nadar1.jpeg b/data/Imagens IA/nadar1.jpeg
diff --git a/data/Imagens IA/nailArt.jpeg b/data/Imagens IA/nailArt.jpeg
diff --git a/data/Imagens IA/penteados.jpeg b/data/Imagens IA/penteados.jpeg
diff --git a/data/Imagens IA/photography.jpg b/data/Imagens IA/photography.jpg
diff --git a/data/Imagens IA/pilates.jpeg b/data/Imagens IA/pilates.jpeg
diff --git a/data/Imagens IA/puzzlesolving.jpg b/data/Imagens IA/puzzlesolving.jpg
diff --git a/data/Imagens IA/sabonetes.jpeg b/data/Imagens IA/sabonetes.jpeg
diff --git a/data/Imagens IA/scrapbooking.jpeg b/data/Imagens IA/scrapbooking.jpeg
diff --git a/data/Imagens IA/sewing.jpg b/data/Imagens IA/sewing.jpg
diff --git a/data/Imagens IA/writing.jpg b/data/Imagens IA/writing.jpg
diff --git a/data/dataset.js b/data/dataset.js
diff --git a/data/readme/card_hobby.png b/data/readme/card_hobby.png
diff --git a/data/readme/prompt_readme.png b/data/readme/prompt_readme.png
diff --git a/data/readme/reeadme.gif b/data/readme/reeadme.gif
diff --git a/dataFunctions.js b/dataFunctions.js
@@ -0,0 +1,45 @@
+export const filterBy = (data, filterBy, value) => {
+  const filteredData = data.filter((item) => {
+    return item.facts[filterBy] === value;
+  });
+  return filteredData;
+};
+
+export const sortBy = (data, sortBy, value) => {
+  // mais caro
+  if (value === "asc") {
+    return data.sort((a, b) => {
+      return a.facts[sortBy] - b.facts[sortBy];
+    });
+  } else {
+    // mais barato
+    return data.sort((a, b) => {
+      return b.facts[sortBy] - a.facts[sortBy];
+    });
+  }
+};
+
+const calcularCustoMedio = (data) => {
+  const somaTotal = data.reduce((resultado, data) => {
+    resultado = resultado + data.facts.custoParaIniciar;
+    return resultado;
+  }, 0);
+  return parseFloat(somaTotal / data.length);
+};
+const calcularNivelMedioDeDificuldade = (data) => {
+  const somaTotal = data.reduce((resultado, data) => {
+    resultado = resultado + data.facts.nivelDeDificuldade;
+
+    return resultado;
+  }, 0);
+  return parseFloat(somaTotal / data.length);
+};
+
+export const computeStats = (data) => {
+  const mediaCusto = calcularCustoMedio(data);
+  const mediaNivelDificuldade = calcularNivelMedioDeDificuldade(data);
+  return {
+    mediaCusto: mediaCusto.toFixed(2),
+    mediaNivelDificuldade: mediaNivelDificuldade.toFixed(2),
+  };
+};
diff --git a/index.html b/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Data Verse</title>
+  <!-- favicon -->
+  <link rel="icon" type="image/x-icon" href="\data\Favicon\favicon.ico">
+  <!-- fim do favicon -->
+  <link rel="stylesheet" href="style.css" />
+  <!-- fonte do Google -->
+  <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=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
+</head>
+
+<body>
+  <!-- ondas -->
+    <div class="custom-shape-divider-top-1707265856">
+      <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+          <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>
+          <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>
+          <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>
+      </svg>
+  </div>
+
+  <header>
+    <h1>Qual o hobby ideal para você?</h1>
+  </header>
+
+  <main>
+    <h2>Descubra qual hobby você mais se identifica de forma simples e objetiva!</h2>
+    <!-- divs computestats -->
+    <div class="estatisticas">
+      <div class="calcularNivelMedioDeDificuldade" id="calcularNivelMedioDeDificuldade">
+        <span>Media Nível de Dificuldade: 0 </span>
+      </div>
+  <div id="custoParaIniciar">
+    <span>Media Custo: R$0,00 </span>
+  </div>
+</div>
+  <!-- divs select e botão mostrar todos -->
+    <div class="containerFiltro">
+      <section class="ordenacao">
+        <label for="ordenacao"></label>
+        <select data-testid="select-sort" name="sort-order" id="ordenacao">
+          <option value="buscar">Buscar por custo</option>
+          <option value="asc">Menor Custo</option>
+          <option value="desc">Maior Custo</option>
+        </select>
+      </section>
+      <section class="filtros">
+        <label for="filtro"></label>
+        <select data-testid="select-filter" name="filtroCategoria" id="filtro">
+          <option value="Todos">Buscar por categoria</option>
+          <option value="artesanato">Artesanato</option>
+          <option value="beleza">Beleza</option>
+          <option value="movimentar o corpo">Movimentando Seu Corpo</option>
+          <option value="mente">Mente</option>
+          <option value="natureza">Natureza</option>
+        </select>
+      </section>
+      <section>
+        <button data-testid="button-clear">Mostrar Todos</button>
+      </section>
+    </div>
+  </main>
+  <section id="root">
+    <!-- Aqui irão conter todos os cards -->
+  </section>
+  <footer>Hortência Silva, Jéssica Ramos e Marcela Ferraz</footer>
+  <script src="main.js" type="module"></script>
+  </body>
+
+  </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,76 @@
+
+import { filterBy, sortBy, computeStats } from './dataFunctions.js';
+import { renderItems } from './view.js';  // Certifique-se de ter um arquivo view.js com a função renderItems implementada.
+import data from './data/dataset.js';
+
+let cardsExibidos = data;
+const listaHobby = document.querySelector("#root");
+
+document.addEventListener("DOMContentLoaded", () => {
+  listaHobby.appendChild(renderItems(data));
+
+  const statsContainer = document.getElementById(
+    "calcularNivelMedioDeDificuldade"
+  );
+  const statsContainer2 = document.getElementById("custoParaIniciar");
+
+  const selCategoria = document.querySelector('[name="filtroCategoria"]');
+  const selOrdem = document.querySelector('[data-testid="select-sort"]');
+
+  selCategoria.addEventListener("change", (event) => {
+    const mostrarCategoria = event.target.value;
+    cardsExibidos = filterBy(data, "categoriaHobby", mostrarCategoria);
+    listaHobby.innerHTML = "";
+    listaHobby.appendChild(renderItems(cardsExibidos));
+
+    statsContainer.innerHTML = "";
+    statsContainer2.innerHTML = "";
+
+    // Calcula e exibe as estatísticas // 
+    const stats = computeStats(cardsExibidos);
+    const mediaCustoParaIniciar = document.createElement("span");
+    const mediaNivelDificuldade = document.createElement("span");
+    /*document.createElement("span") cria um novo elemento HTML <span> dinamicamente.*/
+
+    mediaCustoParaIniciar.textContent = `Média de Custo para Iniciar: R$${stats.mediaCusto}`;
+    mediaNivelDificuldade.textContent = `Média de Nível de Dificuldade: ${stats.mediaNivelDificuldade}`;
+
+    statsContainer.appendChild(mediaNivelDificuldade);
+    statsContainer2.appendChild(mediaCustoParaIniciar);
+  });
+
+  selOrdem.addEventListener("change", (event) => {
+    const mostrarOrdem = event.target.value;
+    cardsExibidos = sortBy(cardsExibidos, "custoParaIniciar", mostrarOrdem);
+    listaHobby.innerHTML = "";
+    listaHobby.appendChild(renderItems(cardsExibidos));
+  });
+});
+
+const mostrarTodos = document.querySelector('[data-testid="button-clear"]');
+const statsContainer = document.querySelector(
+  "#calcularNivelMedioDeDificuldade"
+);
+const statsContainer2 = document.querySelector("#custoParaIniciar");
+const selOrdem = document.querySelector("#ordenacao");
+const selCategoria = document.querySelector("#filtro");
+
+mostrarTodos.addEventListener("click", () => {
+  // zera a lista de cards
+  listaHobby.innerHTML = "";
+
+  // zera o sort
+  selOrdem.value = "buscar";
+
+  // zera o filter
+  selCategoria.value = "Todos";
+
+  //zera a média de dificuldade
+  statsContainer.innerHTML = "Média Nível de Dificuldade: 0";
+
+  //zera a média de custo
+  statsContainer2.innerHTML = "Média Custo: R$0,00";
+
+  // renderiza novamente
+  listaHobby.appendChild(renderItems(data));
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +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"}