\\TO DO LIST\\

A Report Submitted
In Partial Fulfilment of the Requirements
for the Degree of

Bachelor Of Technology
In
COMPUTER SCIENCE & ENGINEERING
By
ROHIT PAL
(2100560100086)
SATYAM AGRAHARI
(2100560100092)
Under the Supervision of
Mr. WASEEM AHMAD
(FACULTY CSE)

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

BABU BANARASI DAS NORTHERN INDIA INSTITUTE OF
TECHNOLOGY , LUCKNOW
Affiliated to the
 DR. APJ ABDUL KALAM TECHNICAL UNIVERSITY LUCKNOW
(Formerly Uttar Pradesh
Technical University, Lucknow)
 DECLARATION
I hereby declare that the work presented in this report entitled “TO
DO LIST”, was carried out by me. I have not submitted the matter
embodied in this report for the award of any other degree or diploma
of any other University or Institute.
I have given dur credit to the original authors/sources for all the
words, ideas, diagrams, graphics, computer programs, experiments,
results, that are not my original contributions.
I affirm that no portion of my work is plagiarized, and the
experiments and results reported in the report are no manipulated.
In the event of complaint of plagiarism and the manipulation of the
experiments and results, I will be fully responsible and answerable.
Name: ROHIT PAL
University Roll No. : 2100560100086
AND
NAME: SATYAM AGRAHARI
University ROLL NO: 2100560100092
Branch: Computer Science and Engineering

(Candidate’s Signature)
 CERTIFICATE
Certified that ROHIT PAL (2100560100086) AND SATYAM
AGRAHARI(2100560100092) has carried out the research work
presented in this thesis entitled “TO DO LIST” for the award of
Bachelor of Technology from Dr APJ Abdul Kalam University,
Lucknow under my supervision. The thesis embodies result of
original work, and studies are carried out by the students themselves
and the contents of the thesis do not form the basis of the award of
any other degree to the candidate or to anybody else from this or
any other University/Institution.

Signature:

(Mr. Waseem Ahmad)

Assistant Professor
BBDNIIT, Lucknow

Date: 09/12/2022
 ABSTRACT
To do lists come in all shapes and sizes. It always used to be something that
you would write using pen and paper, but thanks to technology there’s an app
that can come to the rescue. What makes a good to do list app?
 Tasks should be fast to add and organise
 There should be a variety of ways to organise the tasks
 Ability to plan your workflow
 Setting priorities
 Reminders for any self-imposed deadlines.
 Allocation of tasks if using it for task management with a team. Team
to-do list allows you to assign to the best person for the job.
 Able to synch between different platforms
All it takes is just a few minutes every day to keep a to do list up to date.
With a to do list, you can complete goals without wasting time trying to
figure out priorities. Your productivity will increase, you won’t forget things,
your time management will improve and you’ll be able to manage your tasks
more effectively.

ACKNOWLEDGEMENT
I would like to express my profound gratitude to Dr Anurag
Srivastava (Head of Department, Computer Science and Engineering,
Babu Banarasi Das Northern India Institute Of Technology, Lucknow)
and Dr V K Singh (Director, Babu Banarasi Das Northern India
Institute, Lucknow) for their contributions in the completion of this
project titled “TO DO LIST”. I would like to express our special
thanks to our mentor Dr Umesh Dwivedi for the time and efforts he
has provided throughout the session. His useful advice and
suggestions were really helpful for us during mini project completion.
We would like to thank my parents for their encouragement
throughout the project. At last, I would like to thank everyone for
supporting us directly or indirectly in completing this project
successfully.

TABLE OF CONTENT
Declaration
Certificate
Abstract
Acknowledgement
Table of Content
Synopsis
1. Title of Project
2. Objective of Project
3. Project Category
4. Language and Software Used
5. Structure of Project
6. Project Scope
7. Software Requirement
Output
References

SYNOPSIS
1. TITLE OF PROJECT:
TO DO LIST

OBJECTIVE OF PROJECT: One of the most important reasons you

