AMRUTVAHINI POLYTECHNIC, SANGAMNER DEPARTMENT OF

COMPUTER TECHNOLOGY
ACADEMIC YEAR:-2024-2025

This is to certify That The Project Report Entitled

“To-do List”.
Course: - Client Side Scripting Language (22519)

RollNo Enrollment No Name Of Student

139 2200800607 Gunjal Rushikesh Ravindra

147 2200800619 Kadlag Janmenjay Ganesh

150 2200800622 Kanwade Sanket Balasaheb

In Partial Fulfillment of The Requirement of

Computer Technology

During the Academic Year 2024-2025

Prof.Baheti.S.S Prof. Kale G. B

Signature of the Teacher Signature of H.O.D
 Micro-Project Report

1.0. Rationale:

The to-do list project is chosen to demonstrate essential client-side scripting skills, such as handling
user input, dynamic content updates, and managing tasks. It allows us to apply JavaScript, HTML,
and CSS to create a functional and interactive web tool, which helps users organize and track their
tasks effectively. This project will showcase how scripting can enhance user experience by enabling
real-time interaction without needing server-side processing.

2.0. Aims/Benefits of Micro-Project:

Aims:

- To develop a simple and interactive to-do list using client-side scripting.

- To enhance skills in HTML, CSS, and JavaScript.

- To demonstrate task management features like adding, editing, and deleting tasks.

- To improve the user experience by implementing dynamic updates without page reloads.

Benefits:

- Helps in understanding core client-side scripting concepts.

- Enhances problem-solving and logical thinking skills.

- Provides a practical example of how to create user-friendly, real-time web applications.

- Develops a useful tool for managing personal or professional tasks efficiently.

3.0. Course Outcomes Addressed:

Co.No. Course Outcome Statement

CI505.1 Use³ different program flow control structures for designing interactive web pages.
CI505.2 Execute³ programs on Array and functions in Java script.
CI505.3 Implement³ event based web forms and handling cookies using Java script.
CI505.4 Apply³ regular expressions for validation to design interactive web pages.
CI505.5 Implement³ Menus and navigation in web Pages.
4.0 Literature Review:

A to-do list application is a simple yet powerful tool for task management, widely implemented in
web development to demonstrate client-side scripting capabilities. This project combines HTML,
CSS, and JavaScript to create a responsive, interactive interface where users can add, complete, and
delete tasks.

Key components of the project include:

1. HTML Structure: The application uses semantic HTML to create a form for input and an
unordered list to display tasks dynamically.

2. CSS Styling: Minimalist CSS provides basic styling, including hover effects, checkbox
interactions, and task line-through features when marked as complete.

3. JavaScript Functionality: JavaScript is employed to handle the logic for adding, updating, and
deleting tasks. It uses event listeners to interact with user inputs and dynamically update the
DOM. Local storage is used to persist tasks across browser sessions, ensuring user data is
maintained.

Various studies and articles suggest that to-do list applications are highly effective in task
management, reducing cognitive load by allowing users to offload tasks from memory into a system
they can regularly check. The ability to dynamically manage tasks in real-time is a valuable feature in
modern web applications.

The project demonstrates the essential concepts of client-side scripting, focusing on user experience,
data persistence (local storage), and DOM manipulation. The simplicity of the project allows
developers to refine their coding skills while creating a functional and user-friendly tool.

5.0 Actual Resources Used:

Sr. Name of Resource Specifications Quantity Remarks

No.

1. Computer System with broad Lenovo - Intel Core i5, 1

specifications 8GB RAM

2. Operating System Window 11 1

3. Software VS Code 1

4. Keyboard Keychron 1

5. Mouse Logitech 1
 6.0. Actual Methodology Followed:

1. Designing the Structure:

HTML was used to create the basic structure, including an input form for adding new tasks and a
list element to display them.

2. Styling the Application:

CSS was applied to style the to-do list, making it visually appealing with hover effects and text
decorations for completed tasks.

3. Handling User Input:

JavaScript was used to capture user input from the form when a new task was added. It
dynamically updates the task list without reloading the page.

4. Task Management:
JavaScript logic allows users to mark tasks as complete (with a line-through effect) or delete them.
Event listeners were set for checkbox changes and delete buttons.

5. Data Persistence:
Local storage was utilized to save tasks, ensuring they remain available even after refreshing the
page or reopening the browser.

6. Rendering and Updating Tasks:

Tasks were rendered dynamically using a template system in JavaScript. When a task is added,
completed, or deleted, the list is updated in real-time.

Program:

index.html
styles.css
script.js
7.0. Outputs of Micro-Project:
Initially:

After Adding Items:

After Marking Items done:

After Deleting Items:

8.0. Skills Developed/Learning Outcomes:

1. HTML & CSS Skills: Enhanced ability to structure web pages and style them with responsive design.

2. JavaScript Skills: Improved understanding of DOM manipulation, event handling, and dynamic content
updates.

3. Data Persistence: Gained experience in using local storage to save and retrieve data.

4. Problem-Solving: Developed logical thinking to handle task management functions like adding, deleting, and
completing tasks.

5. Client-Side Scripting: Strengthened ability to create interactive, real-time web applications using client-side
technologies.

9.0. Applications of this Micro-Project:

1. Task Management: Helps users organize, manage, and track daily tasks effectively.

2. Learning Platform: Serves as a practical example for understanding client-side scripting, DOM
manipulation, and data persistence.

3. Personal Productivity: Can be used as a simple personal productivity tool for maintaining to-do lists
and goals.

4. Foundation for Advanced Projects: Can be expanded into more complex applications, such as
project management tools or collaborative task systems.

10.0. References:

1. W3Schools. (n.d.). HTML Tutorial. Retrieved from W3Schools HTML

2. Mozilla Developer Network (MDN). (n.d.). CSS: Cascading Style Sheets. Retrieved from MDN CSS

3. Mozilla Developer Network (MDN). (n.d.). JavaScript Guide. Retrieved from MDN JavaScript

4. Local Storage. (n.d.). Mozilla Developer Network (MDN). Retrieved from MDN Local Storage

5. JavaScript.info. (n.d.). The Modern JavaScript Tutorial. Retrieved from JavaScript.info

6. freeCodeCamp. (n.d.). How to Create a Simple To-Do List App Using JavaScript. Retrieved from
freeCodeCamp To-Do List

7. CSS Tricks. (n.d.). A Complete Guide to Flexbox. Retrieved from CSS Tricks Flexbox