A PROJECT REPORT

ON
“ToDo List using JAVASCRIPT”

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD

OF
DIPLOMA IN
COMPUTER TECHNOLGY

SUBMITTED TO
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,
MUMBAI
SUBMITTED BY

Shubham Namdev Somwanshi Tambe Rushikesh Vijay

Thore Shubham Sunil
GUIDED BY
Mr. V LACHAKE

SANJIVANI K.B.P. POLYTECHNIC, KOPARGAON

 SANJIVANI K.B.P. POLYTECHNIC, KOPARGAON

CERTIFICATE
This is to Certify that the project report entitled “ ToDo List Using
JAVASCRIPT ” Was successfully completed by Student of fifth semester
Diploma in (Computer Technology).

Name of Student(s) Enrollment No.

1. Shubham Namdev Somwanshi 1900340224

2.Rushikesh Vijay Tambe 1900340216
3. Shubham Sunil Thore 1900340231

In partial fulfillment of the requirements for the award of the Diploma in Computer
Technology and submitted to the Department of Computer Technology of Sanjivani K.B.P.
Polytechnic work carried out during a period for the academic year 2021-22 as per
curriculum.

GUIDE HOD

Mr. V LACHAKE Mr. G. N. JORVEKAR

DEPARTMENT STAMP
Introduction
We all have those days when there are a million things to do, and we don't know how we're
going to get it all done. It's easy to become overwhelmed by the vast quantity of tasks that we must
do from day to day. Sometimes we have so many balls in the air, that we may even lose track of
some loose ends and forget to do important things. When we get too busy, we end up feeling like
we are barely able to keep our heads above water.

Problem Statement
Nowadays it is difficult to remember all the tasks so we need a solution for that. In this
project using Client Side Scripting we created a simple TODO List.

Organization
One of the most important reasons for keeping a to-do list is the organization. Organizing
your tasks with a list can make everything much more manageable and make you feel grounded.
Seeing a clear outline of your completed and uncompleted tasks will help you feel organized and
stay mentally focused.

As you cross items off your to-do list, you'll feel a sense of progress and accomplishment
that can be missed when rushing from one activity to the next. The affirmation that you are making
progress will help motivate you to keep moving forward rather than feeling overwhelmed.

Having a list of all your tasks will allow you to sit down and make a plan. One study
showed that fifteen minutes spent planning could save an hour of execution time!
Improved Memory

Feeling forgetful? Nobody is capable of remembering

everything at all times. To-do lists are a useful external memory
aid that give you permission to forget. As long as you can remember
to look at your to-do list, you will never lose anything that you have
recoded on it.

Without some sort of external memory aid, we are guaranteed

to forget things due to the nature of our short-term memories. The
average person's short-term memory can only hold 7 pieces of
information for about 30 seconds. If you have more than 7 tasks that
you need to remember, you are already setup for failure. Keeping a
to-do list will allow you to effortlessly keep track of everything that
you need to do.

Every time you look at a list, it reinforces the information in your

short-term memory, making it much less likely that you will forget an
appointment or commitment. Students are often encouraged to use
lists as study aids to increase retention of facts.
Productivity
If you record all your tasks in a to-do list, you can easily review the list and prioritize the
most important tasks. Why waste time on trivial activities when there are important matters that
need your attention? One study, conducted by the Harvard Business Review, showed that 90% of
managers wasted valuable time through poor time management. Your to-do list will help you focus
your attention on the most important task of the moment.

Our attention is easily diverted by many types of distractions. How often have you been
doing one thing while thinking about what you need to be doing next, or worrying about what you
might have forgotten? When you know that you can quickly refer to an organized to-do list, you'll
find that you can focus your attention on the activity that you are involved in - you'll enjoy life
more and be more productive. Being mentally distracted means being inefficient, but having a to-
do list means you can rest easy knowing that you won't forget a thing.
Motivation
Motivational speakers will tell you that to-do lists are a useful motivational tool when used
as a way to clarify goals. It's easy to say, "I want to get that promotion," but listing the steps that
you intend to take to accomplish that goal can help clarify your thoughts and give you achievable
short-term goals. As you succeed at each step along the way, you'll gain confidence crossing those
items off your list!

Resources Used
Sr.
Resources Specification Quantity
No
Processor : Ryzen 3
1 Lenovo Laptop 1
RAM : 4GB

2 Visual Studio 1

3 Google Chrome 1

#CODE
<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
 integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">

<title>TODOs List</title>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">TODOs List</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Items
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<div class="container my-4">

<h2 class="text-center">TODOs List</h2>

<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">Add an item to the list</small>
</div>

<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" rows="3"></textarea>
</div>

<button id="add" class="btn btn-primary">Add to list</button>

<button id="clear" class="btn btn-primary" onclick="clearStorage()">Clear list</button>

<div id="items" class="my-4">

<h2>Your Items</h2>
<table class="table">
<thead>
<tr>
<th scope="col">SNo</th>
<th scope="col">Item Title</th>
<th scope="col">Item Description</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<th scope="row">1</th>
<td>Get some Coffee</td>
<td>You need coffee as you are a coder</td>
<td><button class="btn btn-sm btn-primary">Delete</button></td>
</tr>

</tbody>
</table>
</div>
</div>
 <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script>
function getAndUpdate() {
console.log("Updating List...");
tit = document.getElementById('title').value;
desc = document.getElementById('description').value;
if (localStorage.getItem('itemsJson') == null) {
itemJsonArray = [];
itemJsonArray.push([tit, desc]);
localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))
}
else {
itemJsonArrayStr = localStorage.getItem('itemsJson')
itemJsonArray = JSON.parse(itemJsonArrayStr);
itemJsonArray.push([tit, desc]);
localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))
}
update();
}

function update() {
if (localStorage.getItem('itemsJson') == null) {
itemJsonArray = [];
localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))
}
else {
itemJsonArrayStr = localStorage.getItem('itemsJson')
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><button class="btn btn-sm btn-primary" onclick="deleted(${index})">Delete</button></td>
</tr>`;
});
tableBody.innerHTML = str;
}
add = document.getElementById("add");
add.addEventListener("click", getAndUpdate);
update();
function deleted(itemIndex) {
console.log("Delete", itemIndex);
itemJsonArrayStr = localStorage.getItem('itemsJson')
itemJsonArray = JSON.parse(itemJsonArrayStr);
// Delete itemIndex element from the array
itemJsonArray.splice(itemIndex, 1);
localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray));
update();

}
function clearStorage() {
if (confirm("Do you areally want to clear?")) {
console.log('Clearing the storage')
localStorage.clear();
update()
}
}
</script>
</body>
</html>
#OUTPUT

Conclusion
In this project we have used CSS (Client Side Scripting) components with this it is very
interesting to understand all the concepts clearly. Our teacher MR. V LACHAKE sir guided us
for completing this project. By completing this project i have learned a lot and I think this will
help me for my future.