r-argentina-programa · joaquinrodini · Oct 18, 2019 · Oct 21, 2019 · Oct 21, 2019 · Oct 23, 2019
diff --git a/index.html b/index.html
@@ -69,6 +69,6 @@ <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>
diff --git a/js/nivel3.js b/js/nivel3.js
@@ -26,6 +26,7 @@
     <p></p>
     <img />
 
+    <input type="text" />
     A estos elementos los llamamos "tags". Cada elemento de la página tiene un tag que abre y otro que
     cierra. (NOTA: Algunos tags, como <img />, no necesitan ser
     cerrados con otro tag.)
@@ -119,14 +120,17 @@
     // Eso quiere decir que se pueden cambiar los atributos y propiedades del elemento,
     // 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);
+    console.log(titulo.textContent)
 
 
 /*
@@ -146,23 +150,25 @@
 
 // TAREA: Obtené todos los elementos <li> de la página en una variable llamada mediaLinks.
 
-
-
+    const mediaLinks = document.querySelectorAll('li')
+    console.log(mediaLinks);
 
 
 
 // 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,8 +190,8 @@
 // TAREA: Obtené el contenido de nuestro elemento 'h1'
 // y utilizá console.log para mostrarlo.
 
-
-
+    console.log(titulo.textContent);
+    console.log(titulo.innerText); //pregunta si las cosas estan visibles en la pag
 
 
 
@@ -205,7 +211,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('img').src = 'img/kittens.jpeg';
 
 
 
@@ -248,8 +254,8 @@
 
 // Tarea: Obtené cualquier elemento de la página y cambiale algunos estilos.
 
-
-
+    //titulo.style.backgroundColor = 'blue';
+    //titulo.style.fontSize = '100px';
 
 
 
@@ -279,7 +285,10 @@
 // P.S. También les podés dar estilos al nuevo nodo que creaste.
 
 
-
+    const nodoImagen = document.createElement('img'); //<img>
+    //ahora le agregamos un atributo
+    nodoImagen.src = 'img/woman_bw.jpg';
+    document.querySelector('header').appendChild(nodoImagen); //appenChild agrega un "hijo"
 
 
 

diff --git a/tareas/clase-5/index.html b/tareas/clase-5/index.html
@@ -8,6 +8,19 @@
     <title>Clase 5</title>
 </head>
 <body>
+	<form>
+		<label>Salario Anual</label>
+		<input type="text" id="salario-anual"> <!--lo recomendado es usar "id" para campos que quiera
+		agarrar con queries-->
+		<label>Salario Mensual</label>
+		<input type="text" id="salario-mensual" disabled>
 
+		<button id="calcular-salario-mensual">Calcular</button>
+
+		<input type="reset" value="Limpiar">
+		<button type="reset">Limpiar</button>
+	</form>
+
+	<script type="text/javascript" src="tarea-clase-5.js"></script>
 </body>
 </html>
diff --git a/tareas/clase-5/mi-tarea-clase-5-2.html b/tareas/clase-5/mi-tarea-clase-5-2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>pagina de tarea 5 clase 2</title>
+</head>
+<body>
+	<main>
+		<form>	
+			<center>
+			<fieldset style="background-color: orange; width: 350px">
+				<center>
+				<label>Horas</label>
+				<input type="number" id="horas" style="width: 60px">
+				<br>
+				<br>
+				<label>Minutos</label>
+				<input type="number" id="minutos" style="width: 60px">
+				<br>
+				<br>
+				<label>Segundos</label>
+				<input type="number" id="segundos" style="width: 60px">
+				<br>
+				<br>
+				<button id="calcular-tiempo" style="height: 30px; width: 150px;">Calcular tiempo total</button>
+				<input type="reset" id="reset" value="Limpiar" style="height: 30px; width: 55px">
+				<br>
+				<br>
+				<br>
+				<label>Tiempo total:</label>
+				<strong>xx:xx:xx</strong>
+			</fieldset>
+			</center>
+		</form>
+	</main>
+<script type="text/javascript" src="mi-tarea-clase-5-2.js"></script>
+</body>
+</html>
diff --git a/tareas/clase-5/mi-tarea-clase-5-2.js b/tareas/clase-5/mi-tarea-clase-5-2.js
@@ -0,0 +1,14 @@
+console.log('Hola');
+
+const $calcularTiempo = document.querySelector('#calcular-tiempo');
+
+$calcularTiempo.onclick = function(){
+	const horas = document.querySelector('#horas').value;
+	const minutos = document.querySelector('#minutos').value;
+	const segundos = document.querySelector('#segundos').value;
+
+	const tiempo = document.querySelector('strong');
+	tiempo.textContent = `${horas} hora/s, ${minutos} minuto/s y ${segundos} segundo/s`;
+
+	return false;
+}
diff --git a/tareas/clase-5/mi-tarea-clase-5-3.html b/tareas/clase-5/mi-tarea-clase-5-3.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Ejercicio 3 de clase 5</title>
+</head>
+<body>
+	<ul>
+		<li>4</li>
+		<li>12</li>
+		<li>16</li>
+		<li>4</li>
+		<li>2</li>
+	</ul>
+
+	<em>El promedio es...</em>
+	<br>
+	<br>
+	<em>El número más pequeño es...</em>
+	<br>
+	<br>
+	<em>El número más grande es...</em>
+	<br>
+	<br>
+	<em>El número más frecuente es...</em>
+	<br>
+	<br>
+	<input type="button" id="ver" value="Ver" style="width: 60px; height: 30px">
+
+<script type="text/javascript" src="mi-tarea-clase-5-3.js"></script>
+</body>
+</html>
diff --git a/tareas/clase-5/mi-tarea-clase-5-3.js b/tareas/clase-5/mi-tarea-clase-5-3.js
@@ -0,0 +1,7 @@
+
+const lista = document.querySelectorAll('li')
+const $ver = document.querySelector('#ver')
+
+$ver.onclick = function(){
+	const promedio = 
+}
diff --git a/tareas/clase-5/mi-tarea-clase-5.html b/tareas/clase-5/mi-tarea-clase-5.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Pagina de tarea 5 ejercicio 1</title>
+</head>
+<body>
+	<header>
+	</header>
+
+	<main>		
+		<form>
+			<fieldset style="background-color: lightblue">
+				<center> <br>
+					<legend> <h1> Bienvenido! </h1> </legend>
+				</center>
+				<br>
+				<label>Los campos con (*) son obligatorios</label>
+				<br>
+				<br>
+				<label>Primer nombre*</label><br>
+				<input type="text" name="primerNombre" id="primer-nombre" style="width: 200px">
+				<br>
+				<br>
+				<label>Segundo nombre</label><br>
+				<input type="text" name="segundoNombre" id="segundo-nombre" style="width: 200px">
+				<br>
+				<br>
+				<label>Apellido/s *</label><br>
+				<input type="text" name="apellido" id="apellido" style="width: 200px">
+				<br>
+				<br>
+				<label>Edad *</label><br>
+				<input type="number" name="edad" id="edad" style="width: 50px">
+				<br>
+				<br>
+				<br>
+				<button id="entrar" style="width: 80px; height: 30px;">Entrar</button>
+				<input type="reset" name="reset" value="Limpiar" style="width: 80px; height: 30px;">
+				<br>
+				<br>
+				<label>Tus datos son:</label><br>
+				<input type="text" name="datosFinales" id="datos-finales" style="width: 500px; height: 50px;" disabled>
+			</fieldset>
+		</form>
+	</main>
+	<footer>
+	</footer>
+	<script type="text/javascript" src="mi-tarea-clase-5.js"></script>
+</body>
+</html>
diff --git a/tareas/clase-5/mi-tarea-clase-5.js b/tareas/clase-5/mi-tarea-clase-5.js
@@ -0,0 +1,18 @@
+console.log('hola');
+console.log(document.querySelector('h1').textContent);
+
+
+const $entrar = document.querySelector('#entrar');
+
+$entrar.onclick = function(){
+	const primerNombre = document.querySelector('#primer-nombre').value;
+	const segundoNombre = document.querySelector('#segundo-nombre').value;
+	const apellido = document.querySelector('#apellido').value;
+	const edad = Number(document.querySelector('#edad').value);
+
+
+	document.querySelector('#datos-finales').value = `Tu nombre es ${primerNombre}, tu segundo nombre es ${segundoNombre},
+	tu apellido es ${apellido} y tu edad es ${edad}`;
+
+	return false;
+}
diff --git a/tareas/clase-5/tarea-clase-5.js b/tareas/clase-5/tarea-clase-5.js
@@ -17,11 +17,28 @@ $botonCalcular.onclick = function()
 }
 */
 
+	console.log('Tarea 5');
+
+
 //TAREA: completar tareas/clase-5/index.html para que incluya tarea-clase-5.js
 //TAREA: crear un formulario donde un usuario pueda ingresar su salario anual.
 //cuando el usuario haga click en el botón "calcular", mostrar el salario mensual
 // en una caja de texto deshabilitada. --> <input type="text" disabled id="salario-mensual"/>
 
+	function calcularSalarioMensual (salarioAnual){
+		return salarioAnual / 12;
+	}
+
+	const $calcularSalarioMensual = document.querySelector('#calcular-salario-mensual')
+
+	$calcularSalarioMensual.onclick = function(){
+		const salarioAnual = Number(document.querySelector('#salario-anual').value);
+		const salarioMensual = calcularSalarioMensual (salarioAnual);
+		document.querySelector('#salario-mensual').value = salarioMensual;
+
+		return false;
+	}
+
 //TAREA: En otro archivo html (no Index) y otro archivo js (no tarea-clase-5.js),
 // creá un formulario que capture el primer nombre, segundo nombre, apellido/s y edad del usuario
 // también vamos a crear un <h1> que diga Bienvenido!