Ejercicio – Crear una lista de recordatorios

Ejercicio – Crear una lista de recordatorios

0
(0)

En este ejercicio haremos un sencillo script que crea una lista de recordatorios en el documento web.

Habrá un cajetín de texto, un botón para añadir nuevos elementos y otro para resetear la lista.

Cuando no se escriba nada en el cajetín de texto saltará un aviso al usuario.

Aplicaremos los siguientes conceptos.

Vayamos al ejercicio:

Enunciado

Crea un documento web que nos ayude a generar una lista de recordatorios.

La lista se debe poder resetear cuando el usuario lo desee.

La lista no debe añadir nuevas líneas cuando el usuario no haya escrito nada.

Se sugiere crear un formulario con un input de texto y dos botones.

Solución del ejercicio

Se desglosa la explicación de la resolución en 2 partes.

En la primera se observa como se reinicia el javascript y se asigna el método onclick en los botones del formulario.

Puede sorprender la mezcla de métodos utilizados pero se hace así a fin didáctico.

Unas veces se ha usado addEventListener(), otras se ha declarado el evento como si fuera un atributo. (window.onload = init;)

En la segunda parte se desglosan las dos funciones que dan vida al script.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Creación de nodos mediante javascript">
        <meta name="author" content="Francesc Ricart">
        <title>Ejercicio - La lista de la compra</title>
    </head>
    <body>
        
    <form action="#">
        <input type="text" class="introduccionDatos" id="introduccionDatos">
        <input type="button" value="Añadir a la lista" id="anadir">
        <input type="button" value="Reiniciar" id="reiniciar">
    </form>
   
   <ul id="elementoUl">   
   </ul>   
   
    <script>
        window.onload = init;
        function init(){
            document.getElementById("anadir").addEventListener("click",anadirElemento);
            document.getElementById("reiniciar").addEventListener("click",reiniciarLista);
        }
           
        function anadirElemento(){
         //...
        }
           
        function reiniciarLista(){
         //...
          }
        }   
    </script>
   
    </body>
</html>

Desarrollo de la función anadirElemento()

function anadirElemento(){
            var elementoUl = document.getElementById("elementoUl");
            var aux = document.getElementById("introduccionDatos");
            if (aux.value != ""){
                var elementoLi = document.createElement("li");
                elementoLi.innerHTML = aux.value;
                elementoUl.appendChild(elementoLi);
                aux.value="";
            }else{window.alert("Debes rellenar el formulario")}
        }

Desarrollo de la función reiniciarLista()

function reiniciarLista(){
            var elementosEliminar = document.getElementsByTagName("li");
            
            while(elementosEliminar.length!=0){
              elementosEliminar[0].parentNode.removeChild(elementosEliminar[0]);   
            }
        }

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

Espero que este ejercicio te ayude a repasar conceptos básicos como de que modo podemos crear nuevos nodos en el documento web y eliminarlos.

También distintas formas de asignar eventos a los nodos ya existentes.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 0 / 5. Votos: 0

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment