Laboratoria · Larasantos97 · Feb 15, 2022 · Feb 22, 2022 · Feb 22, 2022 · Feb 22, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "pretest": "npm run eslint && npm run htmlhint",
     "test": "jest --verbose --coverage",
     "open-coverage-report": "opener ./coverage/lcov-report/index.html",
-    "start": "serve -s src/",
+    "start": "serve src/",
     "deploy": "gh-pages -d src"
   },
   "dependencies": {
@@ -18,12 +18,12 @@
     "babel-jest": "^27.0.1",
     "eslint": "^8.3.0",
     "gh-pages": "^3.1.0",
-    "htmlhint": "^1.0.0",
+    "htmlhint": "^1.1.2",
     "jest": "^27.0.1",
     "opener": "^1.5.1",
     "serve": "^13.0.2"
   },
   "engines": {
     "node": ">=14.x"
   }
-}
+}
diff --git a/src/História_do_usuário_-_1.png b/src/História_do_usuário_-_1.png
diff --git a/src/História_do_usuário_-_2.png b/src/História_do_usuário_-_2.png
diff --git a/src/Olímpiadas Data Lovers.png b/src/Olímpiadas Data Lovers.png
diff --git a/src/atletas.html b/src/atletas.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Olímpiadas Rio 2016 </title>
+  <link rel="stylesheet" href="styleAtletas.css" />
+</head>
+
+<body>
+
+  <header>
+    <div class="banner-oficial">
+      <img src="img/bannerOficial2.png" alt="logo da Olímpiadas Rio 2016 com fundo colorido" class="banner">
+    </div>
+
+  </header>
+  <nav>
+    <ul class="menu">
+      <li class="item-menu"><a href="./index.html" id="Home" class="links">🏅Home</a></li>
+      <li class="item-menu"><a href="./Atletas.html" id="Ath" class="links">🏅Atletas</a></li>
+      <li class="item-menu"><a href="/countries.html" id="countries" class="links">🏅Países</a></li>
+    </ul>
+  </nav>
+     <section class="barraMenu">
+       <input type="text" placeholder="Athlete" class="athField flexItem" id="filterAth">
+       <img src="ordenar.png" alt="order" class="iconOrder" height="24" weight="24">
+       <select class="Order-container flexItem" id="AZsort">  
+        <option selected disabled value="">Order by:</option>
+        <option value="A-Z" id="opAZ">A-Z</option>
+        <option value="Z-A" id="opZA">Z-A</option>
+      </select>
+      <select id="ordering-medal" class="ordering-country flexItem">
+        <option selected disabled value="">🏅Medal</option>
+        <option value="Gold">Gold</option>
+        <option value="Silver">Silver</option>
+        <option value="Bronze">Bronze</option>
+      </select>
+      <select id="filterSport" class="order-sport flexItem">
+        <option selected disabled value="">Sports</option>
+        <option value="Rowing">Rowing</option>
+        <option value="Taekwondo">Taekwondo</option>
+        <option value="Handball">Handball</option>
+        <option value="Wrestling">Wrestling</option>
+        <option value="Gymnastics">Gymnastics</option>
+        <option value="Swimming">Swimming</option>
+        <option value="Basketball">Basketball</option>
+        <option value="Boxing">Boxing</option>
+        <option value="Volleyball">Volleyball</option>
+        <option value="Athletics">Athletics</option>
+        <option value="Rugby Sevens">Rugby Sevens</option>
+        <option value="Judo">Judo</option>
+        <option value="Rhythmic Gymnastics">Rhythmic Gymnastics</option>
+        <option value="Weightlifting">Weightlifting</option>
+        <option value="Equestrianism">Equestrianism</option>
+        <option value="Badminton"> Badminton </option>
+        <option value="Water Polo">Water Polo</option>
+        <option value="Football">Football</option>
+        <option value="Fencing">Fencing</option>
+        <option value="Shooting">Shooting</option>
+        <option value="Sailing">Sailing</option>
+        <option value="Beach Volleyball">Beach Volleyball</option>
+        <option value="Canoeing">Canoeing</option>
+        <option value="Hockey">Hockey</option>
+        <option value="Cycling">Cycling</option>
+        <option value="Tennis">Tennis</option>
+        <option value="Diving">Diving</option>
+        <option value="Table Tennis">Table Tennis</option>
+        <option value="Triathlon">Triathlon</option>
+        <option value="Archery">Archery</option>
+        <option value="Synchronized Swimming">Synchronized Swimming</option>
+        <option value="Modern Pentathlon">Modern Pentathlon</option>
+        <option value="Golf">Golf</option>
+        <option value="Trampolining">Trampolining</option>
+              </select>
+
+      <button class="btn flexItem" id="refresh">Clean</button>
+  </section> 
+
+
+  <main id="cards-atletas" class="container-atletas"></main>
+
+
+
+  <footer class="rodapé margem">
+    Developed by:
+    Jaqueline de Oliveira
+    <a href="https://github.com/jaquelinedeoliveira93" target="_blank" icon="logo-github">
+      <img src="img/logo-github.png" alt="logo-git" width="25" height="25" class="gitHub-linkedin"></a>
+
+    <a href="https://www.linkedin.com/in/jaquelinedeoliveiraa/" target="_blank" icon="logo-linkedin">
+      <img src="img/logo-linkedin.png" alt="logo-link" width="25" height="25" class="gitHub-linkedin"></a>
+
+    Larissa Santos
+    <a href="https://github.com/Larasantos97" target="_blank" icon="logo-github">
+      <img src="img/logo-github.png" alt="logo-git" width="25" height="25" class="gitHub-linkedin"></a>
+
+    <a href="https://www.linkedin.com/in/larissa-dos-reis-santos-aaa8b415a/" target="_blank" icon="logo-linkedin">
+      <img src="img/logo-linkedin.png" alt="logo-link" width="25" height="25" class="gitHub-linkedin"></a>
+  </footer>
+    <div id="root"></div>
+    <script src="atletas.js" type="module"></script>
+  </body>
+</html>
diff --git a/src/atletas.js b/src/atletas.js
@@ -0,0 +1,58 @@
+import { AZsort, filterAth, filterMedal, filterSport} from './data.js';
+import data from './data/athletes/athletes.js';
+
+//Mostrando os cards na tela
+
+function showCards(data){
+const cartasAtletas = data.map((atletas)=>{
+    return `<div class="flex-item-atleta"><ol class = "cards-atletas"><li class="conteudo-atletas">${atletas.name}
+    </li> <li class="conteudo-atletas">${atletas.team}</li>
+    <li class="conteudo-atletas">${atletas.sport}</li>
+    <li class="conteudo-atletas">${atletas.medal}</li></ol></div>`})
+
+  document.getElementById("cards-atletas").innerHTML = cartasAtletas.join("");
+}
+
+showCards(data.athletes)
+
+
+//Função para que o card apareça assim que o usuário escrever o nome do atleta 
+
+document.getElementById("filterAth").addEventListener("keypress", changeFilter)
+function changeFilter(evento){
+const nome = evento.target.value
+const resultado = filterAth(data.athletes, nome)
+showCards(resultado)
+}
+//Função para que o card apareça de acordo com o esporte escolhido
+
+document.getElementById("filterSport").addEventListener("change", changeFilterSport)
+function changeFilterSport(evento){
+const esporte = evento.target.value
+const resultadoEsporte = filterSport(data.athletes, esporte)
+showCards(resultadoEsporte)
+}
+//Função para que o card apareça assim que clicar nas opções de A-Z ou Z-A
+
+document.getElementById("AZsort").addEventListener("change", changeSelect)
+function changeSelect(evento){
+const selectSort = evento.target.value
+const Resultsort = AZsort(data.athletes, selectSort)
+showCards(Resultsort)
+}
+
+// Função para selecionar medalha
+
+document.getElementById("ordering-medal").addEventListener("change", selectMedal)
+function selectMedal (evento){
+  const medalhaSelect = evento.target.value
+  const resultadoMedal = filterMedal(data.athletes, medalhaSelect)
+  showCards(resultadoMedal)
+}
+//Botão limpar
+
+const clearOrderandFilter = document.getElementById("refresh");
+function clearAll(){
+  window.location.reload();
+}
+clearOrderandFilter.addEventListener("click", clearAll);
diff --git a/src/countries.html b/src/countries.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Olímpiadas Rio 2016 </title>
+  <link rel="stylesheet" href="styleCountries.css" />
+</head>
+
+<body>
+
+  <header>
+    <div class="banner-official">
+      <img src="img/bannerOficial2.png" alt="logo da Olímpiadas Rio 2016 com fundo colorido" class="banner">
+    </div>
+
+  </header>
+  <nav>
+    <ul class="menu">
+      <li class="item-menu"><a href="index.html" id="Home" class="links">🏅Home</a></li>
+      <li class="item-menu"><a href="atletas.html" id="Ath" class="links">🏅Atletas</a></li>
+      <li class="item-menu"><a href="countries.html" id="countries" class="links">🏅Países</a></li>
+    </ul>
+  </nav>
+
+  <section class="blue-rectangle">
+    <select id="ordering-country" class="ordering-country">
+      <option selected disabled value="">Teams</option>
+      <option value="a-z">A-Z</option>
+      <option value="z-a">Z-A</option>
+    </select>
+    <button id="clean-button" class="clean-button">Clean</button>
+  </section>
+  <!--
+  <section id="paginate">
+  -->
+  <main id="cards-countries" class="flex-conteiner-countries"></main>
+    <!--
+    <div class="pagination">
+      <div class="first">&#171;</div>
+      <div class="prev">&lt;</div>
+      <div class="numbers">
+        <div>1</div>
+      </div>
+      <div class="next">&gt;</div>
+      <div class="last">&#187;</div>
+    </div>
+  </section>
+    -->
+  <footer class="footer">
+    Developed by:
+    Jaqueline de Oliveira
+    <a href="https://github.com/jaquelinedeoliveira93" target="_blank" icon="logo-github">
+      <img src="img/logo-github.png" alt="logo-git" width="25" height="25" class="gitHub-linkedin"></a>
+
+    <a href="https://www.linkedin.com/in/jaquelinedeoliveiraa/" target="_blank" icon="logo-linkedin">
+      <img src="img/logo-linkedin.png" alt="logo-link" width="25" height="25" class="gitHub-linkedin"></a>
+
+    Larissa Santos
+    <a href="https://github.com/Larasantos97" target="_blank" icon="logo-github">
+      <img src="img/logo-github.png" alt="logo-git" width="25" height="25" class="gitHub-linkedin"></a>
+
+    <a href="https://www.linkedin.com/in/larissa-dos-reis-santos-aaa8b415a/" target="_blank" icon="logo-linkedin">
+      <img src="img/logo-linkedin.png" alt="logo-link" width="25" height="25" class="gitHub-linkedin"></a>
+  </footer>
+  <div id="root"></div>
+  <script src="country.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/country.js b/src/country.js
@@ -0,0 +1,41 @@
+import {sortCountry} from './data.js';
+import data from './data/athletes/athletes.js';
+
+function showCards(data){
+  const listCountry = data.reduce((previousValue, currentAthlete) => {
+    let country = currentAthlete.team;
+    if (country in previousValue) {
+      const previousAthletes = previousValue[currentAthlete.team];
+      return { ...previousValue, [country]: [...previousAthletes, currentAthlete] }
+    }
+    else {
+      return { ...previousValue, [country]: [currentAthlete] }
+    }
+  }, {});
+
+  let cardsCountry = ""
+  for (const country in listCountry) {
+    cardsCountry += `
+      <div class="flex-item">
+        <ol class="background">
+          <li class="contents-country">${country}</li>
+          <li class="contents-country">Total Athletes: ${listCountry[country].length}</li>
+        </ol>
+      </div>`
+    }
+  document.getElementById("cards-countries").innerHTML = cardsCountry;
+}
+showCards(data.athletes)
+
+document.getElementById("ordering-country").addEventListener("change", changeSelectCountry)
+function changeSelectCountry (evento){
+  const selectCountry = evento.target.value
+  const result = sortCountry(data.athletes, selectCountry)
+  showCards(result)
+}
+
+const buttonClean = document.getElementById("clean-button")
+buttonClean.addEventListener("click", cleanOrder)
+function cleanOrder() {
+  window.location.reload();
+}
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,84 @@
-// estas funciones son de ejemplo
 
