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