Laboratoria · daianeex · Mar 9, 2022 · Mar 9, 2022 · Mar 10, 2022 · Mar 10, 2022
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,13 @@
     "babel-jest": "^27.0.1",
     "eslint": "^8.3.0",
     "gh-pages": "^3.1.0",
-    "htmlhint": "^1.0.0",
+    "htmlhint": "^1.1.2",
+    "http-server": "^14.1.0",
     "jest": "^27.0.1",
     "opener": "^1.5.1",
     "serve": "^13.0.2"
   },
   "engines": {
     "node": ">=14.x"
   }
-}
+}
diff --git a/src/2200.gif b/src/2200.gif
diff --git a/src/RickMortyComeço.jpeg b/src/RickMortyComeço.jpeg
diff --git a/src/cabecalho.png b/src/cabecalho.png
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,27 @@
-// estas funciones son de ejemplo
+export const ordemNameAA = (data) => data.sort((a, b) => {
+    const nameA = a.name.toUpperCase();
+    const nameB = b.name.toUpperCase();
+    if (nameA > nameB) {
+        return 1;
+    }
+    if (nameA < nameB) {
+        return -1;
+    }
+    return 0;
+});
+
+export const ordemNameBB = (data) => data.sort((a, b) => {
+    const nameA = a.name.toUpperCase();
+    const nameB = b.name.toUpperCase();
+    if (nameA > nameB) {
+        return -1;
+    }
+    if (nameA < nameB) {
+        return 1;
+    }
+    return 0;
+});
+
+
 
-export const example = () => {
-  return 'example';
-};
 
-export const anotherExample = () => {
-  return 'OMG';
-};
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,79 @@
 <!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>
+
+<head>
+  <meta charset="utf-8">
+  <title>RICK AND MORTY WIKI</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+
+  <header>
+    <img src="cabecalho.png" alt="cabeçalho" />
+    <h1>RICK AND MORTY WIKI</h1>
+    <nav class="cabecalho-menu">
+      <a class="buttonlink" type="button" href="indexpag2.html">HOME</a>
+      <a class="buttonlink" type="button" href="index.html">PERSONAGENS</a>
+      <a class="buttonlink" type="button" href=""> EPISÓDIOS </a>
+    </nav>
+  </header>
+
+  <form class="filterspersonagens">
+      <select id="selectFilterLife">
+      <option value="" selected hidden>Status de vida</option>
+      <option value="Alive">Vivo</option>
+      <option value="Dead">Morto</option>
+      <option value="unknown">Desconhecido</option>
+    </select>
+
+    <select id="selectFilterSpecies">
+      <option value="" selected hidden>Espécie</option>
+      <option value="Human">Humano</option>
+      <option value="Alien">Alienígena</option>
+      <option value="Humanoid">Humanoide</option>
+      <option value="unknown">Desconhecido</option>
+      <option value="Poopybutthole">Poopybutthole</option>
+      <option value="Mytholog">Mytholog</option>
+      <option value="Animal">Animal</option>
+      <option value="Vampire">Vampiro</option>
+      <option value="Robot">Robô</option>
+      <option value="Cronenberg">Cronenberg</option>
+      <option value="Disease">Doença</option>
+      <option value="Parasite">Parasita</option>
+    </select>
+
+    <select id="selectFilterGender">
+      <option value="" selected hidden>Gênero</option>
+      <option value="Male">Homem</option>
+      <option value="Female">Mulher</option>
+      <option value="unknown">Desconhecido</option>
+      <option value="Genderless">Sem gênero</option>
+    </select>
+
+    <button class="btn-Ordem" id="btn-ordemA">A-Z</button>
+    <button class="btn-Ordem" id="btn-ordemZ">Z-A</button>
+    <button class="btn-Ordem" id="btn-limpar">Limpar</button>
+    <input type="text" name="searchBar" id="searchBar" placeholder="pesquisar"/>
+    <img class= "imgfiltros"src="2200.gif" alt="pesquisar" />
+    <button id="voltarAoTopo">Voltar ao topo</button>
+     </form>
+
+  <main class="central-container">
+    <section class="cards-container" id="card">
+
+    </section>
+  </main>
+
+  <footer>
+    <p class="rodapeparagrafo">DEVELOPED BY
+      <a href="https://github.com/daianeex" target="_blank">
+        <strong class="github">@daianeex </a></strong> And <strong><a href="https://github.com/IsaSoaresFr" target="_blank">
+          <strong class="github">@IsaSoaresFr</strong>
+      </a>
+    </p>
+  </footer>
+  <script src="main.js" type="module"></script>
+</body>
+
 </html>
