To-Do List Web App

Techverse by Vijay

Projects

To-Do List Web App with HTML, CSS & JavaScript

Create a simple interactive to-do list where users can add, complete, and delete tasks. Tasks are saved using local storage.

Step 1: HTML Structure

<input type="text" id="task">
<button onclick="addTask()">Add</button>
<ul id="tasks"></ul>

Step 2: JavaScript Code

function addTask() {
  let taskInput = document.getElementById("task");
  let task = taskInput.value;
  if(task) {
    let ul = document.getElementById("tasks");
    let li = document.createElement("li");
    li.textContent = task;
    li.onclick = function() { this.remove(); };
    ul.appendChild(li);
    taskInput.value = "";
  }
}

Step 3: Next Steps

• Use localStorage to save tasks
• Add a checkbox for completed tasks
• Style the app with CSS for a better UI

Conclusion

This project is perfect for beginners to learn HTML, CSS, JavaScript, and DOM manipulation.

© 2025 Techverse by Vijay | Web Projects