A

PROJECT REPORT
ON
To-Do-List Using JavaScript
SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE
AWARD OF
DIPLOMA IN
COMPUTER ENGINEERING

SUBMITTED TO
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,
MUMBAI

SUBMITTED BY
Name of Student Roll Number Enrollment No

1] Tambe Anushka Santosh 02 2209920177

GUIDED BY: Prof. Miss. Gaykar R.H.

SAMARTH POLYTECHNIC, BELHE

1|Page
 CERTIFICATE
This is to certify that the project report entitled “To-Do-List Using
JavaScript” was successfully completed by Student of fifth semester
Diploma in Computer engineering.

Name of Student:
1] Tambe Anushka Santosh

In partial fulfillment of the requirements for the award of the Diploma

in Computer engineering and submitted to the Department of
Computer of Samarth Polytechnic, Belhe work carried out during a
period for the academic year 2024-25 as per curriculum.

Prof. Miss. Gaykar R.H Prof. Nawale S.K Prof. Kapile A.S

(Subject Teacher) (H.O.D) (Principal)

2|Page
 Acknowledgement
This project is done as a semester project, as a part course titled
“To-Do-List Using JavaScript”.

I am really thankful to our course the Principal Prof. Kapile A.S. and
the HOD Prof. Nawale S.K. Samarth Polytechnic, Belhe for his invaluable
guidance and assistance, without which the accomplishment of the task
would have never been possible.
I also thanks Prof. Miss. Gaykar R.H. for giving this opportunity to
explore into the real world and realize the interrelation without which a
Project can never progress. In this present project I have chosen the topic
“To-Do-List Using JavaScript”.
I am also thankful to parents, friend and all staff of Computer
Engineering Department, for providing us relevant information and
necessary clarifications, and great support.

Name of Student:
1] Tambe Anushka Santosh

3|Page
 ANNEXURE II

Evaluation Sheet for Micro

Project Diploma in Computer
Engineering

Academic Year: -2024-25. Name of Faculty: - Prof. Miss. Gaykar R.H.

Course -Computer Engineering Course Code: -22519 Semester: - V

Title of Project: - “To – Do – List Using JavaScript”

CO’s addressed by the Micro Project: -

1.

2.

3.

4.
Major Learning Outcomes achieved by students by doing the project: -

a) Practical Outcomes: - …………………………...………………………………………….

………………………………………………………….………………………….……..……………

b) Unit Out comes in Cognitive domain: -…………….……………………………….……

…………………………………………………...................................................................................
……………………………………………………………..………………………….………………

c) Out comes in Affective Domain: - …………….……………………………...……………

……………………………….…………………………………………………..……………………
…………………………………………………………………………..……..………….…

Comments/suggestions about team work/leadership/inter-personal communication (if any): -

…………………………….…………………………………………………………………………
…………………….…………………………………………………………………………………

Roll Name of Student Marks out of 6 Marks out of 4 for Total Out
No. for performance oral / presentation of 10
in group activity

02 Tambe Anushka Santosh

Prof. Miss. Gaykar R.H.

(Name & Signature of Faculty)

4|Page
 INDEX

Sr. No. Contents Page No.

Micro Project Proposal

1.0 Aim/Benefits of micro project 6

2.0 Course outcomes 6

3.0 Proposed Methodology 6

4.0 Action Plan 7

5.0 Resources used 7

Micro Project Report

1.0 Introduction 8

2.0 The Benefits of using a To – Do – List 8

3.0 Task Management 9

4.0 Project analysis and Designing 9

5.0 Program Code 11

6.0 Output of Code 18

7.0 Algorithm Overview 19

8.0 Flowchart 20

9.0 Skilled Developed 22

10.0 Conclusion and Reference 22

5|Page
 Micro-Project Proposal
On
To – Do – List Using JavaScript

1.0 Aim/Benefits of micro project:

