Agrega tarea clase 6

index.html

@@ -17,10 +17,13 @@ <h2>Escribamos un poco de código el día de hoy!</h2>
 
   <main>
     <div>
-      <p>En <a href="https://www.google.com/chrome/">Chrome</a> y <a href="https://www.mozilla.org/en-GB/firefox/new/">Firefox</a>,
-        para abrir la <i>Consola del navegador</i>, click derecho en esta página y seleccionen <i>'Inspect'</i>. La consola va a aparecer
-          abajo o a la derecha de la pantalla.
-      <p>Si estás listos para probar un atajo del teclado, apretá <i>'<abbr title="Command">CMD</abbr>+<abbr title="Option">OPT</abbr>+J'</i>
+      <p>En <a href="https://www.google.com/chrome/">Chrome</a> y <a
+          href="https://www.mozilla.org/en-GB/firefox/new/">Firefox</a>,
+        para abrir la <i>Consola del navegador</i>, click derecho en esta página y seleccionen <i>'Inspect'</i>. La
+        consola va a aparecer
+        abajo o a la derecha de la pantalla.
+      <p>Si estás listos para probar un atajo del teclado, apretá <i>'<abbr title="Command">CMD</abbr>+<abbr
+            title="Option">OPT</abbr>+J'</i>
         en Mac, ó <i>'F12'</i> en Windows</p>
     </div>
 
@@ -33,8 +36,9 @@ <h2>Escribamos un poco de código el día de hoy!</h2>
     <div>
       <ul>
         <li class="website">
-            <span>GitHub</span>
-            <a href="https://github.com/r-argentina-programa/introduccion-a-js" target="_blank">github.com/r-argentina-programa</a>
+          <span>GitHub</span>
+          <a href="https://github.com/r-argentina-programa/introduccion-a-js"
+            target="_blank">github.com/r-argentina-programa</a>
         </li>
       </ul>
     </div>
@@ -69,6 +73,7 @@ <h2>Escribamos un poco de código el día de hoy!</h2>
     </div>
   </footer>
 
-  <script src="js/nivel1.js"></script>
+  <script src="js/nivel3.js"></script>
 </body>
+
 </html>

js/nivel3.js

@@ -120,12 +120,16 @@
     // pero no la variable en sí misma. Vas a ver esto en acción ahora mismo.
 */
 
+const $nuestroTwitter = document.querySelector(".twitter");
+console.log($nuestroTwitter);
+
 // TAREA: Ahora te toca a vos! — Obtené la etiqueta h1 de la página y guardala en una variable
 //       variable llamada nuestroTitulo.
 //       Utilizá console.log para ver lo que obtuviste!
 
 
-
+const titulo = document.querySelector("h1");
+console.log(titulo);
 
 
 
@@ -146,23 +150,25 @@
 
 // TAREA: Obtené todos los elementos <li> de la página en una variable llamada mediaLinks.
 
-
+const mediaLinks = document.querySelectorAll("li");
 
 
 
 
 // TAREA: Ahora utilizá console.log para ver la cantidad de 
 // elementos li que hay con mediaLinks.length
 
-
+console.log(mediaLinks.length);
 
 
 
 
 // TAREA: ¿Te acordás de los bucles del nivel 2? Usando lo que sabés de ellos, realizá iteraciones
 //      sobre cada item de mediaLinks y mostralos en pantalla con console.log
 
-
+for (let i = 0; i < mediaLinks.length; i++) {
+    console.log(mediaLinks[i]);
+}
 
 
 
@@ -184,7 +190,7 @@
 // TAREA: Obtené el contenido de nuestro elemento 'h1'
 // y utilizá console.log para mostrarlo.
 
-
+console.log(titulo.textContent);
 
 
 
@@ -206,7 +212,7 @@
 // TAREA: Hagamos un nuevo título! Cambiá el contenido de nuestro 'h1' y ponele lo que quieras.
 
 
-
+titulo.textContent = "Chau!";
 
 
 /*
@@ -223,7 +229,7 @@
 
 // TAREA: Actualizá el valor del atributo 'src' de nuestra etiqueta 'img' a "img/kittens.jpeg".
 
-
+document.querySelector("#logo > img").src = "img/kittens.jpeg";
 
 
 
@@ -248,8 +254,11 @@
 
 // Tarea: Obtené cualquier elemento de la página y cambiale algunos estilos.
 
-
-
+/*
+titulo.style.backgroundColor = "blue";
+titulo.style.color = "#f0f0f0";
+titulo.style.fontStyle = "italic";
+*/
 
 
 
@@ -278,6 +287,10 @@
 //
 // P.S. También les podés dar estilos al nuevo nodo que creaste.
 
+const $imagenLogo = document.createElement("img");
+$imagenLogo.src = "img/woman_bw.jpg";
+$imagenLogo.alt = "Foto de una mujer en blanco y negro sosteniendo una laptop";
+document.querySelector("header").appendChild($imagenLogo);
 
 
 

tareas/clase-6/tarea/tarea.css

@@ -0,0 +1,4 @@
+.hidden {
+  display: none;
+  color: red;
+}

tareas/clase-6/tarea/tarea.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Calculadora de edades</title>
+  <link rel="stylesheet" href="tarea.css">
+</head>
+
+<body>
+  <h1 class="title">Hola! Vamos a hacer algunos cálculos!</h1>
+  <form action="#" class="form">
+    <p class="paragraph">Primero que nada, decinnos cuánta gente vive en tu casa:</p>
+    <input type="number" class="input" id="cantidad-integrantes" placeholder="Integrantes en tu casa..."
+      aria-label="Cantidad de integrantes">
+    <button type="submit" class="button button--important" id="enviar-cantidad-integrantes">Enviar</button>
+  </form>
+
+  <form action="#" class="form" id="form-integrantes">
+    <div class="integrantes"></div>
+
+    <div class="controles hidden">
+      <button type="submit" class="button button--important" id="calcular">Calcular</button>
+      <button type="button" class="button" id="borrar">Borrar todo</button>
+    </div>
+  </form>
+
+  <div class="resultados hidden">
+    <p class="resultado">Edad mayor: </p>
+    <p class="resultado" id="edad-mayor"></p>
+
+    <p class="resultado">Edad menor: </p>
+    <p class="resultado" id="edad-menor"></p>
+
+    <p class="resultado">Edad promedio: </p>
+    <p class="resultado" id="edad-promedio"></p>
+
+    <p class="resultado">Salario anual mayor: </p>
+    <p class="resultado" id="salario-anual-mayor"></p>
+
+    <p class="resultado">Salario anual menor: </p>
+    <p class="resultado" id="salario-anual-menor"></p>
+
+    <p class="resultado">Salario anual promedio: </p>
+    <p class="resultado" id="salario-anual-promedio"></p>
+
+    <p class="resultado">Salario mensual promedio: </p>
+    <p class="resultado" id="salario-mensual-promedio"></p>
+  </div>
+  <script src="tarea.js"></script>
+</body>
+
+</html>