Scribd
Upload
5 views2 pages

To-Do List App in JavaScript

This document describes a simple To-Do List web app built with HTML and JavaScript, allowing users to add and remove tasks while persisting them in local storage. It includes source code and explains the functionality of the app, such as DOM manipulation and event handling. Users can run the app by saving the code as 'todo.html' and opening it in a modern web browser.

Uploaded by

zacklygammer567
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views2 pages

To-Do List App in JavaScript

This document describes a simple To-Do List web app built with HTML and JavaScript, allowing users to add and remove tasks while persisting them in local storage. It includes source code and explains the functionality of the app, such as DOM manipulation and event handling. Users can run the app by saving the code as 'todo.html' and opening it in a modern web browser.

Uploaded by

zacklygammer567
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

To-Do List App in JavaScript

Introduction
This simple web app allows users to add, remove, and persist tasks in their browser using
local storage.

Source Code
<!DOCTYPE html>
<html>
<head><title>To-Do List</title></head>
<body>
<h2>To-Do List</h2>
<input type="text" id="task" placeholder="Add task">
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul>
<script>
function addTask() {
let task = document.getElementById("task").value;
if (task) {
let list = document.getElementById("taskList");
let item = document.createElement("li");
item.textContent = task;
item.onclick = () => {
list.removeChild(item);
saveTasks();
};
list.appendChild(item);
document.getElementById("task").value = "";
saveTasks();
}
}

function saveTasks() {
localStorage.setItem("tasks", document.getElementById("taskList").innerHTML);
}

function loadTasks() {
document.getElementById("taskList").innerHTML = localStorage.getItem("tasks");
}
loadTasks();
</script>
</body>
</html>

Explanation
This HTML+JavaScript project creates a to-do list with add/remove features. Tasks persist
across sessions via local storage, showcasing DOM manipulation and client-side storage.

Sample Output
A web interface where tasks appear as list items. Clicking on a task removes it.

Conclusion
This app demonstrates fundamental concepts of JavaScript like DOM access, event handling,
and persistence using localStorage.

How to Run
Save the file as `todo.html` and open it in any modern web browser.

You might also like