Creating project report for To-Do-List Using JavaScript to ensure that the application works as
intended, meets user expectations, and delivers a positive user experience. Here are some key
aims of test cases specific to Creation of Resume:
1. Improves your memory.
2. Increase productivity.
3. Helps with motivation.
4. Reduced stress.

2.0 Course Outcomes:

1. Create interactive web pages using program flow control structure.
2. Implement Array and Functions in JavaScript.
3. Create Event based web forms using JavaScript.

3.0 Proposed Methodology:

As the name of micro project To-Do-List Using JavaScript, we collected the information
of given topic using sources internet &books. I type the required part A and done proper page
set up and submitted to subject teacher. After the setup Part-A, I prepare a document of the
micro project after finishing all typing, I arrange all the data in proper arrangement. I selected
proper margin, Font, layout etc. at last I got the printouts of the microproject and submitted to
subject teacher.

6|Page
4.0 Action plan

Sr. Detail of activity Plan Plan finish Name of

No. start date responsible
date team
members

1. Searching the topic for micro- 8-9-2024 14-9-2024

project.

2. Research 15-9-2024 21-9-2024

Adding functionality to
prototype.

3. Initiating development 22-10-2024 28-10-2024

Finalizing design Tambe Anushka
Developing prototype. Santosh
4. Coding & Testing of System 29-10-2024 5-11-2024

5. Prepare a report on it using 6-11-2024 12-11-2024

MS word

6. Print micro project 13-11-2024 15-11-2024

7. Report Preparation 16-11-2024 20-11-2014

8. Submission of report 22-11-2024 22-11-2024

5.0 Resources Used:

Sr. Name of resource material Specifications Quantity

no.
1 Computer System 16 GB RAM, Windows 11 1
OS

2 Internet You Tube / Wikipedia 1

3 textbook/manual Client-Side Scripting 1

Language 22519

4 Software Sublime Text, All

Chrome,
Microsoft Word

7|Page
 Micro Project Report
On
To – Do - List Using JavaScript
1.0 Introduction:
• A To - Do List a simple prioritized list of the tasks a person must complete. People make a
list of everything they need to do, ranked according to priority from the most critical task
at the top to the least critical task at the bottom.

• A few of the features of a good To - Do list application include:

➢ Plan and execute simple actions.
➢ Prioritize, manage, and reason about tasks.
➢ Record notes, action items and ideas.

• To - dos are the tasks or the atomic entities that make up a To – Do list. To - Dos are made
quickly, the bulk of them do not specify the work, instead, they are typically just
comprehensive enough to serve as a valuable indicator. To be sure, To - do terminology
like “Groceries" or "Car Wash” is frequently grammatically correct. Because the signal is
so quick, it is only useful for a short period of time while the task is remembered. In certain
cases, a simple item like a stack is enough to recall the job without the need for a note.
• There are clear immediate implications to adding a t To – Do list to a person's productivity
system. The functionalities provided by a good To - Do list application/system help
declutter the user's mind as their pending tasks are recorded safely and they won't be
forgotten.
• The To - Do list project is a user - friendly website which helps them to keep a track of
their tasks. It is a simple site which requires no sign-in/login or any personal details but still
records your task, mark the completed tasks, and stores them even if you visit the site after
a few days.
• Traditionally, they're written on a piece of paper or post it notes and acts as a memory aid.
As technology has evolved, we have been able to create a To – Do lists with excel
spreadsheets, word documents, to-do list apps, Microsoft to do and google to do list to name
a few. You can use to do list in your home and personal life, or in the workplace.

2.0 The Benefits of Using a To – Do List: -

1. Improves your memory: A To - Do list acts as an external memory aid. It's only
possible to hold a few pieces of information at one time. Keep a to - do list and you'll
be able to keep track of everything, rather than just a few of the tasks you need To –
Do. You’re To - Do list will also reinforce the information, which make sit less likely
you're going to get something.