should use a to do list is that it will help you stay organised. When you write
all your tasks in a list, they seem more manageable. When you’ve got a clear
outline of the tasks you’ve got to do and those you’ve completed, it helps you
stay focused. While freeing up space in your mind for other more creative
tasks.
When you complete a task, you can cross it off your list. This gives you a
sense of progress and achievement, something you’ll lack if you’re always
rushing from one task to the next. If you feel a sense of achievement, it spurs
you on and motivates you to keep moving forward.
But that’s not the only benefit of a to do list. Here are a few more:
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. Your to do list will also reinforce the information,
which makes it less likely you’re going to forget something.
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. Your list will help you stay focused on the tasks
that are the most important.
Helps with motivation: To do lists are a great motivational tool because you
can use them to clarify your goals. You can divide your long-term goal into
smaller, more achievable short-term goals and as you tick each one off your
list, your confidence will increase.
2.

3. PROJECT CATEGORY:
The project is categorized under Utility Tools.

4. LANGUAGE AND SOFTWARE USED:

Front End - HTML, CSS
Back End - JAVASCRIPT
Operating System - Windows 10
 5. STRUCTURE OF PROJECT:
5.1- Proposed System:
In the proposed system, the user can write their task and
work note for better performance.
5.2- Module Description:
It seems such a simple solution by putting pen to paper and taking time out
of your day to create a to do list, a plan for your day helps define your
challenges and goals. Preventing time from being wasted trying to identify
what is the next most important task to tackle next and even more important
makes sure you don't forget to do something important.
To-do lists offer a way to increase productivity, stopping you from forgetting
things, helps prioritise tasks, manage tasks effectively, use time wisely and
improve time management as well as workflow.

PROJECT SCOPE: To-do lists offer a way to increase productivity,

stopping you from forgetting things, helps prioritise tasks, manage tasks
effectively, use time wisely and improve time management as well as
workflow.

6. SOFTWARE REQUIREMENT:
HTML CODE
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/
7HAuoJl+0I4"
 crossorigin="anonymous"></script>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<link rel="stylesheet"
href="//cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="style.css">
<title>TO DO LIST</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

form {
display: grid;
place-content: center;
/* width: 100vw; */
/* height: 100vh; */
/* z-index: 100; */
}

form div {
/* box-shadow: 0px 0px 100px#e8e8e8; */
border-radius: 20px;
/* padding: 0rem 4rem 2rem 4rem; */
display: flex;
flex-direction: column;
justify-content: center;

height: fit-content;
/* width: clamp(50%, 80%, 100% ); */
}

form div h4 {
font-size: 1.5rem;
margin: 1.2rem 0rem 0rem 0.8rem;
}

form div button {

background-color: #c2e7ff;
height: 2rem;
 width: 40%;
font-size: 1rem;
border-radius: 5rem;
font-weight: 600;
cursor: pointer;
border: none;
margin-bottom: 2rem;
}

form div button:hover {

box-shadow: 0px 0px 5px grey;
}

input {
border: 1px solid grey;
border-radius: 34px;
height: 3rem;
font-size: large;
padding: 1rem;
margin-bottom: 2rem;
}

input:hover {
transform: scale(1.01);
}

.priority {
display: flex;
flex-direction: row;
width: fit-content;
box-shadow: none;
}

label:hover {
cursor: pointer;
transform: scale(1.03);
}

label {
font-size: 20px;
border-bottom: 2px solid #e1c3c3;
height: fit-content;
padding: 10px;
margin: 0px 10px;
text-align: center;
border-radius: 10px;
}
</style>
<body>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-danger">
<a class="navbar-brand m-1" href="#"><img style="width: 2rem;"
src="images/logo.png" alt=""></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 </a>
</li>

<li class="nav-item active">

<a class="nav-link" href="#feature">Feature </a>
</li>

<li class="nav-item active">

<a class="nav-link" href="#aboutus">About us</a>
</li>

</ul>

