Aún hay más por aprender

Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

¿Para qué aprender JavaScript?

¿Qué es DOM y Window Object?

Explorando Nodos del DOM

Seleccionando y Accesando a Elementos del DOM

Consultando el DOM con getElementById y querySelector

Navegación efectiva entre nodos

Manipulando Elementos del DOM

Modificando atributos y propiedades

Modificando texto en HTML

Modificando estilos en HTML

Modificando la visibilidad de elementos HTML

Creación de elementos con HTML Strings e insertAdjacentElement()

Agregando elementos con innerHTML e insertAdjacentHTML()

Creación de elementos con createElement()

Remover elementos con remove() y removeChild()

Clonación y reemplazo de elementos con cloneNode y replaceChild

Manipulando Eventos en el DOM

Entendiendo eventos y tipos: Burbuja, Captura y Propagación

Agregar y eliminar escuchadores de eventos o Event Listeners

El objeto evento o eventObject

Manejo de entradas de formulario y validación

Delegación de eventos y prevención de comportamiento predeterminado

Creando un Administrador de Tareas

Añadir tareas desde un formulario

Eliminar y editar tareas del DOM

Almacenamiento y carga de datos en localStorage

Eliminar y editar tareas del almacenamiento local

Inspeccionando y solucionando errores en el código

Personalizando la interfaz del administrador de tareas

Aún hay más por aprender

Asincronía en JavaScript

¿Cómo funciona el JavaScript Engine?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 4

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Calvin Rafael Bobadilla Fernandez

hace 3 días

Excelente curso diego! La explicacion estuvo excelente, y el proyecto final tambien. Antes de concluir, quisiera compartir un proyecto "secreto" que estoy haciendo. Tiene que ver con el to-do pero a una escala mas grande (lo llevo haciendo desde mucho antes del curso, aun falta algunas cosas) El nombre (temporal claro) es un super todo-list, con notas, manejadores de eventos, personalizar tu perfil y todo, pero una imagen vale mas que mil palabras asi que, aca lo enseno! ![](https://static.platzi.com/media/user_upload/image-d2096c10-e973-4df6-b55f-6254cebf4a81.jpg)

jesus manuel vergara

hace 8 días

Buen curso, muy claro el profe en todo. Hay un solo punto, el orden del repo..... 9/10

Tomas Arriola

hace un mes

El curso está excelente, solo falta ordenar un poco el repositorio y aclarar algunos fragmentos de código. Les comparto una alternativa más que me parecio más sencilla: actualizo `localStorage` con la nueva tarea y luego renderizo la lista completa, asegurando que el almacenamiento y la interfaz estén sincronizados. En contraste, el enfoque del profesor renderiza la tarea primero y luego actualiza `localStorage`, lo que puede ser más propenso a inconsistencias y generar más código. ```js const taskForm = document.getElementById("task-form"); const taskList = document.getElementById("task-list"); const taskInput = document.getElementById("task-input"); let tasks = JSON.parse(localStorage.getItem("tasks")) || []; const toggleThemeBtn = document.getElementById("toggle-theme-btn"); // Función para renderizar tareas y asignar eventos function renderTasks() { taskList.innerHTML = ''; // Limpiar la lista de tareas tasks.forEach(task => { const li = document.createElement('li'); li.innerHTML = ` ${task} ❌ ✏️ `; taskList.appendChild(li); // Asignar eventos de eliminación li.querySelector('.delete-btn').addEventListener('click', function() { const taskText = li.childNodes[0].textContent.trim(); tasks = tasks.filter(t => t !== taskText); localStorage.setItem('tasks', JSON.stringify(tasks)); renderTasks(); // Re-renderizar la lista actualizada }); // Asignar eventos de edición li.querySelector('.edit-btn').addEventListener('click', function() { const newTask = prompt("Edit your task:", task); if (newTask !== null) { const index = tasks.indexOf(task); tasks[index] = newTask; localStorage.setItem('tasks', JSON.stringify(tasks)); renderTasks(); // Re-renderizar la lista actualizada } }); }); }; window.addEventListener('load', () => { const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark') { document.body.classList.add('dark-theme'); } else { document.body.classList.remove('dark-theme'); } }); // Añade un evento 'click' al botón para alternar la clase 'dark-theme' toggleThemeBtn.addEventListener("click", () => { // Alterna la clase 'dark-theme' en el <body> document.body.classList.toggle("dark-theme"); // Guarda la preferencia del tema en localStorage localStorage.setItem('theme', document.body.classList.contains("dark-theme") ? 'dark' : 'light'); }); // Añade un evento 'submit' al formulario de tareas taskForm.addEventListener("submit", (event) => { event.preventDefault(); // Previene que el formulario se envíe y recargue la página const task = taskInput.value; // Obtiene el valor del input tasks.push(task); // Agrega la nueva tarea a la lista localStorage.setItem('tasks', JSON.stringify(tasks)); // Guarda la lista actualizada en localStorage taskInput.value = ''; // Limpia el input renderTasks(); // Re-renderiza la lista actualizada }); // Inicializar el renderizado de tareas al cargar la página renderTasks(); ```Le doy crédito a ChatGpt por los comentarios en mi código.

Mateo Espinosa Cubillos

hace 2 meses

faltaron algunos fragmentos del curso, pero estuvo bueno, seria bueno que lo completaran bien