Laboratoria · Leonor-HC · Apr 10, 2023 · Apr 11, 2023 · Apr 11, 2023 · Apr 12, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "data-lovers",
   "version": "1.0.0",
+  "type": "module",
   "main": "src/index.html",
   "license": "MIT",
   "scripts": {

diff --git a/src/characters.html b/src/characters.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Data Lovers</title>
+  <link rel="stylesheet" href="styleCharacters.css" />
+</head>
+
+
+<body>
+
+  <header>
+    <div class="wrapper">
+      <div>
+        <a href="index.html">
+          <img src="images/logo.png" id="miLogo" class="logo" alt="logo rick and Morty">
+        </a>
+      </div>
+      <nav>
+        <a href="index.html">HOME</a>
+        <a href="characters.html">CHARACTERS</a>
+        <a href="episodes.html">EPISODES</a>
+        <a href="wallpapers.html">WALLPAPERS</a>
+
+      </nav>
+    </div>
+  </header>
+
+
+  <main>
+    <div class=" side sideLeft">
+      <div>
+        <article>
+          <div>
+            <h1>Rick & <br>
+              Morty page.</h1>
+          </div>
+        </article>
+        <section>
+          <div class="subir">
+            <img src="images/icons8-linea-vertical-50.png" alt="linea verde2">
+            <h2>Find your favorites Rick and <br> Morty characters.</h2>
+          </div>
+        </section>
+      </div>
+      <div>
+        <input class="search" type="text" id="search-input" placeholder="Search character...">
+      </div>
+        <button class="buttons" id="A-Z"> A - Z </button>
+        <button class="buttons" id="Z-A" > Z - A </button>
+
+      <div class="lineaFilter">
+        <img class="filter" src="images/icons8-editar-filtro-50.png" alt="Icono Filtro">
+        <h3> FILTER </h3>
+      </div>
+      <div class="">
+        <h4>
+          <div>
+          <a href="characters.html" > >> All</a> 
+          <br><br>
+          <a href="#" id="Human" class="filtro"> >> Human</a> 
+          <br><br>
+          <a href="#" id="Male"  class="gender"> >> Male</a> 
+          <br><br>
+          <a href="#" id="Female"  class="gender"> >> Female</a>
+          <br><br>
+          <a href="#" id="Alive" class="status"> >> Alive</a>
+          <br><br>
+          <a href="#" id="Dead" class="status"> >> Dead</a>
+          </div>
+
+        </h4>
+      </div>
+    </div>
+
+    <aside>
+      <div class="container">
+        <div class="card">
+          <div class="card-body">
+            <a href="character1.html"> <img src="images/1.jpeg"></a>
+            <div>
+              <h5 class="card-title">Card Title</h5>
+            </div>
+          </div>
+        </div>
+      </div>
+    </aside>
+  </main>
+
+
+</body>
+<script src="characters.js" type="module"></script>
+
+</html>
diff --git a/src/characters.js b/src/characters.js
@@ -0,0 +1,74 @@
+import {getCharacters, getCharactersByQuery, filterBySpecies, filterByGender, 
+  filterByStatus, ordinationAz, ordinationZa} from "./data.js";
+
+const container = document.querySelector(".container");
+
+function renderCharacters(characters) {
+  container.innerHTML = characters.map(character => `
+    <div class="card"> 
+      <div class="card-body"> 
+        <a href=" "> <img src="${character.image}"></a>
+        <div>
+          <h5 class="card-title">${character.name}</h5>
+        </div>
+      </div>
+    </div>
+  `).join("");
+} renderCharacters(getCharacters());
+
+const searchInput = document.getElementById("search-input");
+searchInput.addEventListener("input", () => {
+  const query = searchInput.value.toLowerCase();
+  const filteredCharacters = getCharactersByQuery(query);
+  renderCharacters(filteredCharacters);
+});
+// Ordenar A-Z 
+const orderAz = document.getElementById("A-Z");
+orderAz.addEventListener("click", () => {
+  const allCharacters = getCharacters();
+  const filterCharactersAz = ordinationAz(allCharacters);
+  renderCharacters(filterCharactersAz);
+});
+// Ordenar Z-A
+const orderZa = document.getElementById("Z-A");
+orderZa.addEventListener("click", () => {
+  const allCharacters = getCharacters();
+  const filterCharactersZa = ordinationZa(allCharacters);
+  renderCharacters(filterCharactersZa);
+});
+//Filter Human   
+const characterHuman= document.getElementById("Human");
+characterHuman.addEventListener("click", () => {
+  const allCharacters = getCharacters();
+  const filterHumanCharacters= filterBySpecies(allCharacters, "Human");
+  renderCharacters(filterHumanCharacters);
+});
+//Filter Male
+const characterMale= document.getElementById("Male");
+characterMale.addEventListener("click", () => {
+  const allCharacters = getCharacters();
+  const filterMaleCharacters= filterByGender(allCharacters,"Male");
+  renderCharacters(filterMaleCharacters);
+});
+//Filter Female
+const characterFemale= document.getElementById("Female");
+characterFemale.addEventListener("click", () => {
+  const allCharacters = getCharacters();
+  const filterFemaleCharacters=filterByGender(allCharacters,"Female");
+  renderCharacters(filterFemaleCharacters);
+});
+//Filter Alive
+const characterAlive= document.getElementById("Alive");
+characterAlive.addEventListener("click", () => {
+  const allCharacters = getCharacters();
+  const filterAliveCharacters= filterByStatus(allCharacters,"Alive")
+  renderCharacters(filterAliveCharacters);
+});
+//Filter Dead
+const characterDead= document.getElementById("Dead");
+characterDead.addEventListener("click", () => {
+  const allCharacters = getCharacters();
+  const filterDeadCharacters= filterByStatus(allCharacters, "Dead")
+  renderCharacters(filterDeadCharacters);
+}); 
+
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,44 @@
-// estas funciones son de ejemplo
+import dataRickAndMorty from "./data/rickandmorty/rickandmorty.js"
+//console.log(dataRickAndMorty);
 
-export const example = () => {
-  return 'example';
-};
-
-export const anotherExample = () => {
-  return 'OMG';
-};
+export function getCharacters () {
+  return dataRickAndMorty.results;
+}
+export function getCharactersByQuery(query){
+  return dataRickAndMorty.results.filter(character =>
+    character.name.toLowerCase().includes(query));
+}
+export function ordinationAz (dataCharacters){
+  return dataCharacters.sort((a,b)=>{
+    if(a.name < b.name){
+      return -1;
+    }
+    if (a.name > b.name){
+      return 1;
+    } 
+    return 0;
+  });
+}
+export function ordinationZa (dataCharacters){
+  return dataCharacters.sort((a,b)=>{
+    if(a.name > b.name){
+      return -1;
+    }
+    if (a.name < b.name){
+      return 1;
+    } 
+    return 0;
+  });
+}
+export function filterBySpecies (dataCharacters,species){
+  const speciesFilter= dataCharacters.filter((character)=> character.species === species);
+  return speciesFilter;
+}
+export function filterByGender (dataCharacters,gender){
+  const genderFilter= dataCharacters.filter((character)=> character.gender === gender);
+  return genderFilter;
+}
+export function filterByStatus(dataCharacters,status){
+  const statusFilter= dataCharacters.filter((character)=>character.status === status);
+  return statusFilter;
+}
diff --git a/src/episodes.html b/src/episodes.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Data Lovers</title>
+  <link rel="stylesheet" href="styleCharacters.css" />
+</head>
+
+
+<body>
+
+  <header>
+    <div class="wrapper">
+      <div>
+        <a href="index.html">
+          <img src="images/logo.png" id="miLogo" class="logo" alt="logo rick and Morty">
+        </a>
+      </div>
+      <nav>
+        <a href="index.html">HOME</a>
+        <a href="characters.html">CHARACTERS</a>
+        <a href="episodes.html">EPISODES</a>
+        <a href="wallpapers.html">WALLPAPERS</a>
+
+
+      </nav>
+    </div>
+  </header>
+
+
+  <main>
+
+        <section>
+          <div class="subir">
+            <img src="images/icons8-linea-vertical-50.png" alt="linea verde2">
+            <h2>Find your favorites Rick and Morty <br> Episodes.</h2>
+          </div>
+        </section>
+
+  </main>
+
+
+</body>
+<script src="characters.js" type="module"></script>
+
+</html>
diff --git a/src/images/cel1.jpeg b/src/images/cel1.jpeg
diff --git a/src/images/cel2.jpg b/src/images/cel2.jpg
diff --git a/src/images/cel3.webp b/src/images/cel3.webp
diff --git a/src/images/cel4.webp b/src/images/cel4.webp
diff --git a/src/images/cel5.png b/src/images/cel5.png
diff --git a/src/images/d1.jpeg b/src/images/d1.jpeg
diff --git a/src/images/d10.jpeg b/src/images/d10.jpeg
diff --git a/src/images/d2.jpeg b/src/images/d2.jpeg
diff --git a/src/images/d3.png b/src/images/d3.png
diff --git a/src/images/d4.jpeg b/src/images/d4.jpeg
diff --git a/src/images/d5.jpeg b/src/images/d5.jpeg
diff --git a/src/images/d6.jpeg b/src/images/d6.jpeg
diff --git a/src/images/d7.jpeg b/src/images/d7.jpeg
diff --git a/src/images/d8.jpeg b/src/images/d8.jpeg
diff --git a/src/images/d9.jpeg b/src/images/d9.jpeg
diff --git a/src/images/icons8-editar-filtro-50.png b/src/images/icons8-editar-filtro-50.png
diff --git a/src/images/icons8-linea-vertical-50.png b/src/images/icons8-linea-vertical-50.png
diff --git a/src/images/img1.jpeg b/src/images/img1.jpeg
diff --git a/src/images/img2.jpeg b/src/images/img2.jpeg
diff --git a/src/images/img3.jpeg b/src/images/img3.jpeg
diff --git a/src/images/img4.jpeg b/src/images/img4.jpeg
diff --git a/src/images/img5.jpeg b/src/images/img5.jpeg
diff --git a/src/images/imgluna.jpeg b/src/images/imgluna.jpeg
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,61 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
+    <header>
+      <div class="wrapper">
+        <div>
+          <a href="index.html">
+            <img src="images/logo.png" id="miLogo" class="logo" alt="logo rick and Morty">
+          </a>
+        </div>
+        <nav>
+            <a href="index.html">HOME</a>
+            <a href="characters.html">CHARACTERS</a>
+            <a href="episodes.html">EPISODES</a>
+            <a href="wallpapers.html">WALLPAPERS</a>
+            <a href="#">LOGIN</a>
+
+        </nav>
+      </div> 
+    </header>
+    <main>
+      <div class="wrapper">
+      <article>
+        <div class="side">
+          <img src="images/icons8-linea-vertical-50.png" alt="linea verde1"> 
+          <h1 class="down">Welcome to the
+            <br> 
+          Rick and Morty page.</h1> 
+        </div>
+
+      </article>
+      <section >
+        <div class="side">
+          <img src="images/icons8-linea-vertical-50.png" alt="linea verde2"> 
+          <h2>American adult animated television series created
+            by Justin Roiland and Dan Harmon in 2013 for Adult Swim, also
+            aired on Cartoon Network. The series follows the misadventures of a
+            scientist, Rick Sanchez, and his easily influenced grandson, Morty,
+            who pass the time between domestic life and space travel,
+            temporary and intergalactic. Dan Harmon, the co-creator of the series and
+            Justin Roiland are responsible for the main voices of Morty and Rick,
+            the series also includes the voices of Chris Parnell, Spencer Grammer and
+            Sarah Chalke.
+            <br>
+            <br>
+            The series originated from a scrappy short animated by Roiland
+            for the Channel 102 film festival called Doc and Mharti, a parody of
+            the main protagonists of Back to the Future. When NBC
+            fired Harmon in 2013 over arguments between him and show executives
+            he had created, Community, he and Roiland developed a series based on the
+            characters already created by Roiland.</h2>
+        </div>
+      </section>  
+    </div>
+    </main>
+
+
+
   </body>
+  <script src="main.js" type="module"></script>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,16 @@
-import { example } from './data.js';
-// import data from './data/lol/lol.js';
-import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
+const backgrounds = [];
+backgrounds[0] = '../images/img1.jpeg';
+backgrounds[1] = '../images/img2.jpeg';
+backgrounds[2] = '../images/img3.jpeg';
+backgrounds[3] = '../images/img4.jpeg';
+backgrounds[4] = '../images/img5.jpeg';
+
+function setBackground(){
+  const setBackground = Math.floor(Math.random() * backgrounds.length);
+  document.body.style.backgroundImage = `url(${backgrounds[setBackground]})`;
+}
+
+window.onload = setBackground
+
+
 
-console.log(example, data);