JAVASCRIPT

En grupos

Seguimos hasta las 16:45

Volvemos al piedra papel tijeras

Ahora que sabes imprimir en el DOM usando el innerHTML y ahora que sabes detectar clicks.

¿Te animas a hacer un Piedra Papel y Tijeras con interfaz?

var output = document.getElementById('users');

var users = [
  { name: 'Yunior', age : 20},
  { name: 'Miguel', age : 35}
]

var html = '<ul>';

users.forEach( function (user) { 
    html += '<li>';
    html += `<h2 class="username">${user.name}</h2>`;
    html += `<p> Tiene ${user.age} años</p>`;
    html += '</li>';
});

html += '</ul>';
output.innerHTML = html;
<body>
    <div id="users">
       
    </div>
</body>
var output = document.getElementById('users');

var users = [
  { name: 'Yunior', age : 20},
  { name: 'Miguel', age : 35}
]

var html = '<ul>';

users.forEach( (user) => { 
    html += `<li>
                <h2 class="username">${user.name}</h2>
                <p> Tiene ${user.age} años</p>
             </li>`;
});

html += '</ul>';
output.innerHTML = html;
<body>
    <div id="users">
       
    </div>
</body>

Live coding, rompemos la web de manz

Value of inputs 

var name = document.getElementById('name').value;
var email = document.getElementById('name').value;
var age = document.getElementById('name').value;

var player = { name : name, email , age }

<body>
	<form>
		<input id="name" type="text"/>
		<input id="email" type="email"/>
		<input id="age" type="number"/>
	</form>
</body>

Value of selects 

https://mkyong.com/javascript/javascript-get-selected-value-from-dropdown-list/

Todos los eventos que existen

https://www.w3schools.com/jsref/dom_obj_event.asp

Live coding

Piedra,Papel,Tijeras

Ejercicio final

individual .... sorry :) con paciencia

Fecha límite de entrega el lunes

https://github.com/YuniorGlez/dinamic_form

Reglas

  • Valida que los campos están bien antes de introducirlo en el array.
  • No permitas usuarios con el mismo correo dentro del array.
  • Hoja en blanco y tira de mucho internet, para eso está.
  • Usa bootstrap u otra librería si lo deseas oblitagoriamente, no gastes más de un 10% de tu tiempo en el estilo
  • No se pueden métodos de más de 10 líneas.

Extras

  • Pinta de rojo los inputs no válidos.
  • Añade un icono de borrado en los usuarios de la lista y al pulsarlo elimínalo tanto de la pantalla como de la memoria.
  • Añade un input a la derecha y un botón con una lupa. Servirá para buscar, de manera que al introducir algo y pinchar en la lupa solo saldrán en la pantalla aquellos cuyo nombre contenga la ristra introducida.
  • Si algo va mal, crea una zona en el html para mostrar mensajes de errores, como por ejemplo si las validaciones no pasan.

Fecha límite de entrega el lunes

https://github.com/YuniorGlez/dinamic_form

Curso de Frontend EOI-Telefonica Noviembre 2024. Javascript Octavo día

By Yunior González Santana

Curso de Frontend EOI-Telefonica Noviembre 2024. Javascript Octavo día

Octavo día de Javascript del curso de "EOI Telefónica Noviembre 2024" online.

  • 192

More from Yunior González Santana