2. Increases productivity: A To - Do list allows you to prioritize the tasks that are
more important. This means you don't waste time on tasks that don't require your
immediate attention.

3. Helps with motivation: To - Do lists a great motivational tool because you can use
them to clarify your goals. You can divide your king-term goal into more achievable
short-term goals and as you tick each one off your list, your confidence will increase.

8|Page
3.0 Task Management: -
• From an articulation standpoint, task management entails more than just organizing
virtual and physical collections and scheduling activities.
• Recent research has begun to address the problem of generic task management in the
context of email. This development is hardly surprising, given that many digital device
users are overloaded by the number of chores done through email. According to this
research, any successful productivity tool must be tightly connected with email
functionalities. Recent researches looked at task management strategies more generally
because email and related technologies are unlikely to be the whole picture.

3.1 To – Do list as a solution to task management: -

• The concept of To – Do list has existed for a very long time and it is one of the primary
methods for management of tasks, use of a To – Dos as a reminder system, To – Dos
as a system for note management, etc. In the simplest and most primitive form, a To-
Do list can be implemented on a pen and paper as a checklist of items which can be
crossed of or ticked against when completed.
• This can be further extended to calendars, by writing tasks against dates where the dates
can also act as deadlines for particular tasks. Other possible extensions of To - Do lists
can be on whiteboards, journals, text editors, etc.
• The functionalities of To – Do lists naturally evolve to perfectly fit web application and
applications on digital devices. Equipped with modern tools and technologies,
engineers can build an application to create a minimal and powerful application that
can help boost productivity without loss of focus and attention.
• With the computing power and persistence of modern devices and databases, losing
track of tasks will not be a problem people will have to face anymore and they can rest
assured, only focused on the tasks they will have to accomplish as with modern
technology and the power of digital devices, integration will be seamless and tasks can
be synced across multiple devices all at once, without any hassle.

3.2 Essential Functionalities: -

• A variety of methods for examining and managing To – Dos that go beyond lists and
mirror the advantages of current resources.
• The inconvenient property, such as when it becomes the default spot for everyday tasks
where reminders can be satisfied.
• Immediately turns on, allowing for quick input and clear view, Convention alto - do
lists are commonly abandoned due to slow, time consuming input and weak output.
• No formal job description, classification, or decomposition is required from users, and
any degree of abstraction for atomic task entries must be permitted.
• A mechanism for dealing with stale, low-priority To – Dos that are becoming less likely
to be performed but have not been explicitly deleted.

4.0 Project analysis & Designing: -

Concept Generation, Evaluation & Selection of Specifications/Features, Design
Constraints-Regulations, Economic, Environmental, Health, manufacturability, Safety,
Professional, Ethical, Social & Political Issues considered in design, Analysis and Feature
finalization subject to constraints, Design Flow (at least 2 alternative designs to make the

9|Page
 project), Best Design selection (supported with comparison and reason) and
Implementation plan ((Flowchart/algorithm/ detailed block diagram)).

4.1 Concept generation: -

In order to do manage tasks, the concept of to-do lists was formulated to provide a the
problem of taking short notes and recording the daily tasks that a person needs to complete.
We external this concept and implement it using modern tools and technologies.

4.2 Evaluation & selection of specifications/ features: -

In order To – Do manage tasks, the concept of To – Do lists was formulated to provide a
simple, Hassie-free solution to the problem of taking short notes and recording the daily
tasks that a person needs to complete. We extend this concept and implement it using
modern tools and technologies.

4.3 Analysis & feature finalization subject to constraints: -

The features of the to-do list applications include:
1. Viewing all the tasks in a user's to-do list
2. Marking a task as completed, changing its priority to 0
3. Tasks are ordered by priority of importance
4. Deletion of tasks
5. Attributing due dates to tasks
6. Tasks are highlighted when they are close to due or overdue
7. Adding tasks to a user's to-do list

4.4 Design Flow: -

4.4.1 Final Design: -

Fig 4.1: - Entity Relationship Diagram (ERD)

