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