-export const example = () => {
-  return 'example';
-};
+ //Filtro por nome de atleta
+
+  export const filterAth = (athletes, name) => {
+    return athletes.filter(atleta => {
+    return atleta.name.toLowerCase().includes (name.toLowerCase())
+    });
+  }
+//Filtro por medalha
+
+export const filterMedal =  (athletes, medal) => {
+  return athletes.filter(medalha => {
+    return medalha.medal === (medal)
+  });
+}
+//Filtro por esporte
+
+export const filterSport =  (athletes, sport) => {
+  return athletes.filter(esporte => {
+    return esporte.sport === (sport)
+  });
+}
+
+//Ordenação de A-Z e Z-A
+
+export const AZsort = (athletes, selectSort) => {
+  if (selectSort === "A-Z"){
+    return athletes.sort((a, b) => {
+      const AlphabetA = a.name.toUpperCase();
+      const AlphabetZ = b.name.toUpperCase();
+      if (AlphabetA < AlphabetZ){
+        return -1;
+      }
+      if (AlphabetA > AlphabetZ){
+        return 1;
+      }
+      return 0;
+
+    });
+   } else {
+    return athletes.sort((a, b) => {
+      const AlphabetA = a.name.toUpperCase();
+      const AlphabetZ = b.name.toUpperCase();
+      if (AlphabetA < AlphabetZ){
+        return 1;
+      }
+      if (AlphabetA > AlphabetZ){
+        return -1;
+      }
+      return 0;
+
+    });
+   }
+  }
+
+
+export const sortCountry = (athletes, selectCountry) => {
+  if (selectCountry === "a-z"){
+    return athletes.sort((a, z) => {
+      const countryA = a.team;
+      const countryZ = z.team;
+      if (countryA < countryZ) {
+        return -1;
+      }
+      if (countryA > countryZ) {
+        return 1;
+      }
+      return 0;
+    });
+  } else {
+    return athletes.sort((a, z) => {
+      const countryA = a.team;
+      const countryZ = z.team;
+      if (countryA < countryZ) {
+        return 1;
+      }
+      if (countryA > countryZ) {
+        return -1;
+      }
+      return 0;
+    });
+  }
+}
 
-export const anotherExample = () => {
-  return 'OMG';
-};