MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION, MUMBAI

A Project Report
On

“TO DO LIST”
In

Third Year Computer Engineering

Submitted by

MAST. SHRIDHAR RAJENDRA SHELAR

MAST. SANSKAR SAGAR BHUIMBAR

MAST. ABHIMANYU ARJUN TIPPE

MAST. SAHIL SHIVAJI DESAI

UNDER THE GUIDANCE OF

Mrs. R. S. PATIL
SANT GAJANAN MAHARAJ RURAL POLYTECHNIC MAHAGAON

ACADEMIC YEAR

2024 – 2025
 Maharashtra State Board of Technical Education, Mumbai

“SANT GAJANAN MAHARAJ RURAL POLYTECHNIC”

AP/-MAHAGAON, SITE- CHINCHEWADI, TAL-GADHINGLAJ, DIST – KOLHAPUR

CERTIFICATE
This is to certify that the following students of Third Year Fifth semester or Diploma in
Computer Engineering of Institute Sant Gajanan Maharaj Rural Polytechnic, Mahagaon –
(code) 0965 has completed Micro Project in Subject – CLIENT SIDE SCRIPTING code-
22519 for academic year 2024-2025.

AS PRESCRIBED IN THE CURRICULUM

ROLL STUDENT NAME ENROLLMENT NO.

NO.

03 SHRIDHAR RAJENDRA SHELAR 2209650004

10 SANSKAR SAGAR BHUIMBAR 2209650012
58 ABHIMANYU ARJUN TIPPE 23212210184
55 SAHIL SHIVAJI DESAI 23212210180
DATE: 06 / 04 / 2024 PLACE: MAHAGAON

Mr. R. S. PATIL Mr. G.K BIRANGADDI Mrs. R.S PATI

(Project Guide) (Head of Department) (Principal)

 Table of Content

Sr. Contents
No

1
Part A: Micro-Project Proposal

2
Part A: Micro-Project Proposal
 Part A: Micro-Project Proposal
A TO DO LIST

1.0 Aims/Benefits of the Micro-Project

To understand the concept of “ TO DO LIST ” using form validation.

2.0 Course Outcomes Addressed

 Create interactive web pages using program flow control structure.
 Implement Arrays and functions in Java script.
 Create event-based web forms using Java script.

3.0 Proposed Methodology

 we will focus on selection of appropriate topic for Micro project.
 Select the topic Attendance Management System.
 Then we will with our brief study on our topic.
 Then we will gather all information based on the topic of micro-project.
 We will check or view our micro-project.
4.0Action plan

SR.NO Details Of Activity Planned Planned Name Of

. Start Finish Responsible
Date Date Team Members

1 Discussion and finalization / /2023 / /2023 Sanskar Bhuimbar

of topic

2 Preparation and submission of / /2023 / /2023 Shridhar Shelar

abstract

3 Collection of data / /2023 / /2023 Abhimanyu Tippe

4 Preparing Algorithm and / /2023 / /2023 Sanskar Bhuimbar

Flowchart

5 Development of program / /2023 / /2023 Sahil Desai

6 Presentation/Seminar / /2023 / / 2023 All Team

Members
7 Submission Micro-Project / /2023 / /2023 All Team
Members
5.0Resources Required

Sr. No Name of resource/material

Operating System (Windows 10)
1
Software: - Notepad++,MS Word
2
Browser: - Firefox, Google Chrome
3

6.0Name of Team Members with Roll No’s: -

ROLL NO STUDENT NAME ENROLLMENT NO

03 SHRIDHAR RAJENDRA SHELAR 2209650004
10 SANSKAR SAGAR BHUIMBAR 2209650012
58 ABHIMANYU ARJUN TIPPE 23212210184
55 SAHIL SHIVAJI DESAI 23212210180
 Part B: Micro-Project
Proposal

TO DO LIST

1.0 Rationale
This To-Do List Application is a simple and effective tool for managing tasks. It allows
users to add tasks with a title and a timer, helping them stay focused and on schedule. Each
task has its own countdown timer, so users can track how much time is left for each task.
Additionally, users can edit or delete tasks at any time, and the app displays a counter
showing how many tasks are still pending. The tasks are stored in the browser's local
Storage, ensuring that they persist even after a page refresh. This app combines basic
HTML, CSS, and JavaScript to create a clean, user-friendly interface, making it easy to stay
organized and productive.
2.0 Course Outcomes Achieved
 Create interactive web pages using program flow control structure.
 Implement Arrays and functions in Java script.
 Create event-based web forms using Java script.
 Create interactive webpage using regular expressions for validations.
 Create Menus and navigations in web Pages.