diff --git a/src/indexpag2.html b/src/indexpag2.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>RICK AND MORTY WIKI</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+  <header>
+    <img src="cabecalho.png" alt="cabeçalho" />
+    <h1>RICK AND MORTY WIKI</h1>
+
+  </header>
+  <main>
+      <h1> RICK AND MORTY WIKI </h1>
+      <p> Seu portal para uma viagem ALUCINANTE !</p>
+          <p> SOBRE A SERIE: Rick Sanchez é um cientista genial e alcoólatra que foi morar com a família de sua filha Beth,
+        uma cirurgiã cardíaca de equinos. Ele divide seu tempo entre desenvolver projetos altamente
+       tecnológicos em seu laboratório (garagem da casa de Beth) e levar seu neto de 14 anos Morty em
+        aventuras perigosas e surreais pelo Multiverso. Combinados com tensões preexistentes dentro da
+       família, esses eventos causam ao sensível Morty muito angústia em casa e na escola. </p>
+
+       <h3> Saiba mais, vamos nessa! Porque você não aperta numa tecla desse teclado e manda uma batida ? </h3>
+
+      <nav>
+      <a class="buttonlink" type="button" href="index.html">PERSONAGENS</a>
+      <a class="buttonlink" type="button" href=""> EPISÓDIOS </a>
+    </nav>
+  </main>
+  <footer><p class="rodapeparagrafo">DEVELOPED BY
+    <a href="https://github.com/daianeex" target="_blank">
+      <strong class="github">@daianeex </a></strong> And <strong><a href="https://github.com/IsaSoaresFr" target="_blank">
+        <strong class="github">@IsaSoaresFr</strong>
+    </a>
+  </p></footer>
+  <script src="main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,91 @@
-import { example } from './data.js';
-import data from './data/pokemon/pokemon.js';
-// import data from './data/lol/lol.js';
-// import data from './data/rickandmorty/rickandmorty.js';
-// import data from './data/ghibli/ghibli.js';
-// import data from './data/athletes/athletes.js';
-
-console.log(example, data);
+import { ordemNameAA, ordemNameBB } from './data.js';
+import data from './data/rickandmorty/rickandmorty.js';
+
+const showPersonagens = document.getElementById("card")
+const arrayRickAndMorty = data.results
+
+function showInfos(arrayRickAndMorty) {
+  showPersonagens.innerHTML = arrayRickAndMorty.map(item =>
+    `<div class="card">
+          <div class="name-title">
+            <p class="title"> ${item.name}</p>
+          </div>
+          <div class="card-img">
+            <img src="${item.image}" class="imgcard" position="center" width="174px" height="170px" border-radius="5%" />
+          </div>
+          <div class="card-infos">
+           <p> <b>Status:</b> ${item.status}</p>
+            <p> <b>Espécie:</b>${item.species}</p>
+            <p> <b>Gênero:</b>${item.gender}</p>
+          </div>
+          </div>`
+
+  ).join('')
+}
+
+showInfos(arrayRickAndMorty)
+//filtros status
+const selectStatus = document.getElementById("selectFilterLife")
+
+selectStatus.addEventListener("change", (event) => {
+  const newArrayStatus = arrayRickAndMorty.filter((item) => {
+    return item.status === event.target.value
+  })
+  showInfos(newArrayStatus)
+})
+//filtroespecie
+const selectSpecies = document.getElementById("selectFilterSpecies")
+
+selectSpecies.addEventListener("change", (event) => {
+  const newArraySpecies = arrayRickAndMorty.filter((item) => {
+    return item.species === event.target.value
+  })
+  showInfos(newArraySpecies)
+})
+//filtroGenero
+const selectGender = document.getElementById("selectFilterGender")
+
+selectGender.addEventListener("change", (event) => {
+  const newArrayGender = arrayRickAndMorty.filter((item) => {
+    return item.gender === event.target.value
+  })
+  showInfos(newArrayGender)
+})
+//função ordenar A a Z
+function ordemNameA() {
+  return showInfos(ordemNameAA(arrayRickAndMorty));
+}
+
+document.getElementById("btn-ordemA").addEventListener("click", ordemNameA);
+//função ordenar Z a A
+function ordemNameB() {
+  return showInfos(ordemNameBB(arrayRickAndMorty));
+}
+document.getElementById("btn-ordemZ").addEventListener("click", ordemNameB);
+//função limpar
+const clearFilters = document.getElementById("btn-limpar");
+function clearAll() {
+  window.location.reload();
+}
+clearFilters.addEventListener("click", clearAll);
+//pesquisar por nome
+
+const searchBar = document.getElementById('searchBar');
+
+console.log(searchBar);
+searchBar.addEventListener('keyup', (e) => {
+  const searchString = e.target.value;
+  const filteredCharacteres = arrayRickAndMorty.filter(item => {
+    return item.name.includes(searchString) ||
+      item.status.includes(searchString) ||
+      item.species.includes(searchString) ||
+      item.gender.includes(searchString)
+  });
+  console.log(filteredCharacteres)
+  showInfos(filteredCharacteres)
+});
+
+var btn = document.querySelector("#voltarAoTopo");
+btn.addEventListener("click", function() {
+    window.scrollTo(0, 0);
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,90 @@
+  body {
+    background-color: #0C0F14;
+  }
+
+  header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    background-color: #1C1F24;
+    padding: 1%;
+  }
+
+  h1 {
+    color: #12B0C9;
+  }
+
+  nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10%;
+    background-color: #0C0F14;
+
+  }
+  .filterspersonagens{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    color: #C8D258;
+    font-size: 14px;
+
+  }
+  .card{
+    background-color: #1C1F24;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 300px;
+    margin: 16px;
+    margin-left: 5px;
+    margin-right: 5px;
+    color: #BFBFBF;
+  }
+
+  .cards-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    width: 80%;
+  }
+
+  .imgcard {
+    position: center;
+    width: 174px;
+    height: 170px;
+    border-radius: 5%;
+  }
+  .imgfiltros {
+    border-bottom: #C8D258 solid 2px;
+  }
+
+  .name-title {
+    align-items: center;
+    height: 35px;
+    width: 300px;
+    margin-bottom: 5px;
+    background-color: #C8D258;
+    text-align: center;
+    border-radius: 5%;
+    font-size: 14px;
+    color: #0C0F14;
+  }
+
+  #voltarAoTopo {
+    position: fixed;
+    bottom: 50px;
+    right: 50px;
+  }
+
+  b, strong {color:#C8D258;}
+  a, link {color: #BFBFBF}
+
+  @media (max-width: 600px)
+{
+  .facet_sidebar
+   {
+    display: none;
+   }