Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Branch mio #27

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Branch mio #27

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
66316c0
Cambia el source del script
joaquinrodini Oct 18, 2019
f248d45
Hace la otra parte de la tarea del nivel 3
joaquinrodini Oct 21, 2019
ac9acf3
Hace la ultima parte de la tarea
joaquinrodini Oct 21, 2019
cf9997d
Hace formulario de salario mensual
joaquinrodini Oct 23, 2019
410f5d0
formatea
joaquinrodini Oct 29, 2019
d69e6ac
crea formulario en html
joaquinrodini Oct 29, 2019
72fe6e2
intenta hacer la funcion en js
joaquinrodini Oct 29, 2019
1e74295
hace cambios
joaquinrodini Nov 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
37 changes: 23 additions & 14 deletions js/nivel3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.)
Expand Down Expand Up @@ -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)


/*
Expand All @@ -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]);
}



Expand All @@ -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



Expand All @@ -205,7 +211,7 @@

// TAREA: Hagamos un nuevo título! Cambiá el contenido de nuestro 'h1' y ponele lo que quieras.


//titulo.textContent = 'chau!';



Expand All @@ -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';



Expand All @@ -248,8 +254,8 @@

// Tarea: Obtené cualquier elemento de la página y cambiale algunos estilos.



//titulo.style.backgroundColor = 'blue';
//titulo.style.fontSize = '100px';



Expand Down Expand Up @@ -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"



Expand Down
13 changes: 13 additions & 0 deletions tareas/clase-5/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
51 changes: 51 additions & 0 deletions tareas/clase-5/mi-tarea-clase-5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina de tarea</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: 300px; height: 50px;" disabled>
</fieldset>
</form>
</main>
<footer>
</footer>
<script type="text/javascript" src="mi-tarea-clase-5.js"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions tareas/clase-5/mi-tarea-clase-5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
console.log('hola');
console.log(document.querySelector('h1').textContent);


const $datosFinales = document.querySelector('#entrar');
joaquinrodini marked this conversation as resolved.
Show resolved Hide resolved

$datosFinales.onclick = function(){
joaquinrodini marked this conversation as resolved.
Show resolved Hide resolved
const primerNombre = document.querySelector('#primer-nombre').textContent;
const segundoNombre = document.querySelector('#segundo-nombre').textContent;
const apellido = document.querySelector('#apellido').textContent;
joaquinrodini marked this conversation as resolved.
Show resolved Hide resolved
const edad = Number(document.querySelector('#edad').value);


document.querySelector('#datos-finales').value = $datosFinales;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

document.querySelector('#datos-finales').value = $datosFinales; $datosFinales hace referencia al botón, Vos estás diciendo que el elemento que tiene id datos-finales va a ser igual al botón 🤷‍♂

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En realidad vos tenés que decir que el valor de #datos-finales va a ser la concatenación de todos los otros datos que ya agarraste arriba.

document.querySelector('#datos-finales').value = `Te llamás ${primerNombre} ${segundoNombre} ${apellido} y tenés ${edad} años`

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

entonces debería ser igual a $entrar?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$entrar es un botón. Vos no podés decir que el valor de un campo de texto es igual a un botón. Me explico? En el comentario de arriba te puse exactamente lo que tenés que poner. Decime si no se entiende.


return false;
}
17 changes: 17 additions & 0 deletions tareas/clase-5/tarea-clase-5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Expand Down