Prueba para realizar pull

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

src/data.js

@@ -1,9 +1,50 @@
-// estas funciones son de ejemplo
-
-export const example = () => {
-  return 'example';
-};
-
-export const anotherExample = () => {
-  return 'OMG';
-};
+export const filtro = (arr = [], casa) => {
+  return arr.filter((element) => element.house === casa);
+};
+
+export async function obtenerDatos() {
+  const url = './data/harrypotter/harry.json';
+  const respuesta = await fetch(url);
+  const resultado = await respuesta.json();
+  return resultado.characters;//.characters, porque en esta ocasion estoy trayendo solo los personajes por la carpeta json
+}
+
+export const orderAZ = (arr) => {
+    let ascendent = arr.sort(function(a, b) {
+      return((a.name < b.name)? -1: ((a.name > b.name)? 1: 0));
+    })
+  return ascendent;
+}
+
+export const orderZA = (arr) => {
+  let descendent = arr.sort(function(a, b) {
+    if(a.name > b.name) { return -1; }
+    if(a.name < b.name) { return 1; }
+    return 0;
+  })
+return descendent;
+}
+
+
+export function calcularPorcentaje(datos) {
+  console.log(calcularPorcentaje)
+  let hombres = 0;
+  let mujeres = 0;
+  for(let i = 0; i < datos.length; i++) {
+    if(datos[i].gender === 'Female') {
+      mujeres++; 
+    } else {
+      hombres++; 
+    }
+  }
+
+  let porcentajeMujeres = (mujeres / datos.length) * 100; 
+  porcentajeMujeres = porcentajeMujeres.toFixed(1);
+  let porcentajeHombres = (hombres / datos.length) * 100;
+  porcentajeHombres = porcentajeHombres.toFixed(1);
+  return { porcentajeMujeres, porcentajeHombres };
+
+  }
+
+
+

src/desktop.css

@@ -0,0 +1,126 @@
+*{
+    box-sizing: border-box;
+    padding: 0%;
+    margin: 0%;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+body{
+    background-repeat: no-repeat;  
+    background-size: cover;                                     
+}
+header {
+    height: 1rem;
+}
+h4 {
+    color: #D4D9D8;
+    font-family: 'Indie Flower', sans-serif;
+    font-size: 2.5rem;
+}
+.home-icon {
+    width: 2.9rem;
+    height: 2.9rem;
+    margin-top: .6rem;
+    margin-right: 90%;
+    margin-left: 1rem;
+}
+
+nav {
+    position: fixed;
+    height: 4rem;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    background-color: #D4D9D8;
+  }
+  nav img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 10px;
+  }
+.title {
+    width: 56rem;
+    height: 14rem;
+    padding: 2rem;
+    text-align: center;
+    margin-top: 2rem;
+}
+.subtitle {
+    width: 58rem;
+    height: 10.5rem;
+    padding: 2rem;
+    margin-right: 33rem;
+}
+
+.container {
+    width: 80%;
+    margin: 3% auto 0;
+    display: inline-block;
+    gap: 1rem;
+}
+
+.logos-escuelas {
+    width: 20%;
+    margin: 2.2%;
+    position: relative;
+    cursor: pointer;
+    float: left;
+    transition:  0.3s ease-out;
+}
+
+.logos-escuelas:hover {
+    top: -5px;
+}
+
+button[type=button] { 
+    font-size: 1.6rem;
+    cursor:pointer;
+    padding: .4rem;
+    width: 28%;
+    margin-bottom: 2rem;
+    border-width: 2px;
+    border-color: rgb(15, 56, 110);
+    border-radius: 1.3rem;
+    margin: 3rem 2% 1rem
+ }
+
+
+.cardsContainer {
+    display: grid;
+    grid-template-columns: 200px 200px 200px 200px;
+    padding: 1rem;
+    place-content: center;
+    color: black;
+}
+
+.card {
+    box-shadow: 0 4px 8px 0 #1d5dab57;
+    transition: 0.3s;
+    padding: 1rem;
+    border-radius: 25px; 
+    display:inline-table;
+    margin: 10px; 
+  }
+
+.card:hover {
+    box-shadow: 0 8px 16px 0 rgba(201, 169, 28, 0.915);
+}
+
+.infoCard {
+    padding: 2px 16px;
+}
+
+.hat-icon {
+    width: 6rem;
+    height: 7rem;
+}
+
+img {
+    border-radius: 5px 5px 0 0;
+  }
+

src/images/tinified/favicon_io/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/index.html

@@ -1,12 +1,62 @@
 <!DOCTYPE html>
 <html>
+
   <head>
     <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title>Data Lovers Dani y Lau</title>
+  <link rel="stylesheet" href="./style.css" />
+    <link href="https://fonts.cdnfonts.com/css/harry-potter" rel="stylesheet">
+  <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)">
+  <link rel="shortcut icon" href="./images/tinified/favicon_io/favicon-32x32.png" type="image/x-icon">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@100&family=Indie+Flower&family=Oswald:wght@200&family=Raleway:wght@100&display=swap" rel="stylesheet">
+
   </head>
   <body>
+  <header>
+    <nav>
+      <input type="image" class="home-icon" src="./images/tinified/castleHoghwarts.png" value="Reload Page" id="btn-refresh">
+    </nav>
+  </header>
+  <main>
+    <section id="indexOne"> 
+    <figure> 
+       <img class="title" src="./images/tinified/logo-titulo.png" alt="Colegio Hogwarts">
+      </figure>
+
+      <h4>Wanna learn more about all the characters from Harry Potter? <br>
+        You are in the right place! ⚡️ </h4>
+    </section>
+
+    <section id="indexTwo">
+      <figure class="container">
+        <img class="logos-escuelas" id="gryfindor" src="./images/tinified/gryfindor.png" alt="Logo Gryfindor">
+        <img class="logos-escuelas" id="hufflepuff" src="./images/tinified/hufflepuff.png" alt="Logo Hufflepuff">
+        <img class="logos-escuelas" id="ravenclaw" src="./images/tinified/ravenclaw.png" alt="Logo Ravenclaw">
+        <img class="logos-escuelas" id="slytherin" src="./images/tinified/slytherin.png" alt="Logo Slytherin">
+    </figure>
+
+      <div>
+         <button type="button" id="cargarAPI"> Display all the characters from the Harry Potter
+         books.</button>
+   </div>
+
+      <div id="percentageBox"> Women <span id="spanPorcentajeMujeres"> </span> | Men <span id="spanPorcentajeHombres">  </span></div>
+
+      <figure> 
+        <img src="./images/tinified/sort (1).png" alt="icono-ordenar" class="orderAZ" id="orderAZ">
+      </figure>
+
+      <div id="cards" class="cardsContainer"> </div>
+    </section>
+
+    </main>
+
+
     <div id="root"></div>
     <script src="main.js" type="module"></script>
   </body>
-</html>
+</html>