Ejercicio – Crear una lista de recordatorios

Ejercicio – Crear una lista de recordatorios

Print Friendly, PDF & Email
Ejercicio – Crear una lista de recordatorios
Valora esta entrada
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.

Ver solución (Haz clic)

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!

Entradas relacionadas:

Métodos imprescindibles para trabajar con fechas en Javascript
- 186
Compendio de métodos para trabajar con fechas en Javascript. Comparto mi chuleta de métodos para obtener y crear nuevas fechas.
Sobre comerciales aduladores que imitan a un amigo
- 66
Cuando voy a comprar valoro los comerciales sinceros. No me gusta que me hagan la pelota ni que se conviertan en my best friend. ¿Te pasa?
Información legal mínima obligatoria en todo sitio web
- 156
Con la aplicación de la RGPD a partir del 25 de mayo el mundo se ha vuelto loco. ¡Ni el efecto 2000 dio tantos problemas! Todavía me queda mucho pero te cuento los primeros pasos que yo tomado para tr...
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 223
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Ejemplo de uso de un DAFO para la toma de decisiones. Mi caso personal.
- 710
La primera vez que oí hablar sobre un DAFO (FODA) creí que era una herramienta de marketing poco útil. Un término de aquellos que se inventan los marketinianos para venderte algo. Estaba completamente...
Eliminar eventos Javascript .removeEventListener()
- 718
Ejemplos prácticos de como usar addEventListener() y removeEventListener() del tutorial gratuito de Javascript (y apuntes para mis alumnos)
Cosas que te enseña un mando de la tele sobre tus clientes
- 45
¿Has sido culpado o has culpado injustamente? Nada más lejos de la realidad. Sucede en casa y por supuesto en el trabajo.
Mitos del marketing online que se desinflan e ir contracorriente
- 73
Recuerdo perfectamente el primer día que supe que los reyes magos eran una mentira. Exactamente la misma sensación que acabo de experimentar al desinflar algunos mitos del marketing online.
Como añadir nuevos nodos al DOM usando Javascript
- 346
En esta entrada vemos un tutorial paso a paso sobre como añadir nuevos nodos al DOM mediante Javacript con el ejemplo de un párrafo y el de una imagen.
Ser barato o ser diferente. ¿Por qué no bajar precios?
- 129
Elige ser diferente porqué ser barato es auto destructivo. ¿Por qué pienso que un precio elevado es siempre mejor para tus productos y/o servicios?
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.