Laboratoria · yessicapv-24 · Mar 24, 2023 · Mar 24, 2023 · Mar 24, 2023 · Mar 24, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Imágenes/Hayao_M.png b/src/Imágenes/Hayao_M.png
diff --git a/src/Imágenes/Hayao_m.png b/src/Imágenes/Hayao_m.png
diff --git a/src/Imágenes/Toshio_S.jpeg b/src/Imágenes/Toshio_S.jpeg
diff --git a/src/Imágenes/Yasuyoshi.jpeg b/src/Imágenes/Yasuyoshi.jpeg
diff --git a/src/Imágenes/fandom.png b/src/Imágenes/fandom.png
diff --git a/src/Imágenes/fandompage/fandom01.png b/src/Imágenes/fandompage/fandom01.png
diff --git a/src/Imágenes/fandompage/fandom03.png b/src/Imágenes/fandompage/fandom03.png
diff --git a/src/Imágenes/fandompage/fandom04.png b/src/Imágenes/fandompage/fandom04.png
diff --git a/src/Imágenes/isao-takahata.jpg b/src/Imágenes/isao-takahata.jpg
diff --git a/src/Imágenes/newbie.png b/src/Imágenes/newbie.png
diff --git a/src/Imágenes/newbiepage/newbie01.png b/src/Imágenes/newbiepage/newbie01.png
diff --git a/src/Imágenes/newbiepage/newbie02.png b/src/Imágenes/newbiepage/newbie02.png
diff --git a/src/Imágenes/newbiepage/newbie03.png b/src/Imágenes/newbiepage/newbie03.png
diff --git a/src/Imágenes/newbiepage/newbie04.png b/src/Imágenes/newbiepage/newbie04.png
diff --git a/src/Imágenes/newbiepage/newbie05.png b/src/Imágenes/newbiepage/newbie05.png
diff --git a/src/Imágenes/newbiepage/newbie06.png b/src/Imágenes/newbiepage/newbie06.png
diff --git a/src/Imágenes/paisaje.png b/src/Imágenes/paisaje.png
diff --git a/src/Imágenes/top-image.jfif b/src/Imágenes/top-image.jfif
diff --git a/src/Imágenes/toshio_s.jpeg b/src/Imágenes/toshio_s.jpeg
diff --git a/src/Imágenes/yasuyoshi.jpeg b/src/Imágenes/yasuyoshi.jpeg
diff --git a/src/characters.css b/src/characters.css
@@ -0,0 +1,127 @@
+table {
+  width: 80%;
+  font-family: "Jockey One", sans-serif;
+  font-size: 120%;
+  margin:auto;
+  text-align: justify;
+}
+.characterImg {
+  width: 80%;
+  height: 10%;
+  border-radius: 8%;
+}
+#charactersTableColumnOne {
+  width: 50%;
+  margin:auto;
+}
+#charactersTableColumnTwo {
+  width: 50%;
+  margin-top: 15%;
+}
+#charactersTable td {
+  vertical-align: top;
+  padding: 20px;
+  text-align: center;
+}
+#charactersTable img {
+  height: 342px;
+  width: 250px;
+}
+.justify {
+  text-align: justify;
+}
+button {
+  display: flex;
+  width: auto;
+}
+#sortMoviesByDateID {
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: auto;
+  margin-left: 50%;
+  display: inline-flex;
+  background-color: #3CD1EF;
+  font-family: "Jockey One", sans-serif;
+  font-size: 120%;
+}
+#sortMoviesByDateID:hover {
+  background-color: #EE9547;
+  color: #fff;
+  }
+#sortMoviesByTitleID {
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: auto;
+  display: inline-flex;
+  background-color: #3CD1EF;
+  font-family: "Jockey One", sans-serif;
+  font-size: 120%;
+}
+#sortMoviesByTitleID:hover {
+background-color: #EE9547;
+color: #fff;
+}
+#refresh {
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: auto;
+  display: inline-flex;
+  background-color: #3CD1EF;
+  font-family: "Jockey One", sans-serif;
+  font-size: 120%;
+}
+#refresh:hover {
+background-color: #EE9547;
+color: #fff;
+}
+label {
+  font-family: "Jockey One", sans-serif;
+  font-size: 120%;
+  color: #fff;
+}
+#genderSelect {
+  font-family: "Jockey One", sans-serif;
+  font-size: 120%;
+  background-color: #3CD1EF;
+}
+#charactersSpecieSelect {
+  font-family: "Jockey One", sans-serif;
+  font-size: 120%;
+  background-color: #3CD1EF;
+}
+#sortCharactersByAge {
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: auto;
+  display: inline-flex;
+  background-color: #3CD1EF;
+  font-family: "Jockey One", sans-serif;
+  font-size: 120%;
+}
+#sortCharactersByAge:hover {
+  background-color: #EE9547;
+  color: #fff;
+  }
+  @media screen and (max-width: 768px) {
+    .block {
+      display: flex;
+      flex-direction: column;
+      margin-left: -5%;
+  }
+  .CharacteresPosterContainer {
+    display: flex;
+    justify-content: center;
+    max-width: 400px;
+  }
+  .moviePoster {
+    max-width: 100%;
+    height: auto;
+  }
+  tr {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0.5em 0;
+    border: 1px solid rgba(3,3,3,0.2);
+  }
+}
diff --git a/src/characters.html b/src/characters.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1" name="viewport" /> <!-- qué es esto-->
+    <title>Data Lovers</title>
+    <link rel="stylesheet" href="style.css"/>
+    <link rel="stylesheet" href="characters.css"/>
+</head>
+<body>
+    <header>
+        <div class="navbar">
+        <ul>
+            <li><a href="index.html">HOME</a></li>
+            <li><a href="novato.html">NEWBIE</a></li>
+            <li><a href="fandom.html">FANDOM</a></li>
+        </ul>
+        </div>
+    </header>
+
+    <label for="genderSelect">Filter by gender:</label>
+      <select id="genderSelect">
+        <option value="allGenders">All</option>
+        <option value="Female">Female</option>
+        <option value="Male">Male</option>
+      </select>
+
+      <label for="charactersSpecieSelect">Filter by species:</label>
+      <select id="charactersSpecieSelect">
+        <option value="allSpecies">All</option>
+        <option value="Arch-mage/Human">Arch-mage/Human</option>
+        <option value="Bird">Bird</option>
+        <option value="Borrower">Borrower</option>
+        <option value="Cat">Cat</option>
+        <option value="Deity">Deity</option>
+        <option value="Deity, Dragon">Deity, Dragon</option>
+        <option value="Demon">Demon</option>
+        <option value="Dog">Dog</option>
+        <option value="Fish/Human">Fish/Human</option>
+        <option value="Human">Human</option>
+        <option value="Human/Scarecrow">Human/Scarecrow</option>
+        <option value="Raccoon Dog">Raccoon Dog</option>
+        <option value="Red elk">Red elk</option>
+        <option value="Spirit">Spirit</option>
+        <option value="Spirit of The White Fox">Spirit of The White Fox</option>
+        <option value="Totoro">Totoro</option>
+        <option value="unknown">Unknown</option>
+        <option value="Witch">Witch</option>
+        <option value="Witch/Human">Witch/Human</option>
+        <option value="Wizard">Wizard</option>
+        <option value="Wolf">Wolf</option>
+      </select>
+
+      <button id="sortCharactersByAge">Sort by age</button>
+
+      <table id="charactersTable">
+        <tbody id="charactersTableBody">
+          <tr>
+              <td id="charactersTableColumnOne"></td>
+              <td id="charactersTableColumnTwo"></td>
+            </tr>
+      </tbody>
+    </table>
+
+
+    <script src="main.js" type="module"></script>
+</body>
+</html>
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,193 @@
-// estas funciones son de ejemplo
+//importar mi bloque gigante de data:
+import data from './data/ghibli/ghibli.js';
+const dataFilms = data.films;
 
-export const example = () => {
-  return 'example';
-};
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+export function filterByMovies(director) {
+  const moviesTable = document.getElementById("moviesTable");
+  if (!moviesTable) {
+    //console.error("moviesTable element not found");
+    return;
+  }
+  const moviesBody = moviesTable.getElementsByTagName('tbody')[0];
+  let filteredFilms = dataFilms;
+
+  if (director !== "allDirectors") {
+    filteredFilms = dataFilms.filter(movie => movie.director === director);
+  }
+
+  let tableBody = "";
+  filteredFilms.forEach((movie, index) => {
+    if (index % 3 === 0) {
+      tableBody = tableBody + "<tr>"
+    }
+    tableBody = tableBody + "<td>"
+
+    const posterImg = "<img src='" + movie.poster + "' class='moviePoster'/>"
+    const movieTitle = "<h3>" + movie.title + "</h3>";
+    const director = "<p> Directed by " + movie.director + "</p>";
+    const producer = "<p> Produced by " + movie.producer + "</p>";
+    const releaseDate = "<p>" + movie.release_date + "</p>";
+    const description = "<p class='justify'>" + movie.description + "</p>";
+
+    tableBody = tableBody + posterImg + movieTitle + director + producer + releaseDate + description;
+    tableBody = tableBody + "</td>"
+
+    if (index % 3 === 2) {
+      tableBody = tableBody + "</tr>";
+    }
+  });
+  moviesBody.innerHTML = tableBody;
+}
+<<<<<<< HEAD
+
+filterBy("allDirectors");
+
+export function sortMoviesByDate() {
+  dataFilms.sort((a, b) => (a.release_date) - (b.release_date));
+  filterBy("allDirectors");
+} 
+
+export function sortMoviesByTitle() {
+  dataFilms.sort((a, b) => (a.title).localeCompare(b.title));
+  filterBy("allDirectors");
+}
+=======
+filterByMovies("allDirectors");
+
+export function sortMoviesByDateNewestToOldest() {
+  dataFilms.sort((a, b) => (b.release_date) - (a.release_date));
+}
+
+export function sortMoviesByDateOldestToNewest() {
+  dataFilms.sort((a, b) => (a.release_date) - (b.release_date));
+}
+
+export function filterCharactersBySpeciesAndGender(specie, gender) {
+  const charactersTable = document.getElementById("charactersTable");
+  if(!charactersTable){
+    //console.log("charactersTable element not found")
+    return;
+  }
+  const charactersBody = charactersTable.getElementsByTagName('tbody')[0];
+  const characterSpecieSelection = document.getElementById("charactersSpecieSelect").value;
+
+  const filteredCharacters = dataFilms.flatMap(film => {
+    return film.people.filter(person => {
+      if (specie !== "allSpecies" && gender !== "allGenders") {
+        return person.specie === characterSpecieSelection && person.gender === gender;
+      } else if (specie !== "allSpecies") {
+        return person.specie === characterSpecieSelection;
+      } else if (gender !== "allGenders") {
+        return person.gender === gender;
+      } else {
+        return true; 
+      }
+    });
+  });
+
+  let tableBody = "";
+  let index = 0;
+  filteredCharacters.forEach((person) => {
+    if (index % 3 === 0) {
+      tableBody = tableBody + "<tr>";
+    }
+    tableBody = tableBody + "<td>";
+
+    const characterImg = "<img src='" + person.img + "' class='characterImg'/>";
+    const characterName = "<h3>" + person.name + "</h3>";
+    const characterGender = "<p> Gender: " + person.gender + "</p>";
+    const characterSpecie = "<p> Species: " + person.specie + "</p>";
+    const characterAge = "<p> Age: " + person.age + "</p>";
+    const characterEyesAndHair = "<p> Eye and hair color: " + person.eye_color + " and " + person.hair_color + "</p>";
+
+    tableBody = tableBody + characterImg + characterName + characterGender + characterSpecie + characterAge + characterEyesAndHair;
+    tableBody = tableBody + "</td>";
+
+    if(index % 3 === 2) {
+      tableBody = tableBody + "</tr>";
+    }
+    index++;
+  });
+  charactersBody.innerHTML = tableBody;
+}
+filterCharactersBySpeciesAndGender("allSpecies", "allGenders");
+
+export function filterLocationsByClimate(climate) {
+  const locationsTable = document.getElementById("locationsTable");
+  if (!locationsTable) {
+    //console.log("charactersTable element not found")
+    return;
+  }
+  const locationsBody = locationsTable.getElementsByTagName("tbody")[0];
+  const locationsClimateSelection = document.getElementById("climateSelect").value;
+
+  const filteredLocations = dataFilms.flatMap((film) => {
+    return film.locations.filter(place => {
+      if (climate !== "allClimates") {
+        return place.climate === locationsClimateSelection;
+      } else {
+        return true;
+      }
+    });
+  });
+
+  let tBody = "";
+  tBody = "";
+  let indexOne = 0;
+  filteredLocations.forEach((location) => {
+    if (indexOne % 2 === 0) {
+      tBody = tBody + "<tr>";
+    }
+    tBody = tBody + "<td>";
+    const locationImg = "<img src='" + location.img + "' class='locationImg'/>";
+    const locationName = "<h3>" + location.name + "</h3>";
+    const locationClimate = "<p> Climate: " + location.climate + "</p>";
+    const terrain = "<p> Terrain: " + location.terrain + "</p>";
+    const locationSurfaceWater = "<p> Surface water: " + location.surface_water + "</p>";
+    tBody = tBody + locationImg + locationName + locationClimate + terrain + locationSurfaceWater;
+    tBody = tBody + "</td>";
+    if (indexOne % 2 === 1) {
+      tBody = tBody + "</tr>";
+    }
+    indexOne++;
+  });
+  locationsBody.innerHTML = tBody;
+}
+filterLocationsByClimate("allClimates");
+
+function vehiclesTableOne() {
+  const vehiclesTable = document.getElementById("vehiclesTable");
+  if (!vehiclesTable) { 
+    return;
+  }
+  const vehiclesBody = vehiclesTable.getElementsByTagName("tbody")[0];
+
+  const flattenedVehicles = dataFilms.flatMap((film => film.vehicles) 
+  );
+
+  let tBody = "";
+  tBody = "";
+  let indexOne = 0;
+  flattenedVehicles.forEach((vehicle) => {
+    if (indexOne % 2 === 0) {
+      tBody = tBody + "<tr>";
+    }
+    tBody = tBody + "<td>";
+    const vehicleImg = "<img src='" + vehicle.img + "' class='vehicleImg'/>";
+    const vehicleName = "<h3>" + vehicle.name + "</h3>";
+    const description = "<p class= 'justify'>" + vehicle.description + "</p>";
+    const vehicleClass = "<p> Class: " + vehicle.vehicle_class + "</p>";
+    //const pilotName = "<p> Pilot name: " + vehicle.pilot + "</p>";
+    tBody =
+    tBody + vehicleImg + vehicleName + description + vehicleClass;
+    tBody = tBody + "</td>";
+    if (indexOne % 2 === 1) {
+      tBody = tBody + "</tr>";
+    }
+    indexOne++;
+  });
+  vehiclesBody.innerHTML = tBody;
+}
+vehiclesTableOne("");
+