Cómo Generar Dinámicamente Opciones para un Select desde Datos JSON en JavaScript

Cómo Generar Dinámicamente Opciones para un Select desde Datos JSON en JavaScript

Tiempo de lectura: 2 minutos En este ejemplo vamos a ver cómo generar dinámicamente opciones para un elemento select en HTML utilizando datos JSON y JavaScript. Primero muestro el array de elementos que vamos a usar de ejemplo: Después, crearemos una función llamada crearSelect que tomará los datos del JSON y generará las opciones para un elemento select en HTML … Leer más

Estructura AJAX con JQuery en JavaScript para realizar una llamada GET

Estructura AJAX con JQuery en JavaScript para realizar una llamada GET

Tiempo de lectura: 2 minutos En este ejemplo voy a mostrar una estructura básica para realizar una solicitud AJAX tipo GET con jQuery en JavaScript. Primero, definimos los parámetros de la solicitud AJAX. Aquí, establecemos la URL a la que enviaremos la solicitud, el tipo de solicitud que será GET y el tipo de datos esperados en la respuesta (en … Leer más

Estructura AJAX con JQuery en JavaScript para realizar una llamada POST

Estructura AJAX con JQuery en JavaScript para realizar una llamada POST

Tiempo de lectura: 2 minutos En este ejemplo voy a mostrar una estructura básica para realizar una solicitud AJAX tipo POST con jQuery en JavaScript. Primero, definimos los parámetros de la solicitud AJAX. Aquí, establecemos la URL a la que enviaremos la solicitud, el tipo de solicitud que será POST y el tipo de datos (en este caso, JSON). Después … Leer más

Crear un carrusel de artículos usando HTML + CSS y Javascript

Crear un carrusel de artículos usando HTML + CSS y Javascript

Tiempo de lectura: 2 minutos En este tutorial, te guiaré a través de los pasos para crear un carrusel de artículos utilizando HTML, CSS y JavaScript. Paso 1: Estructura HTML Comenzaremos creando la estructura básica del carrusel en el archivo HTML. Aquí tienes un ejemplo simple de cómo podría verse: Paso 2: Estilos CSS Ahora, crearemos los estilos CSS para … Leer más

Cómo crear un acordeón accesible con Bootstrap

Cómo crear un acordeón accesible con Bootstrap

Tiempo de lectura: 3 minutos ¡Buenos dias! Os dejo un nuevo tutorial, para que empecéis el finde con ganas. En el tutorial de hoy os voy a mostrar como hacer, un un acordeón con Bootstrap, pero vamos a añadir una serie de atributos que además, hacen que este sea accesible para todos. Espero que os guste, comenzamos: Paso 1: Configuración … Leer más

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

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!

TABLAS HTML + JavaScript

TABLAS HTML + JavaScript

Tiempo de lectura: 2 minutos Para crear una tabla de un array de objetos sencilla, hay que seguir los siguientes pasos como muestro a continuación: Primero creamos el fichero con extensión .html, dónde vamos a crear un div asociando un id dónde se va a mostrar la tabla con los datos de los elementos. El id de la tabla dentro … Leer más

LISTAS HTML + JavaScript

LISTAS HTML + JavaScript

Tiempo de lectura: 2 minutos Para crear una lista de un array de objetos sencilla, hay que seguir los siguientes pasos como muestro a continuación: Primero creamos el fichero con extensión .html, dónde vamos a crear un div asociando un id dónde se va a mostrar la lista de elementos. El id de la lista, en este caso se llamará … Leer más

Crear un modal con Boostrap

Crear un modal con Boostrap

Tiempo de lectura: 2 minutos Para crear un modal con Bootstrap y HTML, sigue estos pasos: Agrega el código HTML para tu modal en cualquier lugar dentro del cuerpo de tu página. El código HTML debe incluir un contenedor para el contenido del modal, un botón o enlace para abrir el modal y un botón para cerrarlo. Incluye la librería … Leer más