3.0 Actual Methodology Followed

 Task Creation: Users can add tasks with descriptions and a set time limit.
 Timer Functionality: Each task has a countdown timer that decreases in real time.
 Local Storage: Task data, including status and timers, is saved in the browser’s local storage
for persistence.
 Task Status Tracking: Tasks are marked as complete once the timer runs out or manually by
the user.
 Real-Time Updates: The task list and timer are dynamically updated without reloading the
page.
 Alerts: Once the timer reaches zero, a pop-up alert notifies the user that the task time is
up.
 Source Code and Output of The Micro- Project

<!DOCTYPE html>
<html lang="en">
<head>
<title>To-Do List with Time Limit</title>
<style>
/* Add spacing between input fields using CSS */
.input-group {
margin-bottom: 10px;
}

.form-field {
margin-right: 10px; /* Space between task and time fields */
}
</style>
</head>
<body>
<h1>To-Do List</h1>

<!-- Label for task input and time input -->

<div class="input-group">
<label for="taskInput">Task:</label>
<input type="text" id="taskInput" class="form-field" placeholder="Enter a new task" />

<label for="taskTime">Time (in minutes):</label>

<input type="number" id="taskTime" class="form-field" placeholder="Enter time in minutes" />
</div>

<button onclick="addTask()">Add Task</button>

<ul id="taskList"></ul>

<script>
function addTask() {
var taskInput = document.getElementById("taskInput");
var taskText = taskInput.value;
var taskTimeInput = document.getElementById("taskTime");
var taskTime = taskTimeInput.value;

if (taskText !== "" && taskTime > 0) {

var taskList = document.getElementById("taskList");

// Create a new list item

var li = document.createElement("li");

// Add task text

var taskSpan = document.createElement("span");
taskSpan.textContent = taskText;

// Add a space after the task text

var space = document.createTextNode(" ");
li.appendChild(taskSpan);
li.appendChild(space);

// Create an edit button

var editButton = document.createElement("button");
editButton.textContent = "Edit";
editButton.onclick = function() {
editTask(taskSpan, li);
};

// Add a space after the edit button

var editSpace = document.createTextNode(" ");
li.appendChild(editButton);
li.appendChild(editSpace);

// Create a delete button

var deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";
deleteButton.onclick = function() {
taskList.removeChild(li);
};

// Append the delete button to the list item

li.appendChild(deleteButton);

// Set a timeout to alert when time is up for this task

var taskTimeInMs = taskTime * 60 * 1000; // Convert minutes to milliseconds
setTimeout(function() {
alert("Time is up for the task: " + taskText);
}, taskTimeInMs);

// Append the list item to the task list

taskList.appendChild(li);

// Clear input fields after adding task

taskInput.value = "";
taskTimeInput.value = "";
 } else {
alert("Please enter a task and a valid time!");
}
}

function editTask(taskSpan, li) {

var newTaskText = prompt("Edit your task:", taskSpan.textContent);

if (newTaskText !== null && newTaskText !== "") {

taskSpan.textContent = newTaskText;
} else if (newTaskText === "") {
alert("Task cannot be empty!");
}
}
</script>

</body>
</html>
Output:-
5.0Actual Resources Used

Sr. No Name of resource/material

Operating System (Windows 10)
1
Software: - Notepad++,MS Word
2
Browser: - Firefox, Google Chrome
3

6.0 Skill Developed/Learning Outcome of this Micro-Project

 We acquired the knowledge about to Regular Expression
 Creating forms
 Create Banners
7.0 Conclusion

The project offers an intuitive and efficient task management system with built-in real-time timer
functionality. Users can easily set time limits for each task, track their progress, and receive
notifications once the time is up. The system leverages local storage to ensure task persistence
and provides an interactive interface for task creation, editing, and completion. This solution not
only enhances productivity but also helps users stay organized by managing tasks effectively
within set timeframes. Overall, it serves as a user-friendly tool for managing daily tasks and
boosting efficiency.

8.0 Reference
https://bootswatch.com
https://www.w3schools.com
https://imagecolorpicker.com