Al pasar el puntero del ratón por encima de un elemento cambiar su color de fondo – Hover

Tiempo de lectura: < 1 minuto Voy a mostrar un ejemplo sencillo con el evento «hover» en un elemento. Es un contenedor rectangular que actúa como un elemento interactivo. Cuando se realiza el evento de «hover» (puntero del mouse pasa por encima), cambia su color de fondo. Además modifico su tamaño o escala. El código HTML es el siguiente: Para dar … Leer más

Indicar ruta de SDK en un proyecto Android (también React Native o expo)

Indicar ruta de SDK en un proyecto Android (también React Native o expo)

Tiempo de lectura: < 1 minuto Hola, hoy vamos a ver cómo indicar el SDK en un proyecto de Android o React Native. En el caso de React Native, vamos a la carpeta Android (en el caso de una APP nativa en Android, vamos al propio proyecto). Y creamos un archivo llamado local.properties y añadimos: Dónde pone usuario, indica tu usuario. … Leer más

Solucionar error (node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2232:9) en React Native y Expo build

Solucionar error (node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2232:9) en React Native y Expo build

Tiempo de lectura: 2 minutos Hola, hoy vamos a solucionar el problema que aparece con la última versión de iOS y la librería de React Native menor a 68. El error que aparece es el siguiente: Para solucionarlo, vamos a fixear el error y parchearlo con Patch-Package. Primero vamos a instalar Patch-Package: Añadimos –save-dev para indicar que solo se quiere … Leer más

Ejecutar plataforma o aplicación Flutter usando comandos por consola

Ejecutar plataforma o aplicación Flutter usando comandos por consola

Tiempo de lectura: < 1 minuto Para ejecutar una aplicación Flutter en la web, puedes seguir los siguientes pasos. Primero abre una terminal o línea de comandos en el directorio raíz de tu proyecto Flutter. Después ejecuta el siguiente comando para habilitar la funcionalidad de Flutter para la web: A continuación, ejecuta el siguiente comando para iniciar tu aplicación Flutter en … 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

Componente de acordeón utilizando HTML, CSS y JavaScript

Componente de acordeón utilizando HTML, CSS y JavaScript

Tiempo de lectura: 2 minutos En el ejemplo muestro un componente de acordeón utilizando HTML, CSS y JavaScript. El acordeón tiene tres secciones. Cada sección tiene un título que se puede hacer clic para mostrar u ocultar el contenido correspondiente. El código del ejemplo es el siguiente Por último, muestro el resultado. María www.linkedin.com/in/maria-gonzalez-aragon/

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!