JavaScript To-Do List Tutorial – create, display & delete items | Day 8
Welcome to Day 8 of my 30 Days of Coding Challenge!
Today I built a To-Do List App using HTML, CSS, and JavaScript. This project focuses on DOM creation, updating the page dynamically, and removing items when they’re done.
💡 What I did in this video:
Created and appended DOM elements with document.createElement() and appendChild()
Captured input and prevented default form behavior
Added event listeners to create new tasks and delete tasks (using remove() or parentNode.removeChild())
Used simple state (arrays or DOM) to manage the list and keep UX smooth
Small UX polish: clearing input after add, simple CSS for completed items
💻 What I learned:
How to manipulate the DOM in real time
How to add and remove elements dynamically with JavaScript
How to use event listeners for user interactions
🔁 I’m building one project every day — follow along and level up with me!
👉 Subscribe, like, and turn on notifications so you don’t miss Day 9.
#30DaysOfCode #ToDoList #JavaScriptProjects #DOMManipulation #LearnJavaScript #CodingChallenge #OfforCode