MAJOR PROJECT
PROJECT
REPORT
2023
To-Do List
Webpage
using
HTML
K.Pavan Prathik
pavanprathik18@gmail.com
+91 8688652723
TABLE OF CONTENTS
S no.
Contents
Page No.
1.
Abstract
2
2.
Objective
3
3.
Introduction
4
4.
Methodology
5
5.
Code
7
6.
Conclusion
17
1|Page
ABSTRACT
The To-Do List Webpage project aims to develop a user-friendly and efficient web
application for managing tasks and organizing daily activities. This project report
presents the design, implementation, and evaluation of the To-Do List Webpage. The
objective is to create a practical and intuitive tool that helps individuals stay organized
and increase their productivity. The project utilizes HTML, CSS, and JavaScript to
provide a responsive and interactive user interface. The methodology includes
designing the webpage layout, implementing the required functionalities, and
conducting user testing for feedback and improvements. The project concludes with the
successful development of the To-Do List Webpage, which serves as an effective tool
for managing tasks and improving time management skills.
The project is designed to address the challenges faced by individuals in managing their
tasks effectively. With increasing workloads and busy schedules, it becomes crucial to
have a reliable system for organizing and prioritizing tasks. This project aims to provide
a solution that is accessible, intuitive, and user-friendly.
The development of the To-Do List Webpage involves utilizing HTML, CSS, and
JavaScript to create a visually appealing and interactive interface. The webpage layout
is designed to be responsive, allowing users to access and manage their tasks seamlessly
across different devices. CSS is used to style the webpage and ensure a visually
consistent and appealing design.
Future enhancements to the To-Do List Webpage may include additional features such
as task categorization, integration with calendar applications, and collaboration
capabilities to further enhance its usefulness. Overall, the project demonstrates the
effectiveness of HTML, CSS, and JavaScript in developing functional and user-friendly
web applications for task management.
2|Page
OBJECTIVE
The objective of the To-Do List Webpage project is to create a user-friendly and
efficient web application that allows individuals to manage their tasks effectively and
increase their productivity. The primary goal is to design and develop a practical tool
that helps users organize their daily activities, prioritize tasks, and track their progress.
1. Task Management: The project aims to provide a platform where users can easily
create, edit, and delete tasks. The objective is to enable users to input task details such
as task name, description, due date, and priority level. By providing a user-friendly
interface, users can effortlessly add and manage their tasks, ensuring nothing is
overlooked or forgotten.
2. Organization and Prioritization: The To-Do List Webpage intends to help
individuals organize their tasks efficiently. Users will have the ability to categorize tasks
based on different criteria, such as work, personal, or project-specific. Additionally, the
project aims to provide options to set task priorities, enabling users to focus on highpriority tasks and allocate their time effectively.
3. Task Tracking and Progress Monitoring : The project seeks to incorporate
features that allow users to track the progress of their tasks. This includes marking tasks
as completed, tracking the time spent on each task, and providing visual indicators of
task status. By having a clear overview of tasks and their progress, users can better
manage their time, identify bottlenecks, and stay motivated.
4. Reminder and Notification System: The To-Do List Webpage aims to
implement a reminder and notification system to help users stay on top of their tasks.
Users will receive notifications for approaching deadlines, ensuring important tasks are
not overlooked. By incorporating this feature, the project aims to improve time
management and reduce the likelihood of missed deadlines or delayed tasks.
5. User-Friendly Interface: The project objective is to create a user-friendly and
intuitive interface that requires minimal learning curve. The webpage should be
accessible and easy to navigate for users of all technical backgrounds. The objective is
to provide a visually appealing design, clear task visualization, and smooth interactions,
resulting in an enjoyable and efficient user experience.
6. Evaluation and User Feedback: The project aims to gather user feedback
through user testing and evaluation. The objective is to assess the usability and
effectiveness of the To-Do List Webpage, identify areas for improvement, and gather
suggestions for future enhancements. User feedback will be invaluable in refining the
application and ensuring it meets the needs and expectations of its intended users.
3|Page
INTRODUCTION
The To-Do List Webpage project aims to develop a user-friendly and efficient web
application for managing tasks and organizing daily activities. In today's fast-paced
world, staying organized and managing tasks effectively has become crucial for
individuals to accomplish their goals and maintain a work-life balance. The To-Do List
Webpage project addresses this need by providing a practical tool that helps users stay
organized, prioritize tasks, and improve their productivity.
The project focuses on designing and implementing a responsive and intuitive user
interface that allows users to easily create, organize, and track their to-do lists. The
webpage provides a clear overview of the tasks, enabling users to manage their
workload effectively and stay on top of their responsibilities.
The To-Do List Webpage utilizes HTML, CSS, and JavaScript to create a seamless user
experience. HTML is used to structure the webpage and define the layout, CSS is
employed to enhance the visual appeal and styling of the webpage, and JavaScript is
utilized to add interactivity and dynamic functionality. The webpage design prioritizes
simplicity and ease of use to ensure that users can navigate and interact with the
application effortlessly. Responsive design principles are applied to ensure that the
webpage is optimized for viewing on various devices, including desktops, laptops,
tablets, and smartphones.
The functionalities of the To-Do List Webpage include adding new tasks, setting
deadlines, marking tasks as complete, and updating task details as needed. The project
team aims to develop a tool that allows users to efficiently manage their tasks and
improve their time management skills. The webpage also provides reminders and
notifications for upcoming tasks, helping users stay on track and meet deadlines.
In addition to designing and implementing the webpage, the project includes a user
testing phase to gather feedback and evaluate the usability of the application. By
collecting user feedback, the project team can identify any usability issues, make
necessary improvements, and enhance the overall user experience.
Overall, the To-Do List Webpage project endeavors to provide individuals with a
practical and intuitive tool for managing their tasks effectively. By utilizing this web
application, users can enhance their productivity, reduce stress, and achieve a better
work-life balance. The project's objectives align with the growing need for efficient task
management solutions in today's fast-paced and demanding world.
4|Page
METHODOLOGY
The development of the To-Do List Webpage involves several steps. The first step is
to design the webpage layout using HTML and CSS. The design focuses on simplicity
and intuitive navigation, ensuring that users can easily understand and interact with
the application. Responsive design principles are applied to ensure optimal viewing
experience across different devices.
1. Requirement Analysis: The first step in the methodology is to analyze the
requirements of the To-Do List Webpage project. This involves understanding the
purpose, functionality, and features required for the webpage. Gathering requirements
helps in defining the scope and objectives of the project.
2. Designing the Webpage Layout: Once the requirements are gathered, the
next step is to design the webpage layout using HTML and CSS. This includes
creating the structure of the webpage, organizing elements such as headers, lists, and
buttons, and applying styles to make the webpage visually appealing and userfriendly.
3. Implementing Task Management Functionalities: After designing the
webpage layout, the focus shifts to implementing the necessary functionalities for task
management. This involves using JavaScript to add interactivity to the webpage. The
functionalities include adding tasks, updating task details, setting deadlines, marking
tasks as complete, and prioritizing tasks.
4. User Interface Enhancement: To enhance the user interface, the webpage is
made responsive using responsive design techniques. This ensures that the webpage
adapts to different screen sizes and provides an optimal viewing experience on various
devices, including desktops, tablets, and mobile phones.
5. Testing and Debugging: Once the initial implementation is complete,
thorough testing is performed to identify any bugs or issues. This includes testing the
webpage on different browsers and devices to ensure cross-compatibility. Any errors
or inconsistencies are debugged and fixed to ensure a smooth user experience.
6. User Testing and Feedback Collection: User testing is conducted to gather
feedback on the usability and functionality of the To-Do List Webpage. A group of
participants is invited to use the webpage and perform various tasks. Their interactions
and feedback are observed and recorded. This helps in identifying any usability issues
and collecting suggestions for improvements.
5|Page
7. Feedback Analysis and Iterative Refinement: The feedback collected
from user testing is analyzed to identify areas of improvement. Based on the feedback,
iterative refinements are made to enhance the user interface, improve the
functionality, and address any usability concerns. This step ensures that the To-Do
List Webpage meets the users' expectations and provides a seamless user experience.
8. Finalization and Deployment: After incorporating the necessary refinements,
the To-Do List Webpage is finalized. The webpage is thoroughly tested to ensure its
stability and functionality. Once the testing phase is complete, the webpage is
deployed to a web server or hosting platform, making it accessible to users.
9. Documentation and Project Report: Throughout the project, documentation
is maintained to record the design decisions, implementation details, and testing
procedures. Additionally, a project report is prepared, summarizing the project
objectives, methodologies, challenges faced, and the achieved outcomes.
10. Maintenance and Future Enhancements: After deployment, regular
maintenance is carried out to address any issues that arise and to incorporate any
necessary updates. Future enhancements can also be considered based on user
feedback and emerging technologies, ensuring the To-Do List Webpage remains
relevant and effective.
6|Page
CODE
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initialscale=1" />
<title>HTML To-Do List|Major project</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<title>TODO List</title>
<script async defer src="app.js"></script>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img
src="https://w7.pngwing.com/pngs/268/27/png-transparentaction-item-computer-icons-task-others-miscellaneous-angle-textthumbnail.png"
class="img-fluid"
alt="logo"
width="50"
7|Page
/>
<div class="container-fluid">
<a class="navbar-brand" href="#">TODO LIST</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Items
</a>
<ul class="dropdown-menu" arialabelledby="navbarDropdown">
8|Page
<li><a class="dropdown-item"
href="#">Tasks</a></li>
<hr class="dropdown-divider" />
<li><a class="dropdown-item" href="#">Completed
Tasks</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a class="dropdown-item" href="#">Something
else here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a
class="nav-link avtive"
href="#"
id="navbarDropdown"
role="button"
aria-disabled="true"
>Contact Us
</a>
<ul class="dropdown-menu" arialabelledby="navbarDropdown">
<li>
<a class="dropdown-ContactUs" href="#"
>Email Id: pavanprathik18@gmail.com</a
>
</li>
<li>
<a class="dropdown-ContactUs" href="#">Ph no.
8688652723</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
</ul>
9|Page
</li>
</ul>
<form class="d-flex">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success"
type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
<div class="container my-4">
<h1 class="text-center"><span class="title2">TODO
</span>List</h1>
<div class="form-group">
<label for="title" class="title-t">Title</label>
<input
type="text"
class="form-control"
id="title"
aria-describedby="emailHelp"
placeholder="Enter your task"
/>
<small id="emailHelp" class="form-text text-muted"
>Add an task to the list</small
>
</div>
<div class="form-group">
<label for="Description" class="titlet">Description</label>
10 | P a g e
<textarea class="form-control" id="description"
rows="3"></textarea>
</div>
<button id="add" class="btn btn-primary">Add task</button>
<button id="clear" class="btn btn-primary"
onclick="clearStroage()">
Clear list
</button>
<div id="items" class="my-6">
<h2>Your Items</h2>
<table class="table">
<thead class="text-center">
<tr class="title-t">
<th scope="col">SNo.</th>
<th scope="col">Task Title</th>
<th scope="col">Task Description</th>
<th scope="col">Action</th>
<th scope="col">Responsible</th>
<th scope="col">ETA</th>
</tr>
</thead>
<tbody id="tableBody" class="title-t">
<tr>
<th scope="row">1</th>
<td>Get some Coffee</td>
<td>You need coffee as you are a coder</td>
<td>
<div
class="btn-group"
role="group "
aria-label="Basic example "
>
<button type="button " class="btn btnsecondary">Edit</button>
<button type=" button " class="btn btnsecondary">
11 | P a g e
Remove
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0beta3/dist/js/bootstrap.bundle.min.js "
integrity="sha384JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf
"
crossorigin="anonymous "
></script>
</body>
</html>
CSS code:
.title2 {
color: lime;
text-transform: uppercase;
font-weight: 800;
}
h1 {
color: rgb(228, 66, 66);
font-size: 3rem;
font-weight: 50;
text-align: center;
margin: 1rem 0 3rem;
font-family: "Hind", sans-serif;
}
* {
12 | P a g e
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100%;
background-color: #111;
box-sizing: border-box;
}
.title-t {
color: rgb(255, 255, 255);
font-size: 2rem;
font-weight: 50;
text-align: center;
font-family: "Hind", sans-serif;
}
#items {
color: #fff;
font-size: 2rem;
font-weight: 50;
font-family: "Hind", sans-serif;
}
Javascript code:
function getAndUpdate() {
tit = document.getElementById(`title`).value;
desc = document.getElementById(`description`).value;
console.log("updating List...");
if (localStorage.getItem("itemJson") == null) {
itemJsonArray = [];
itemJsonArray.push([tit, desc]);
13 | P a g e
localStorage.setItem("itemJson",
JSON.stringify(itemJsonArray));
} else {
itemJsonArrayStr = localStorage.getItem("itemJson");
itemJsonArray = JSON.parse(itemJsonArrayStr);
itemJsonArray.push([tit, desc]);
localStorage.setItem("itemJson",
JSON.stringify(itemJsonArray));
}
update();
}
function update() {
if (localStorage.getItem("itemJson") == null) {
itemJsonArray = [];
localStorage.setItem("itemJson",
JSON.stringify(itemJsonArray));
} else {
itemJsonArrayStr = localStorage.getItem("itemJson");
itemJsonArray = JSON.parse(itemJsonArrayStr);
}
//populate the table
let tableBody = document.getElementById("tableBody");
let str = "";
itemJsonArray.forEach((element, index) => {
str += `<tr>
<th scope="row">${index + 1}</th>
<td>${element[0]}</td>
<td>${element[1]}</td>
<td>
<div class="btn-group" role="group" aria-label="Basic
example">
<button type="button" class="btn btnsecondary"onclick="newUpdate(${index})">Edit</button>
14 | P a g e
<button type="button" class="btn btnsecondary"onclick="deleted(${index})">Remove</button>
</div>
</td>
</tr>`;
});
tableBody.innerHTML = str;
}
add = document.getElementById("add");
add.addEventListener("click", getAndUpdate);
update();
function deleted(itemIndex) {
console.log("Delete", itemIndex);
itemJsonArrayStr = localStorage.getItem("itemJson");
itemJsonArray = JSON.parse(itemJsonArrayStr);
//Delete
itemIndex element from the array
itemJsonArray.splice(itemIndex, 1);
localStorage.setItem("itemJson",
JSON.stringify(itemJsonArray));
update();
}
function clearStroage() {
if (confirm("Do You Really Want to Clear the List?")) {
console.log("Clearing the storage");
localStorage.clear();
update();
}
}
15 | P a g e
Screenshot:
16 | P a g e
CONCLUSION
The To-Do List Webpage project has successfully achieved its goal of developing a
practical and user-friendly web application for task management and organization.
The project utilized HTML, CSS, and JavaScript to create a responsive and intuitive
user interface, allowing users to efficiently manage their tasks and improve their
productivity.
Throughout the project, several key milestones were accomplished. The webpage
layout was designed with simplicity and usability in mind, ensuring that users can
easily navigate and interact with the application. The implemented functionalities,
such as adding tasks, setting deadlines, and marking tasks as complete, provide users
with a comprehensive toolset to manage their to-do lists effectively. User testing and
feedback collection played a crucial role in refining the To-Do List Webpage. By
involving a group of participants, valuable insights were gained regarding usability,
functionality, and overall user experience. The feedback collected helped identify
areas for improvement and allowed the project team to make necessary adjustments to
enhance the application further. The To-Do List Webpage project has proven to be a
valuable tool for individuals seeking to enhance their productivity and time
management skills. By utilizing this web application, users can stay organized,
prioritize tasks, and track their progress more effectively. This, in turn, leads to
improved efficiency and a greater ability to accomplish goals and meet deadlines.
One of the strengths of the To-Do List Webpage is its simplicity. The user interface is
designed to be clean and uncluttered, ensuring that users can focus on their tasks
without any distractions. The intuitive nature of the application allows users to quickly
grasp its functionalities and start utilizing it right away. However, there are
opportunities for further development and enhancements in the future. Additional
features could be introduced, such as task categorization, reminders, and collaboration
capabilities. Integration with other productivity tools or platforms could also be
explored to provide a seamless experience for users.
In conclusion, the To-Do List Webpage project has successfully addressed the need
for a practical and efficient task management tool. The project's implementation of a
responsive user interface, comprehensive functionalities, and user-centered design has
resulted in an effective solution for individuals seeking to improve their task
organization and productivity. With further refinements and additions, the To-Do List
Webpage has the potential to become an essential tool for individuals in various
personal and professional settings, helping them stay organized and accomplish their
goals effectively.
17 | P a g e