Feat/add printar cards

src/data.js

@@ -1,9 +1,38 @@
-// estas funciones son de ejemplo
+import data from './data/ghibli/ghibli.js';
+
+const directorsSelect = document.getElementById("director");
+
+directorsSelect.addEventListener("change", (event) => {
+
+  const filterMoviesByDirectors = data.films.filter((directorName) => {
+    return directorName.director === event.target.value
+  })
+
+  console.log(filterMoviesByDirectors)
+})
+
+
+
+/* Ordenar de A-Z "pronto"
+export const sortMoviesByTitle = (title) => {
+  return title.sort((a, b) => {
+
+    const titleA = a.title.toUpperCase();
+    const titleB = b.title.toUpperCase();
+
+    if (titleA > titleB) {
+      return 1;
+    }
+    if (titleA < titleB) {
+      return -1
+    }
+  });
+};*/
 
-export const example = () => {
-  return 'example';
-};
 
 export const anotherExample = () => {
   return 'OMG';
 };
+
+
+

src/index.html

@@ -17,12 +17,18 @@
     <div class="logo">
       <img src="./imagens/Studio_Ghibli_logo_gato.png" alt="logo" width="400" height="200">
     </div>
+
     <h1>Bem vindo (a) ao serviço de buscas da KiKi!
       <br> Escolha a categoria que deseja buscar:
     </h1>
 
-
     <section class="filter">
+
+      <select class="filmsAz">
+      <option value="filmes" id="films">Filmes A-Z</option>
+
+      </select>
+
       <select class="director">
         <option selected value="none">Diretores</option>
         <option value="Hayao Miyazaki">Hayao Miyazaki</option>
@@ -32,36 +38,37 @@ <h1>Bem vindo (a) ao serviço de buscas da KiKi!
         <option value="Yoshiaki Nishimura">Yoshiaki Nishimura</option>
       </select>
 
-
-      <select class="people">
+      <select class="people" id="people">
         <option selected value="none">Personagens</option>
-        <optgroup label="Filmes">
-          <option value="The Tale of the Princess Kaguya"></option>
-          <option value="When Marnie Was There"></option>
+        <optgroup label="movies">
+          <option value="Howl's Moving Castle">O castelo animado</option>
+          <option value="Tales from Earthsea">Contos de Terramar</option>
+          <option value="Ponyo on the Cliff by the Sea">Ponyo - Uma amizade que veio do mar</option>
+          <option value="The Secret World of Arrietty">O mundo dos pequeninos</option>
+          <option value="From Up on Poppy Hill">A Colina das Papoilas</option>
+          <option value="The Wind Rises">Vidas ao vento</option>
+          <option value="The Tale of the Princess Kaguya">O conto da princesa Kaguya</option>
+          <option value="When Marnie Was There">Memórias de Marnie</option>
         </optgroup>
-        <optgroup label="Ano">
+        <optgroup label="peopleByYear" id="peopleByYear">
           <option value="1980-1990">1980 - 1990</option>
           <option value="1990-2000">1990 - 2000</option>
           <option value="2000-2010">2000 - 2010</option>
           <option value="2010-2020">2010 - 2020</option>
         </optgroup>
       </select>
 
-
-
-      <select class="year">
+      <select class="year" id="year">
         <option selected value="none">Ano</option>
         <option value="1980-1990">1980 - 1990</option>
         <option value="1990-2000">1990 - 2000</option>
         <option value="2000-2010">2000 - 2010</option>
         <option value="2010-2020">2010 - 2020</option>
       </select>
     </section>
-
 </header>
 
-
-  <div class="imagens">
+  <div class="imagens" id="imagens">
     <img src="./imagens/nuvem.png" alt="nuvem" id="nuvem3">
     <img src="./imagens/nuvem.png" alt="nuvem" id="nuvem2">
     <img src="./imagens/kiki_sem fundo_certa.png" alt="kiki" id="kiki">
@@ -73,6 +80,7 @@ <h1>Bem vindo (a) ao serviço de buscas da KiKi!
     <img src="./imagens/coelhinho_de_poeira.png" alt="coelhinho de poeira" id="poeira2">
   </div>
 
+
   <script src="main.js" type="module"></script>
 
   <footer>

src/main.js

@@ -2,7 +2,42 @@ 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/ghibli/ghibli.js';
 // import data from './data/athletes/athletes.js';
 
 console.log(example, data);
+
+const infos = data.films;
+
+function printar(infos) {
+
+  document.getElementById("cards").innerHTML = infos.map((cards) =>
+    `
+     <div class = "cards">
+        <img src = " ${cards.poster}" >
+        <h1>  ${cards.title}</h1>
+        <p>   ${cards.description}</p>
+        <p>  ${cards.producer}</p>
+        <p>  ${cards.director}</p>
+        <p>  ${cards.release_date}</p>
+      </div>
+    `
+  ).join("")
+}
+
+printar(infos)
+
+const btnFilmes = document.getElementById("films");
+
+
+
+
+
+
+
+
+
+
+
+
+