</div>
</nav>
<main>
<div class="heading">
<span>Organize your <br>
work and life, finally.</span>
<p class="mainhead">
Become focused, organized, and calm with <span class="todolist">
ToDoList</span>.
</p>
</div>
<div class="startbutton">
<a href="#addtask" class="startforfree"> Start for free</a>
</div>
<small style="display:block;text-align:center; margin-top:32px;"><a
style=" color:blue;" href="#signup"> Sign
Up</a> if you don't have todolist account</small>
<div class="headimg">
 <img class="imgleft" src="images/navbgright.webp" alt="">
<img class="imgmid" src="images/navbg.avif" alt="">
<img class="imgright" src="images/navbgleft.webp" alt="">
</div>
<div id="feature">
<div class="feature1">
<div class="text">
<div>
<div style="text-align: center;">Add your tasks. <br>Organize your
life. <br> Achieve more every day.</div>
<div class="smalltext">Add tasks like “Read work emails every day
at 10am” to fill your to-do list in
seconds.</div>
</div>
</div>

<div class="featureimgdiv"><img src="images/featureimg.webp"

class="featureimg" alt=""></div>
</div>
<hr color="red" style=" width:50vw; color: #FF5533; height: 4px; text-
align: end;">
<div class="feature2">
<div class="featureimg"><img class="featureimg"
src="images/featureimg2.webp" alt=""></div>
<div class="text">
<div>
<div style="text-align: center;">Reach that mental clarity <br>
you’ve been longing for.</div>
<div class="smalltext">Your to-do lists are automatically sorted
into Today, Upcoming and custom Filter
views to help you focus on your most important things.</div>
</div>
</div>

</div>

<div class="formwithtable">
<div id="addtask">
<h1 style="display:block; text-align: center; margin: 20px; font-
size:3.3vw;">Add your task</h1>
</div>

<div class="wholebody">
<form style="margin: 100px 0px 100px 0px" >
<div>
<h4 id="taskname">Task name</h4>
 <input class="formtaskname" type="text" placeholder="Enter your
task name " />

<button id="addbtn" type="submit">submit</button>

</div>
</form>
</div>

<div id="form_container" class="form_container">

<div class="contain_form_data">
<div class="data">
<h5>task name :</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
corporis quo temporibus ipsam optio deserunt ea eos labore rem doloribus.</p>
<input type="button" value="delete">
</div>
<div class="data">
<h5>task name :</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
corporis quo temporibus ipsam optio deserunt ea eos labore rem doloribus.</p>
<input type="button" value="delete">
</div>
<div class="data">
<h5>task name :</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
corporis quo temporibus ipsam optio deserunt ea eos labore rem doloribus.</p>
<input type="button" value="delete">
</div>
<div class="data">
<h5>task name :</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
corporis quo temporibus ipsam optio deserunt ea eos labore rem doloribus.</p>
<input type="button" value="delete">
</div>
<div class="data">
<h5>task name :</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
corporis quo temporibus ipsam optio deserunt ea eos labore rem doloribus.</p>
<input type="button" value="delete">
</div>
<div class="data">
<h5>task name :</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
corporis quo temporibus ipsam optio deserunt ea eos labore rem doloribus.</p>
<input type="button" value="delete">
</div>
 </div>
</div>

<!--
<table class="table">
<thead>
<tr>
<th scope="col">Sno.</th>
<th scope="col">Task name</th>
<th scope="col">Additional notes</th>
<th scope="col">Action</th>

</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>work</td>
<td>college work</td>
<td><input type="button" value="delete"></td>

</tr>
<tr>
<th scope="row">2</th>
<td>work2</td>
<td>random work</td>
<td><input type="button" value="delete"></td>

</tr>
<tr>
<th scope="row">3</th>
<td>kya karu</td>
<td>blank</td>
<td><input type="button" value="delete"></td>

</tr>
</tbody>
</table> -->

<div id="aboutus" class="aboutusimg">

<img style="width: 78vw; " src="images/aboutus4.jpeg" alt="">
</div>
<div style="padding-top: 10px;">
<div class="aman">
<div class="aboutusimg"><img
style="width: 100px; height:100px; border-radius: 100%;
border: 5px solid white;"
 src="images/myimage.jpg" alt="">
