Scribd
Upload
3 views4 pages

ws3f

Uploaded by

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

ws3f

Uploaded by

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

Worksheet 3: To-Do List

Application
Objective
Build a to-do list where users can add and remove tasks.

Code to Type
index.html

<!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="todo-container">
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Ente
r a new task">
<button id="addTask">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>

styles.css

body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}

Worksheet 3: To-Do List Application 1


.todo-container {
background-color: #fff;
padding: 30px;
margin: 50px auto;
width: 400px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

#taskInput {
width: 70%;
padding: 10px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 5px;
}

#addTask {
padding: 10px 20px;
font-size: 1em;
border: none;
background-color: #28a745;
color: white;
border-radius: 5px;
cursor: pointer;
}

#addTask:hover {
background-color: #218838;
}

#taskList {
list-style: none;
padding: 0;
margin-top: 20px;
}

Worksheet 3: To-Do List Application 2


#taskList li {
padding: 10px;
background-color: #f8f8f8;
margin-bottom: 10px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}

.delete-btn {
background-color: #dc3545;
border: none;
color: white;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}

.delete-btn:hover {
background-color: #c82333;
}

script.js

const addTaskButton = document.getElementById('addTask');


const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

addTaskButton.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText === '') return;
const li = document.createElement('li');
li.textContent = taskText;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.classList.add('delete-btn');
deleteBtn.addEventListener('click', () => {

Worksheet 3: To-Do List Application 3


taskList.removeChild(li);
});
li.appendChild(deleteBtn);
taskList.appendChild(li);
taskInput.value = '';
});

Key Points
Manipulates the DOM to add and remove list items.

Utilizes event listeners for button interactions.

Employs CSS Flexbox for aligning task items and delete buttons.

Worksheet 3: To-Do List Application 4

You might also like