ABSTRACT
This To-Do List
application helps
users manage
tasks efficiently by
adding,
organizing, and
tracking them with
ease. It simplifies
daily planning and
boosts
productivity.
Ashutosh Mishra
To-Do List App
Project
To-Do List App
To-Do List App.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>To-Do List App</title>
<link rel="stylesheet" href="To-Do List App.css">
</head>
<body>
<div class="container">
<header>
<h1>Performance Tracking</h1>
<h2 style="text-align: center;"> To Do List</h2>
</header>
<div class="task-input-section">
<input type="text" id="task-input" placeholder="Enter your task">
<input type="date" id="date-input">
<select id="priority-select">
<option value="high">High Priority</option>
<option value="medium">Medium Priority</option>
</select>
<button id="add-task">Add Task</button>
</div>
<main>
<div class="task-list" id="high-priority-tasks">
<h2>High Priority</h2>
<ul></ul>
</div>
<div class="task-list" id="medium-priority-tasks">
<h2>Medium Priority</h2>
<ul></ul>
</div>
</main>
</div>
<script src="To-Do List App.js"></script>
</body>
</html>
To-Do List
App.css
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f9fafb;
color: #333;
.container {
width: 90%;
max-width: 1200px;
margin: auto;
padding: 20px;
header h1 {
text-align: center;
font-size: 2em;
color: #2c3e50;
.task-input-section {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
gap: 10px;
.task-input-section input,
.task-input-section select,
.task-input-section button {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
.task-input-section button {
background-color: #3498db;
color: white;
cursor: pointer;
.task-input-section button:hover {
background-color: #2980b9;
.task-list {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
.task-list h2 {
margin-top: 0;
font-size: 1.5em;
.task-list ul {
list-style-type: none;
padding: 0;
.task-list li {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f4f4f9;
padding: 10px;
margin-bottom: 5px;
border-radius: 5px;
.task-list li.completed {
text-decoration: line-through;
color: #7f8c8d;
.task-actions button {
margin-left: 5px;
padding: 5px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
button.complete {
background-color: #2ecc71;
color: white;
button.edit {
background-color: #e67e22;
color: white;
}
button.delete {
background-color: #e74c3c;
color: white;
button:hover {
opacity: 0.9;
To-Do List App.js
const taskInput = document.getElementById('task-input');
const dateInput = document.getElementById('date-input');
const prioritySelect = document.getElementById('priority-select');
const addTaskButton = document.getElementById('add-task');
const highPriorityTasks = document.querySelector('#high-priority-tasks
ul');
const mediumPriorityTasks = document.querySelector('#medium-priority-
tasks ul');
addTaskButton.addEventListener('click', addTask);
function addTask() {
const taskText = taskInput.value.trim();
const dueDate = dateInput.value;
const priority = prioritySelect.value;
if (!taskText || !dueDate) {
alert('Please fill out all fields!');
return;
const taskItem = createTaskElement(taskText, dueDate);
if (priority === 'high') {
highPriorityTasks.appendChild(taskItem);
} else {
mediumPriorityTasks.appendChild(taskItem);
saveTasks();
clearInputs();
function createTaskElement(text, date) {
const li = document.createElement('li');
li.innerHTML = `<span>${text} - <em>${date}</em></span>`;
const actions = document.createElement('div');
actions.className = 'task-actions';
const completeButton = createActionButton('✔', toggleComplete,
'complete');
const editButton = createActionButton('✏', editTask, 'edit');
const deleteButton = createActionButton('🗑', deleteTask, 'delete');
actions.appendChild(completeButton);
actions.appendChild(editButton);
actions.appendChild(deleteButton);
li.appendChild(actions);
return li;
function createActionButton(label, handler, className) {
const button = document.createElement('button');
button.textContent = label;
button.className = className;
button.addEventListener('click', handler);
return button;
function toggleComplete(event) {
const taskItem = event.target.parentElement.parentElement;
taskItem.classList.toggle('completed');
saveTasks();
function editTask(event) {
const taskItem = event.target.parentElement.parentElement;
const newText = prompt('Edit task:', taskItem.firstChild.textContent);
if (newText) {
taskItem.firstChild.textContent = newText;
saveTasks();
}
function deleteTask(event) {
const taskItem = event.target.parentElement.parentElement;
taskItem.remove();
saveTasks();
function clearInputs() {
taskInput.value = '';
dateInput.value = '';
function saveTasks() {
const tasks = {
high: [...highPriorityTasks.children].map(extractTaskData),
medium: [...mediumPriorityTasks.children].map(extractTaskData),
};
localStorage.setItem('tasks', JSON.stringify(tasks));
function extractTaskData(li) {
return {
text: li.firstChild.textContent,
completed: li.classList.contains('completed'),
};
function loadTasks() {
const tasks = JSON.parse(localStorage.getItem('tasks')) || { high: [],
medium: [] };
tasks.high.forEach((task) =>
highPriorityTasks.appendChild(createTaskElement(task.text)));
tasks.medium.forEach((task) =>
mediumPriorityTasks.appendChild(createTaskElement(task.text)));
document.addEventListener('DOMContentLoaded', loadTasks);
