Felicidades has completado la lección ! 🎊

En esta sección aprenderemos a crear un juego de piedra, papel o tijera en el cual el usuario podrá elegir una de las 3 opciones y el programa escogerá una de las 3 opciones de manera aleatoria, y se mostrará quién ganó la partida. Tu tarea será completar el código según lo aprendido. Observación: si el comentario inicia con un * significa que debes completar lo que pida, de lo contrario es un simple comentario para entender el código.

NOTA: La actividad esta construida para favorecer el aprendizaje, por lo tanto, es posible que el código no siga las mejores practicas.

Completa el código que falte para que el programa pueda funcionar. Al final tendrás el código completo. Te recomiendo que uses un editor o lo hagas del proporcionado y vayas siguiendo la actividad desde ahí.

La actividad se centra en repasar lo visto anteriormente, por lo que el CSS y el HTML ya está construido. Accede al archivo aquí, y regresa para ir construyendo la app paso a paso. No te preocupes si la solución no es la misma, al final existen varias formas de resolverlo, el objetivo es que le entiendas y lo intentes. Suerte! 😉

El objetivo de la app es dado un formulario, capturar los datos y pintarlos en una card. Para comenzar desde el JS seleccionemos el formulario y la etiqueta ul que es donde vamos a insertar el contenido. Completa el código:

//*declara una varible donde selecciones el form.
//*declara una variable donde selecciones la etiqueta ul.

const form = document.querySelector("form");
const listaTareas = document.querySelector("#lista-tareas");

Una vez teniendo esto necesitamos añadir un evento al form para obtener los valores, el evento a usar es "submit" este nos va a permitir escuchar cuando los datos sean enviados. Completa el código:

//*Añade el evento submit al formulario y pásale una función de flecha con el evento como parámetro.
//Pista (e) => { ...

form.addEventListener("submit", (e) => {/*Código próximo*/}

Ahora usaremos "e.preventDefault()"para desactivar que se recargue la página.Dentro de la función necesitamos obtener los datos del formulario.Completa el código:

// Obtenemos los datos del formulario
//*Obtén los datos del campo, nombre, descripción y vencimiento.
// TIP usa el selector que usa un sistema similar a CSS para obtener los campos sin agregar un ID.

//Por cuestiones del editor se uso"" en lugar de las comillas simples dentro del querySelector simplemente sustituyelas para evitar errores.
const nombre = form.querySelector("input[name="nombre"]").value; 
const descripcion = form.querySelector("textarea[name="descripcion"]").value; 
const vencimiento = form.querySelector("input[name="vencimiento"]").value;

Ahora que tenemos los valores del formulario y sus respectivos campos, falta crear el elemento para que se pinte en la pantalla. Tu tarea ahora será el crear un elemento li, es aquí donde contendremos los datos, para que esto se vea mejor añade las siguientes clases "card","br-black","white" al elemento creado.Completa el código:

//*crea el elemento li desde el JS y añádele las clases mencionadas

//Creamos un nuevo elemento<li> 
const li = document.createElement("li");
// Estilamos el li
li.classList.add("card","br-black","white")

Ahora modificaremos el HTML interno del elemento y añadiremos los datos capturados. El HTML interno debe verse así (completa lo que haga falta internamente en el HTML):

`<h3 class ='txt-center'>Tarea:</h3>
<p><!-- Nombre --></p> //*Completa para pintar el nombre
<p>-${descripcion}</p>
<p>Límite: ${...}</p>`;//*Completa para pintar la fecha

Completa el código:

// Asignamos los datos al elemento li modificando el HTML interno.
//*Modifica el HTML interno del li

//Por motivos del editor sustituye las comillas simples por las template literals.
//Asignamos los datos al elemento <li> modificando el html
li.innerHTML = '<h3 class ='txt-center'>Tarea:</h3>
<p>-${nombre}</p>
<p>-${descripcion}</p>
<p>Límite: ${vencimiento}</p'

Ahora que ya tenemos el elemento modificado, el siguiente paso es  añadirlo al HTML usando la etiqueta UL como contenedor padre. Pero antes añadiremos un ID con el objetivo de poder eliminar e incluso actualizar la tarea en un futuro.

//*Añade el ID al li y posteriormente agrega el li final como hijo al elemento ul ('nombrado como listaTareas en el primer paso.')

// Generamos un id aleatorio para la tarea
const id = Math.floor(Math.random() * 1000000);
li.setAttribute('id', id);
// Añadimos el elemento <li> a la lista de tareas
listaTareas.appendChild(li);

Ahora si vemos nuestra aplicación ya está funcionando. Para completarla añadiremos una opcion para eliminar la tarea.

Para eliminar la tarea que completemos usaremos una función que crearemos para obtener las tareas y posteriormente su ID. Para ello dentro de la misma función que usamos donde ejecutamos la acción del eventListener llamaremos una función que posteriormente vamos a crear(ya fuera de la función).

obtenerTareas()

Ahora creamos la función

function obtenerTareas(){}

Lo que tenemos que hacer ahora es seleccionar todos los elementos li. Completa el código

//* Dentro de la función selecciona todos los li

const tareas = document.querySelectorAll("li")

Ya que tenemos el array con todos los elementos, tendremos que recorrer todos los li y añadirles un evento que escuche cuando se haga un doble click. Completa el código

// Recorremos todos los li para añadirles un evento para saber cuando se hizo un click doble.
for(let tarea of tareas) {
//* teniendo a tarea representando a un li de lista de varios. Añadele un evento de doble click.
}

for(let tarea of tareas){
 tarea.addEventListener('dblclick', //aqui vamos a llamar otra función.)
}

Después crearemos una función y se la pasamos al evento de doble click. A dicha función le pasaremos como parámetro el evento e, cuando tengamos el evento, accederemos a su propiedad target y despues al ID. Y con esto ya tendríamos el id del elemento li o visto de otra forma el ID de la tarea a la cual se le haga doble click. Completa el código.

// Recorremos todos los li para añadirles un evento para saber cuando se hizo un click doble.
for(let tarea of tareas) {
 const select = (e) => {
    const idTarea = e.target.id 
    eliminarTarea(idTarea)//* Crea la función para eliminar la tarea
    // TIP: Dado que ya tenemos el id ahora solo falta seleccionar el elemento con ese id y removerlo. No es necesario hacer un condicional o un ciclo dado que ya tenemos el id concreto al cual se le hizo click doble.
 }
 tarea.addEventListener("dblclick",select)
}

function eliminarTarea(id) {
const tareaSeleccionada = document.getElementById(`${id}`)
//eliminamos la tarea
tareaSeleccionada.remove()
}

LISTO!, ahora si le das click doble sobre la card se debe eliminar. No es perfecto, pero es trabajo honesto 🤓