10 | P a g e
 Fig 4.2: - Data Flow Diagram (DFD)

5.0 Program code: -

To-do-list.html :-
<!DOCTYPE html>
<html>
<head>

<title>To-do-list</title>

<link rel="stylesheet" href="to-do-list-function.js">

<link href='to-do-list-styles.css' rel='stylesheet'>

<script src="to-do-list-function.js"></script>>

</head>
<body>

<h1 id='myday'>My Day</h1>

<h2 id='date'></h2>
<div id='done'>Done</div>

<div id='addTaskBtn'>

<div id='plus'><i class="gg-add"></i></div>

<div id='txt'>Add a Task</div>
</div>

11 | P a g e
 <input placeholder='Add Task' class='task-input'/>

<div id='pending'></div>

</body>
</html>

To-do-list-function.js :-
<!DOCTYPE html>
<html>
<head>

<title>To-do-list</title>

<link rel="stylesheet" href="to-do-list-function.js">

<link href='to-do-list-styles.css' rel='stylesheet'>

<script src="to-do-list-function.js"></script>>

</head>
<body>

<h1 id='myday'>My Day</h1>

<h2 id='date'></h2>
<div id='done'>Done</div>

<div id='addTaskBtn'>

<div id='plus'><i class="gg-add"></i></div>

<div id='txt'>Add a Task</div>
</div>

<input placeholder='Add Task' class='task-input'/>

<div id='pending'></div>

12 | P a g e
 </body>
</html>

To-do-list-styles.css :-
*{
font-family: -apple-system, BlinkMacSystemFont, sans-serif;

*:not(input){
-webkit-user-select: none;
}

body {
position: relative;
color: #fff;
height: 98vh;
overflow: hidden;
background-image: linear-gradient(to bottom right, #24c6dc, #514a9d);

#myday{
font-size: 2.5rem;
font-weight: 600;
margin: 0;
}

#date{
position: relative;
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 10px;
margin-top: 0;
}

#done{
position: absolute;
top: 0; right: 0;

13 | P a g e
 font-size: 20px;
font-weight: 500;
display: none;

#addTaskBtn{
position: relative;
width: 100%;
height: 8.5vh;
background-color: rgba(40,40,40,.9);
display: grid;
grid-template-columns: 13% 90%;
align-items: center;
font-size: 20px;
color: white;
border-radius: 10px;

.task-input{
position: relative;
width: 97%;
height: 8.5vh;
font-size: 18px;
font-weight: 450;
color: #fff;
background-color: rgba(40,40,40,0.9);
caret-color: rgba(46, 226, 229, 0.8);
padding: 0 0 0 10px;
outline: none;
border-radius: 10px;
display: none;
text-indent: 4px;
}

#plus{
justify-self: center;
position: relative;
top: 0.5vh;
font-size: 10px;

14 | P a g e
 font-weight: 200;
}

#txt{
position: relative;
top: 5px;
}

#pending{
position: fixed;
height: 73vh; width: 95%;
margin-top: 4px;
overflow: hidden auto;

#pending::-webkit-scrollbar{
display: none;
}