<h2>Rohit Pal</h2>
</div>
<H3 style="text-align: center;">Contact Us</H3>
<div class="socialmedialinks">
<a href="#"> <img style="width: 2.1rem; margin:0px 0.5rem ;"
src="icons/envelope-solid.svg" alt=""></a>
<a href="#"> <img style="width: 2.1rem ; margin:0px 0.5rem ;"
src="icons/instagram.svg" alt=""></a>
<a href="#"> <img style="width: 2.1rem; margin:0px 0.5rem ; "
src="icons/github.svg" alt=""></a>
<a href="#"> <img style="width: 2.1rem ; margin:0px 0.5rem ;"
src="icons/twitter.svg" alt=""></a>
</div>

</div>

<div class="aman">
<div class="aboutusimg2">
<h3>Satyam Agrihari</h3>
</div>
<H3 style="text-align: center;">Contact Us</H3>
<div class="socialmedialinks">
<!-- <img style="width: 2.1rem; " src="github.svg" alt=""> -->
<a href="#"> <img style="width: 2.1rem ; margin:0px 0.5rem ;"
src="icons/instagram.svg" alt=""></a>
<!-- <img style="width: 2.1rem ;" src="twitter.svg" alt=""> -->
<a href="#"><img style="width: 2.1rem ; margin:0px 0.5rem ;"
src="icons/envelope-solid.svg" alt=""></a>
</div>
</div>

<form id="signup" action="index.php">

<div>

<h1 style="text-align: center; margin-top: 2rem;">Free

signup</h1>
<h1 style="font-size: 1rem; text-align: center; font-weight:
300;">Customise todolist and make it's own
</h1>
<h4 class="">E-mail address</h4>
<input type="email" placeholder="Enter your E-mail" />

<h4 class="h4">Password</h4>
<input type="password" placeholder="Create a strong password" />
<h4 class="h4">Re-enter Password:</h4>
<input type="password" placeholder="Re-enter your password" />
 <button type="submit">submit</button>
</div>

</form>

</main>

<footer>
<div class="upperfooter">
<img src="images/footerbg.webp" alt="" class="footerimg">
<div style="align-items: centre; display:block; justify-
content:center;">
<h3 class="h3footer">Achieve peace of mind with <span style="font-
size: 4vw;" class="todolist"> ToDoList</span>
</h3>
<a href="#addtask"> <button class="startforfree">Start for
free</button></a>
</div>
</div>
<hr color="red" style="color: #FF5533; height: 1px; text-align: end;">
<div class="lowerfooter">
<div><img class="footerlistimg" src="images/todolisticon.webp"
alt=""><span style="margin:0px 0px 30px 20px ;"
class="todolist3">ToDoList</span>
<p>Join millions of people who organize work and <br> life with To Do
List.</p>
</div>
<div class="lowerfooterdata">
<h5 style="font-size: 1.3rem;">Features</h5>
<ul style="list-style: none;line-height: 2rem; ">
<li><a style="text-decoration: none; " href="">Teams</a></li>
<li><a style="text-decoration: none;" href="">Pricing</a></li>
</ul>

</div>
<div class="lowerfooterdata">
<h5 style="font-size: 1.3rem;">Company</h5>
<ul style="list-style: none;line-height: 2rem; ">
<li><a style="text-decoration: none; " href="">About Us</a></li>
<li><a style="text-decoration: none;" href="">Feedback</a></li>
<li><a style="text-decoration: none;" href="">Help center</a></li>

</ul>

</div>
</div>
<div class="privacypolicy">
 <p>Security || Privacy || Terms &#169 Created by <span style="color:
#e44232; font-size: 1rem;">Rohit Pal </span>
</p>
</div>
</footer>
<script src="script.js"></script>
</body>

</html>

References
1. https://codepen.io
2. https://youtu.be/CQZxeoQeo5c
3. https://youtu.be/uyaV_EWWRmo
4. https://developer.mozilla.org/en-US/docs/Web/HTML/Element