Lista de tareas personalizada con checkbox para marcar y desmarcar tareas realizadas Bootstrap y almacenamiento local en este tutorial (parte 2)

Lista de tareas personalizada con checkbox para marcar y desmarcar tareas realizadas Bootstrap y almacenamiento local en este tutorial (parte 2)

Tiempo de lectura: 2 minutos ¡Buenos dias!, continuando con el tutorial anterior sobre como crear un TO-DO LIST, en este de hoy, os dejo una actualización de funcionalidad, en la que hemos implementado lo siguiente: En este ejemplo, hemos agregado un nuevo evento de escucha al <ul> de la lista de tareas completadas (completedList). Cuando se marque o desmarque una … Leer más

Formulario sencillo en HTML, CSS y JavaScript

Formulario sencillo en HTML, CSS y JavaScript

Tiempo de lectura: 2 minutos A continuación muestro un formulario que consta de campos para el nombre, correo electrónico y mensaje. Cuando el usuario envía el formulario, los valores se muestran usando alerts (puedes modificar la función enviarDatos para realizar alguna otra acción, como enviar los datos a un servidor). A continuación muestro el código del ejemplo. Por último muestro … Leer más

Aprende a crear una lista de tareas personalizada con Bootstrap y almacenamiento local en este tutorial

Tiempo de lectura: 2 minutos

¡¡¡Buenos dias y feliz lunes !!!,

Vamos a por otro tutorial, en este caso se trata de una sencilla aplicación de creación de tareas o TO-DO LIST

A continuación os dejo el código de una manera de hacerlo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="to-do-list.js"></script>
    <title>To-do list para devcodelight</title>
</head>

<body>
    <div class="container">
        <h1 class="text-center">Lista de Tareas para Devcodelight</h1>
        <form id="todo-form">
          <div class="input-group mb-3">
            <input type="text" id="todo-input" class="form-control" placeholder="Agregar nueva tarea">
            <div class="input-group-append">
              <button class="btn btn-primary" type="submit">Agregar</button>
            </div>
          </div>
        </form>
        <ul id="todo-list" class="list-group"></ul>
        <button id="clear-btn" class="btn btn-danger">Limpiar Lista</button>
      </div>


</body>

</html>
El evento DOMContentLoaded se dispara cuando el documento HTML ha sido completamente cargado y parseado, sin necesidad de esperar a que todos los recursos externos, como imágenes o scripts, se hayan descargado.
<script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('todo-form');
            const todoInput = document.getElementById('todo-input');
            const todoList = document.getElementById('todo-list');
            const clearButton = document.getElementById('clear-btn');

            form.addEventListener('submit', function (event) {
                event.preventDefault();
                const todoText = todoInput.value;

                if (todoText) {
                    const todoItem = document.createElement('li');
                    todoItem.classList.add('list-group-item');
                    todoItem.textContent = todoText;
                    todoList.appendChild(todoItem);
                    todoInput.value = '';
                    saveTodos();
                }
            });

            clearButton.addEventListener('click', function () {
                todoList.innerHTML = '';
                saveTodos();
            });

            function loadTodos() {
                const todos = localStorage.getItem('todos');

                if (todos) {
                    todoList.innerHTML = todos;
                }
            }

            function saveTodos() {
                localStorage.setItem('todos', todoList.innerHTML);
            }

            loadTodos();
        });
    </script>

Implementación de la lógica en JavaScript

  • Añadimos un evento de escucha (addEventListener) al formulario (form) que se activa cuando se envía (submit) el formulario.
  • Dentro de la función del evento, prevenimos el comportamiento predeterminado del formulario utilizando event.preventDefault().
  • Obtenemos el valor del campo de entrada de la tarea (todoInput.value).
  • Creamos un nuevo elemento de lista (<li>) y le asignamos el valor de la tarea ingresada.
  • Agregamos la tarea a la lista de tareas (todoList.appendChild(todoItem)).
  • Limpiamos el campo de entrada (todoInput.value = '') para que esté vacío para ingresar una nueva tarea.
  • Llamamos a la función saveTodos() para guardar las tareas en el almacenamiento local.

Carga y guardado de tareas en el almacenamiento local

  • Definimos dos funciones: loadTodos() y saveTodos().
  • La función loadTodos() obtiene las tareas almacenadas en el almacenamiento local y las carga en la lista de tareas (todoList.innerHTML = todos).
  • La función saveTodos() guarda las tareas en el almacenamiento local utilizando localStorage.setItem('todos', todoList.innerHTML).

Carga inicial de las tareas al cargar la página

  • Utilizamos document.addEventListener('DOMContentLoaded', loadTodos) para llamar a la función loadTodos() cuando el documento HTML haya sido completamente cargado.
  • De esta manera, al cargar la página, se cargarán automáticamente las tareas previamente guardadas en el almacenamiento local.