.taskContainer{
position: relative;
width: 100%; height: auto;
display: grid;
grid-template-columns: 10% 80% 10%;
grid-auto-rows: max-content;;

.task{
grid-row: span 2;
word-wrap: break-word;
padding: 10px;
margin-bottom: 5px;
background-color: rgba(60, 60, 60, 0.9);
border-radius: 0 0 20px 20px;
}

.completed{
display: flex;
position: relative;
width: 25px; height: 25px;

15 | P a g e
 border: 1px solid black;
align-self: center;
justify-self: center;
border-radius: 50%;

.remove{
position: relative;
border-radius: 50%;
left: 1vw;

.del{
position: relative;
font-size: 8px;
top: -8px;

.suffix{
position: relative;
bottom: -2px;
font-family: sans-serif;
color: #d4be16;
font-size: 10px;
letter-spacing: 2px;
}

.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

.checkmark {
top: -0.5vh;

16 | P a g e
 position: absolute;
border-radius: 50%;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #7ac142;
animation: fill .4s ease-in-out forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.3s forwards;
}

@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}

17 | P a g e
6.0 Output of Code: -

18 | P a g e
7.0 Algorithm Overview: -

1. Initialize the Application:

• When the document is fully loaded, display the current date.

• Set up event listeners for user interactions (clicking the "Add Task" button and
pressing the "Enter" key).

2. Adding a Task:

• Input Handling:
➢ Check if the input field is not empty. If it is, do nothing.
Create Task Elements:
➢ Create a container for the task.
➢ Create a task element displaying the task text.
➢ Create a "Completed" button that allows the user to mark the task as completed.
➢ Create a "Remove" button that allows the user to delete the task.
• Add Event Listeners:
➢ Attach a click event to the "Completed" button to toggle the completed state of the
task.
➢ Attach a click event to the "Remove" button to delete the task from the list.
• Append to DOM:
➢ Add the task container to the pending tasks section.
• Clear Input:
➢ Clear the input field for new tasks.

3. Marking a Task as Completed:

• When the "Completed" button is clicked, toggle a CSS class (e.g., completed) on the
task element. This could change its appearance (like crossing it out or changing its
color).

4. Removing a Task:

• When the "Remove" button is clicked, remove the task container from the DOM.

5. Display Tasks:

• All tasks will be displayed dynamically in the pending section of the HTML, allowing
users to see their tasks and their completion status.

Detailed Steps for each Function: -

1. initializeApp():

• Runs when the DOM content is fully loaded.

• Sets the current date in the specified format.
• Attaches event listeners to handle user input and button clicks.
19 | P a g e
 2. addTask():

• Checks if the input field is not empty.

• Creates a new task element and associated buttons.
• Defines the behavior for the completed and remove buttons.
• Adds the new task to the list displayed on the page.

3. toggleTaskCompletion(task):

• Toggles the visual representation of the task when marked as completed.

• This can involve adding/removing a class that applies a strikethrough style.

4. removeTask(taskContainer):

• Removes the specific task from the UI when the user decides to delete it.

8.0 Flowchart: -
Start

Display current Date

User input task

Click “Add Task” or Press “Enter”

Is Input Empty?

Yes No

Return to User Input Task

20 | P a g e
 Create Task Element with "Complete" &
"Remove"

Add Task to List

Clear Input Field

Task Management

Click "Complete" or "Remove"

End

21 | P a g e
9.0 Skill Developed: -
1. Java Script Programming Skills.
2. Communication skills
3. Teamwork
4. Creativity
5. IT skills

10.0 Conclusion: -
- It was a great experience to design and implement the "Registration System" using
JavaScript and to work on its documentation. While working on this project, I have learned
many things especially how to apply the concepts of JavaScript in modeling of real world
systems.
- This assignment helped me to get the better understanding to develop new components and
organize them such that they will model real world systems within computers. It also helped
me in getting the better understanding of Form and HTML Components of JavaScript.
- In this project, I have learned the basic concepts of HTML. I have learned to provide
validations throughout the system for avoiding logical errors, used excellent logic related
comments with proper indentation and the JavaScript concept in an excellent manner. For
any project to become successful there must be Discipline, Hard work, Time Management,
Dedication and Interest. I have followed all the aspects to make my project successful.
- After doing this project, I am in position to explain JavaScript concepts and apply them to
the modeling of real-world systems by utilizing its offered facilities. This will definitely help
me in our society to apply the concepts of JavaScript in our real life to make work in easier
manner.

10.0 References: -
1. Prof. Miss. Gaykar R.H.
2. Client Side Scripting Textbook
3. www.w3schools.com
4. http://javapoint.com
5. www.studytonight.com

22 | P a g e
23 | P a g e