This document provides an overview of a mini project to build a to-do list application. It discusses the importance of to-do lists for staying organized and prioritizing tasks. A team of four students built the application using HTML, CSS, JavaScript, and GitHub for version control and deployment. Key features included adding, deleting, and marking items as complete, as well as categorizing tasks and rendering them on a calendar. Local storage was implemented to persist data in the browser. The application helps users track how they spend time and improve efficiency by managing tasks and daily routines.

1. Mini Project
To-Do Lists - The Key to Efficiency

2. Introduction
A to-do list app lets you write, organize, and reprioritize your tasks more
efficiently. In this we list everything that we have to do, with the most
important tasks at the top of the list, and the least important tasks at the
bottom. By keeping such a list, we make sure that our tasks are written
down all in one place so that we don't forget anything important. In many
ways, a good to-do app is the ultimate productivity app.
GitHub Repository: https://github.com/iMohitPant/todolist
Deployed Website: https://mohitpant.me/todolist/

3. Problem Statement
Social media and other easily accessible online distractions make it hard for us to stay focused on our
tasks and make it difficult for us to do our work efficiently.
Also, constantly switching between tasks may give us the false feeling that we are being productive
when we are, in fact, not. It’s more important for us to prioritize tasks and work on those that are most
important, rather than focusing on deleting small items from our todo list just for the sake of
appearances.
The goal of this app is to help us become more aware of how we spend time in the process of doing those
tasks and how productive that time is. It can help set some constraints on social media to reduce
distraction and track the time we spend working on the todo items. When we have a better sense of the
estimated time we’ll need to spend on our tasks, along with the validated time spent on the items for
reference or personal/team reviews, we are able to manage our daily routines more efficiently.

4. Team
Mansi Rawat : HTML and structuring webapp
Manoj Bhatt : Styling and Javascript
Manswi Sati : Styling and Javascript
Mohit Pant : Javascript and deploying

5. Roadmap
1. Discuss the scope and functionality of Todo list.
2. Adding , Deleting entries, done marking, category parts of form using html , css and Javascript.
3. Adding Local Storage functionality using javascript.
4. Rendering a calendar using javascript.
5. Adding documentation about the project in the github repository.
6. Deploying the website on a hosting service - GITHUB pages.

6. Hardware and Software Requirements
To use the deployed website you will need:
- A system with latest version of windows, linux distribution or macOS.
- A web browser. Brave 1.33 or Chrome 103 preferred.
To run the project locally you need:
- Git
- A source-code editor. VScode or ATOM
- A web browser. Brave 1.33 or Chrome 103 preferred.

7. Tech Stack
● HTML - HTML is the standard markup language for Web pages. With HTML you can create your
own Website.
● CSS - CSS is the language we use to style an HTML document. CSS describes how HTML
elements should be displayed.
● JavaScript - Javascript is a programming language that is one of the core technologies of the World
Wide Web, alongside HTML and CSS.
● Git - Git is a free and open source distributed version control system. It tracks changes in any set of
files, usually used for coordinating work among programmers.
● VSCode - Code editor made by Microsoft for Windows, Linux and macOS.

8. HTML ( Hyper Text Markup Language )
What is HTML5?
HTML stands for Hyper Text Markup Language, it is easy and fun to learn.
HTML describes the structure of web pages.
HTML5 is the fifth and current major version of the HTML standard.
Why use HTML5?
It is essential to learn HTML if you want to build web sites, you can't build one if you don't know
HTML because it's one of the prerequisites in learning other languages used for web development.

9. CSS ( Cascading Style Sheet )
What is CSS ?
CSS stands for Cascading Stylesheet.
CSS is a stylesheet language used to describe the presentation of an HTML document.
CSS describes how elements should be rendered on screen.
Why Use CSS ?
CSS defines styles of your web pages including design, layout and variations in display
across devices and screen sizes.
CSS can save you a lot of work. An external stylesheet saved as .css can be used to style
multiple web pages all at once!

10. JAVASCRIPT (Scripting Language )
JavaScript is a programming or a scripting language that allows the
implementation of features on web pages.
JavaScript is the world's most popular programming language.
JavaScript is easy to learn.
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

11. GITHUB
What is GITHUB ?
GitHub is a code hosting platform for version control and collaboration. It lets you
and others work together on projects from anywhere.
What is difference GitHub and Git?
Git is a version control system that lets you manage and keep track of your source
code history. GitHub is a cloud-based hosting service that lets you manage Git
repositories. If you have open-source projects that use Git, then GitHub is
designed to help you better manage them.

12. Progress
● Created form for taking input of todo list items and applying css to it.
● Implemented the design and interface for the frontend of calendar using FullCalendar
javascript library.
● Added documentation for the project in the github repository and added following
files to help in project’s walk through.
Readme : https://github.com/iMohitPant/todolist/blob/main/README.md
● Deployed the site using GitHub pages as the hosting service.
Deployed Website: https://mohitpant.me/todolist/

13. What is Local Storage in JavaScript?
localStorage is a property that allows JavaScript sites and apps to save key-
value pairs in a web browser with no expiration date. This means the data stored
in the browser will persist even after the browser window is closed.
Where is LocalStorage stored ?
In Google Chrome, web storage data is saved in an SQLite file in a subfolder in
the user’s profile. The subfolder is located at
- AppDataLocalGoogleChromeUser DataDefaultLocal Storage on
Windows machines
- ~/Library/Application Support/Google/Chrome/Default/Local Storage on
macOS
LOCALSTORAGE IN JAVASCRIPT

14. Javascript Library :- FullCalendar.io
FullCalendar's vanilla JavaScript API is blazing fast, using a very small embedded
virtual DOM library called Preact.
Features:
- Powerful
- Lightweight
- Open Source

15. 1. Added form for taking input

16. 2. Showing items in list category-wise .

17. 3. Added list items into calendar.

20. “…I like it when I see my report
and get a better sense of how my time was spent.”