Web Engineering (Practical) – Spring 2025 – BE (Computer Systems)
By Dr. Azhar Dilshad
Name of Student: CMS ID: Total Marks: 10
Lab 2: JavaScript & DOM Manipulation – Interactive To-Do List
Objective:
Build a basic interactive To-Do List using Vanilla JavaScript, demonstrating the ability to:
Manipulate the DOM to add, delete, and mark tasks as completed.
Use event listeners for form and button interactions.
Store and retrieve tasks using localStorage.
Materials and Equipment Required:
Text Editor: VS Code / Sublime Text / Atom
Web Browser: Chrome / Firefox
No external frameworks required for this lab
Theory / Background:
DOM (Document Object Model): The DOM allows JavaScript to dynamically interact with
HTML and CSS.
Event Listeners: JavaScript functions that run in response to user actions like button clicks,
form submissions, etc.
localStorage: A web API that stores key-value pairs in the browser for persistent data saving.
Procedure / Step-by-Step Instructions:
Step 1: Create the Basic HTML Structure
Create a file named index.html with the following template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>My To-Do List</h1>
<form id="task-form">
<input type="text" id="task-input" placeholder="Enter new task" required />
<button type="submit">Add Task</button>
</form>
Page 1 of 5
<ul id="task-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Styling with CSS (styles.css)
Create a separate styles.css file:
body {
font-family: Arial, sans-serif;
background-color: #eef;
padding: 20px;
}
.container {
width: 400px;
margin: 0 auto;
}
li.completed {
text-decoration: line-through;
color: gray;
}
button {
margin-left: 10px;
}
Step 3: JavaScript Functionality (script.js)
Create script.js and implement the following:
const form = document.getElementById("task-form");
const input = document.getElementById("task-input");
const list = document.getElementById("task-list");
// Load tasks from localStorage
document.addEventListener("DOMContentLoaded", loadTasks);
// Add task
form.addEventListener("submit", function (e) {
e.preventDefault();
const task = input.value.trim();
if (task !== "") {
addTask(task);
saveTask(task);
input.value = "";
}
});
Page 2 of 5
// Add task to list
function addTask(taskText, completed = false) {
const li = document.createElement("li");
li.textContent = taskText;
if (completed) li.classList.add("completed");
li.addEventListener("click", () => {
li.classList.toggle("completed");
updateStorage();
});
const delBtn = document.createElement("button");
delBtn.textContent = "Delete";
delBtn.addEventListener("click", () => {
li.remove();
updateStorage();
});
li.appendChild(delBtn);
list.appendChild(li);
}
// Save task to localStorage
function saveTask(taskText) {
const tasks = getTasks();
tasks.push({ text: taskText, completed: false });
localStorage.setItem("tasks", JSON.stringify(tasks));
}
// Load saved tasks
function loadTasks() {
const tasks = getTasks();
tasks.forEach(task => addTask(task.text, task.completed));
}
// Update localStorage after any change
function updateStorage() {
const items = list.querySelectorAll("li");
const tasks = [];
items.forEach(li => {
tasks.push({
text: li.firstChild.textContent,
completed: li.classList.contains("completed")
});
});
Page 3 of 5
localStorage.setItem("tasks", JSON.stringify(tasks));
}
function getTasks() {
return JSON.parse(localStorage.getItem("tasks")) || [];
}
Observations and Data Collection:
Verify that tasks are added, deleted, and marked complete visually.
Refresh the page to check whether localStorage persists the tasks.
Observe how events like click and submit are captured.
Analysis and Interpretation:
Explain how DOM is used to dynamically add and modify elements.
Describe the role of localStorage in ensuring persistence across page reloads.
Identify improvements: Edit tasks, reorder items, or apply filters.
Page 4 of 5
Results and Conclusion:
Tasks can be dynamically added, marked complete, and deleted. (Yes/No)
Tasks remain saved even after refreshing the page. (Yes/No)
Event listeners work as expected on all buttons. (Yes/No)
Post-Lab Assessment:
Review Questions:
1. What is the DOM, and how does JavaScript interact with it?
2. How do event listeners help in interactive applications?
3. What are the limitations of using localStorage?
Exercise:
Add a “Clear All” button to remove all tasks at once and update localStorage accordingly. Submit
the updated script.js and a screenshot of your working app.
Grading Rubric:
Criterion Weight
Task addition, deletion, and completion logic 30%
Correct use of DOM & event listeners 25%
Use of localStorage for saving tasks 20%
Code readability and documentation 15%
Completion of post-lab exercise 10%
Add screenshots of outcomes / completed tasks (include screenshots of all outcomes and
completed tasks with titles and necessary information):
Page 5 of 5