Botón para limpiar la lista de tareas

  • Agregamos un botón adicional en el HTML con el ID clear-btn.
  • Añadimos un evento de escucha (addEventListener) al botón clear-btn que se activa cuando se hace clic en él.
  • Dentro de la función del evento, borramos el contenido de la lista de tareas (todoList.innerHTML = '').
  • Llamamos a la función saveTodos() para guardar los cambios en el almacenamiento local.

¡Y eso es todo! Siguiendo estos pasos, puedes crear una aplicación de lista de tareas funcional utilizando HTML, Bootstrap, CSS, JavaScript y localStorage. Más adelante iré añadiendo nueva funcionalidad.

No dudes en dejar tu comentario y tu like si te ha gustado!

Añadir Google Adsense de forma manual en WordPress

Añadir Google Adsense de forma manual en WordPress

Tiempo de lectura: < 1 minuto Hola, hoy vamos a aprender cómo podemos añadir Google Adsense de forma manual en WordPress. Lo primero que tenemos que hacer es conseguir el código de Google Adsense y copiarlo. Una vez copiado, vamos al editor de temas y buscamos functions.php. Ahora creamos la siguiente función: Dónde pone NUESTRO_CODIGO_GOOGLE_ADSENSE tenemos que añadir el código proporcionado … Leer más

Enviar Meta Keywords y Description con WordPress API y utilizarlas en cualquier tema

Enviar Meta Keywords y Description con WordPress API y utilizarlas en cualquier tema

Tiempo de lectura: 2 minutos Hola, hoy vamos a ver cómo podemos enviar meta keywords y description con WordPress API y utilizarlas en cualquier tema que tengamos instalado. Lo primero que tenemos que hacer es enviar los Meta Keywords, para ello utilizando Python os pongo un ejemplo de cómo enviarlo usando la API de WordPress: Donde Son las variables de … Leer más

Instalar Flutter en Mac

Instalar Flutter en Mac

Tiempo de lectura: 2 minutos Hola, hoy vamos a aprender cómo podemos instalar Flutter en Mac. Primero abrimos un terminal y creamos una carpeta nueva para instalar flutter Ahora descargamos usando git el repositorio de flutter Y creamos la variable de flutter, para ello hacemos pwd para ver el directorio actual En <user> aparece nuestro usuario de sistema. Ahora creamos … Leer más

Añadir una llamada POST en Flutter (dart)

Añadir una llamada POST en Flutter (dart)

Tiempo de lectura: 2 minutos Hola, hoy vamos a aprender cómo podemos realizar una llamada POST con Flutter usando Dart. Con esta llamada podremos realizar llamadas remotas a nuestros recursos del servidor Back usando un api REST. Utilizaremos el paquete http para realizar la llamada de red. Paso 1: Agregar dependencias En el archivo pubspec.yaml, asegúrate de tener la siguiente … Leer más

Construyendo un diseño responsive con Bootstrap Grid: Descubre cómo adaptar tus diseños a diferentes tamaños de pantalla utilizando las clases del sistema de grid de Bootstrap.

Construyendo un diseño responsive con Bootstrap Grid: Descubre cómo adaptar tus diseños a diferentes tamaños de pantalla utilizando las clases del sistema de grid de Bootstrap.

Tiempo de lectura: 3 minutos Buenos días, en el tutorial de hoy, os voy a hablar sobre la estructura GRID de BOOTSTRAP. El sistema de grid de Bootstrap es una de las características más destacadas y útiles de este framework CSS. Proporciona una estructura de filas y columnas que permite crear diseños flexibles y responsivos de manera sencilla. El sistema … Leer más

Flutter en contenedor Docker Compose para ejecutar en navegador web

Flutter en contenedor Docker Compose para ejecutar en navegador web

Tiempo de lectura: < 1 minuto Hola, hoy vamos a ver cómo podemos utilizar un Docker Compose para ejecutar Flutter en el navegador web de la máquina anfitriona dónde se ejecuta Docker. Lo primero que vamos a hacer es crear el archivo docker-compose.yml y añadir este contenido: En ./ruta_app está la APP en Flutter o directorio de APP. El archivo flutter_arm … Leer más

Botón slider o deslizante en HTML, CSS y JavaScript

Botón slider o deslizante en HTML, CSS y JavaScript

Tiempo de lectura: 2 minutos A continuación muestro un ejemplo de como hacer un botón deslizante o slider usando HTML, CSS y JavaScript sencillo. Este código muestra un ejemplo de cómo crear un botón deslizante o slider utilizando HTML, CSS y JavaScript. El objetivo es cambiar el estado del botón al hacer clic en él. El código comienza definiendo los … Leer más