A Micro project on

TASK REMINDER
Submitted in partial fulfillment of the

Full Stack Web Development Lab

GRIET Lab On Board (G-LOB)

S.Shakeer Ahamad 22241A05B6

M.Vinay 22241A05A3
Arjun 22241A05B9
Sathwik 22241A05A5
Vamshi 22241A05A6
Manideep 22241A05B3

Under the esteemed guidance of

Ms.C.Sravani

Assistant Professor

Department of Computer Science and Engineering

GOKARAJU RANGARAJU
INSTITUTE OF ENGINEERING AND TECHNOLOGY
(Approved by AICTE, Autonomous under JNTUH)
Bachupally, Kukatpally, Hyderabad-500090.

1
 GOKARAJU RANGARAJU
INSTITUTE OF ENGINEERING AND TECHNOLOGY

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that the micro project titled “TASK REMINDER” is a bonafide work done
by S.Shakeer Ahamad (22241A05B6), M.Vinay (22241A05A3), Arjun (22241A05B9),
Sathwik (22241A05A5), Vamshi (22241A05A6), Manideep (22241A05B3) under Full
Stack Web Development Lab- GRIET Lab On Board (G-LOB) practice of our institute and
that this work has not been submitted for the award of any other Degree/Diploma of any
Institution/University.

Project Guide

Ms.C.Sravani

Assistant Professor

2
 Table of Contents

Ch. No. Chapter Name Pg. No.

1 Introduction 4
1.1. Need for the Project 4
1.2. Project Description 4
1.3 Components of the Projects 5
2 Requirement Analysis 6
4 Implementation 9
5 Results and Discussion 14
6 Conclusion 17
7 References 17

3
1. Introduction

1.1. Need for the Project

In today's fast-paced world, managing tasks efficiently is crucial for productivity

and time management. The "Task Reminder" project addresses this need by
providing a simple yet effective solution for scheduling and managing reminders.
This web application enables users to set reminders with specific dates and times,
ensuring that important tasks are not forgotten. The integration of notification
alerts helps users stay on top of their schedules, making it easier to prioritize and
complete tasks on time. By offering an intuitive interface and straightforward
functionality, the "Task Reminder" project enhances the ability to organize daily
activities, ultimately contributing to better personal and professional productivity.

1.2. Project Description

The "Task Reminder" project is a web application designed to help users manage
their tasks and reminders effectively. This application allows users to create,
view, and delete reminders with ease. Key features of the application include:

1. User Input Fields: Users can input the title, description, date, and time for
each reminder. These fields ensure that all necessary information is
captured for the reminder.

2. Reminder Scheduling: Users can schedule reminders by specifying the

date and time. The application calculates the time difference between the
current time and the scheduled time to set the reminder.

3. Notification Alerts: The application requests notification permission from

the user and, upon receiving permission, can show desktop notifications.
This feature ensures that users are promptly reminded of their tasks.

4
 4. Reminder Display Table: Scheduled reminders are displayed in a table
format, showing the title, description, and scheduled date and time. This
table provides a clear and organized view of all upcoming reminders.

5. Delete Functionality: Users can delete reminders from the table, and the
corresponding scheduled notifications will be canceled. This feature helps
in managing and updating the reminder list efficiently.

1.3. Components of the Project

The "Task Reminder" project comprises several key components that work
together to provide a seamless user experience for scheduling and managing
reminders. Below are the primary components of the project:

1. HTML Structure:

i. Title and Meta Tags: Defines the title of the web page and includes meta
tags for character set and viewport settings.
ii. Form Elements:
● Input Fields: For entering the title, description, date, and time of the
reminder.
● Button: A button to schedule the reminder and add it to the list of
scheduled reminders.
iii. Table for Reminders:
● Table Headers: Defines the headers for the title, description, date &
time, and action columns.
● Table Body: A dynamic section where scheduled reminders are
displayed.

2. CSS Styles:

i. General Styling: Applies font family, background color, and general

styles to the body and container elements.
ii. Form Elements Styling: Styles the input fields, labels, and buttons for
better user experience and aesthetics.
iii. Table Styling: Styles the table, headers, and cells to ensure a consistent
and readable layout.
iv. JavaScript Functionality:
● Notification Permission Request: Requests permission from the user
to display desktop notifications.
● Reminder Scheduling Function:

5
 ● ScheduleReminder Function: Captures user input, calculates the time
difference, sets a timeout for the reminder, and adds the reminderto the
display table.
● AddReminder Function: Adds the reminder details to the table.
● DeleteReminder Function: Allows users to delete a reminder from the
table and cancels the corresponding timeout.
v. User Interface Elements:
● Container Div: A main container that holds all the form elements, the
table, and provides overall structure to the application.
● Styling for Responsiveness: Ensures that the application is accessible
and user-friendly across different devices and screen sizes.

2. Requirement Analysis:
The provided code is a web-based task reminder application. Here is a
detailed requirement analysis based on the code:

Functional Requirements

1. Task Scheduling:
● Users should be able to schedule a task reminder by providing a
title, description, date, and time.
● The application should validate that all input fields are filled before
scheduling a reminder.
● The application should alert the user if the scheduled time is in the
past.

2. Task Display:
● Scheduled tasks should be displayed in a table format with columns
for title, description, date & time, and an action to delete the task.
● Each row in the table should represent a scheduled task.

3. Notification:
● The application should request permission to display notifications.
● When the scheduled time arrives, the application should play a
notification sound and display a notification with the task title and
description.
● The notification should require user interaction to dismiss.
6
4. Task Deletion:
● Users should be able to delete a scheduled task from the table.
● Deleting a task should also cancel the corresponding timeout for
the notification.

Non-Functional Requirements

1.Usability:
● The user interface should be simple and easy to use, with clear
input fields and buttons.
● Error messages and alerts should be clear and informative.

2. Accessibility:
● The application should be accessible, with appropriate labels and
roles for screen readers.
● The button should be keyboard-navigable and provide feedback on
interaction.

3. Performance:
● The application should handle scheduling and deleting tasks
efficiently without significant delay.
● It should handle multiple tasks without performance degradation.

4. Compatibility:
● The application should work on modern web browsers that
support HTML5, CSS3, and JavaScript.
● It should handle different screen sizes and be responsive.

Technical Requirements

1. HTML:
● Structure the user interface with a form for input fields (title,
description, date, time) and a table to display scheduled tasks.

2. CSS:

7
 ● Style the application for a clean and user-friendly interface.
● Add responsive design elements to ensure compatibility with
various screen sizes.

3. JavaScript:
● Handle task scheduling, validation, notification permission
requests, and display notifications.
● Manage the state of scheduled tasks using arrays and timeout
functions.
● Provide functions for adding and deleting tasks from the table and
managing timeouts.

4. Media:
● Include an audio file (notification-sound-effect.mp3) to be played
for notifications.

Potential Improvements
1. Data Persistence:
● Store scheduled tasks in local storage or a database to persist data
across page reloads or sessions.

2. Advanced Validation:
● Improve validation to check for valid date-time formats and
prevent scheduling tasks too far in the future.

3. User Feedback:
● Enhance user feedback with more detailed messages and visual
cues for successful task scheduling and deletion.

4. Enhanced Accessibility:
● Implement ARIA (Accessible Rich Internet Applications) roles and
properties for better accessibility.

8
4.Implementataion
index.html
<!DOCTYPE html>
<html>
<head>
<title>Task Reminder</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2 style="text-align:center">Task Reminder</h2>
<label for="title">Title :</label>
<input type="text" id="title"/>
<label for="description">Description</label>
<input type="text" id="description">
<label for="date">Date :</label>
<input type="date" id="date">
<label for="time">Time :</label>
<input type="time" id="time">
<button style="width:100%"
onclick="scheduleReminder();">Schedule Reminder</button>
<table border="1">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Date & time</th>
<th>Action</th></tr>

9
</thead>
<tbody id="reminderTableBody"></tbody>
</table>
</div>
<audio src="notification-sound-effect.mp3"
id="notificationSound"></audio>
<script src="script.js"></script>
</body>
</html>

1. style.css
body {
font-family: "Arial", sans-serif;
background-color: #eaeaea;
}
.container {
max-width: 500px;
margin: auto;
background-color: #fff;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label, input, button
{ margin: 10px 0;
box-sizing: border-box;
}

10
input {
width: 100%;
margin-top: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
padding: 5px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #4caf50;
color: white;
}
button {
background-color: #4caf50;
color: white;
padding: 5px;
border: none;
}
button:hover {
background-color: #4caf50;
}

11
2. script.js

if ("Notification" in window)
{ Notification.requestPermission().then(function (permission) {
if (Notification.permission !== "granted")
{ alert("Please allow notification
access!"); location.reload();
}
});
}
var timeoutIds = [];
function scheduleReminder() {
var title = document.getElementById("title").value;
var description = document.getElementById("description").value;
var date = document.getElementById("date").value;
var time = document.getElementById("time").value;

var dateTimeString = date + " " + time;

var scheduledTime = new Date(dateTimeString);
var currentTime = new Date();
var timeDifference = scheduledTime - currentTime;

if (timeDifference > 0) {
addReminder(title, description, dateTimeString);
var timeoutId = setTimeout(function () {
document.getElementById("notificationSound").play();
var notification = new Notification(title, {

12
 body: description,
requireInteraction: true,
});
}, timeDifference);

timeoutIds.push(timeoutId);
} else {
alert("The scheduled time is in the past!");
}
}

function addReminder(title, description, dateTimeString) {

var tableBody = document.getElementById("reminderTableBody");
var row = tableBody.insertRow();
var titleCell = row.insertCell(0);
var descriptionCell = row.insertCell(1);
var dateTimeCell = row.insertCell(2);
var actionCell = row.insertCell(3);
titleCell.innerHTML = title;
descriptionCell.innerHTML = description;
dateTimeCell.innerHTML = dateTimeString;
actionCell.innerHTML = '<button
onclick="deleteReminder(this);">Delete</button>';
}

function deleteReminder(button)
{ var row = button.closest("tr");
var index = row.rowIndex;

13
 clearTimeout(timeoutIds[index - 1]);
timeoutIds.splice(index - 1, 1);
row.remove();
}

5. Result and Discussion

Result:

14
Discussion:

Strengths:
1. Clear Structure:
● Well-organized HTML with separate sections for the form and the table.

15
2. Basic Functionality:
● Users can schedule tasks with title, description, date, and time.
● Displays reminders in a table format.

3. Interactive Elements:
● Simple, intuitive buttons for scheduling and deleting tasks.

4. Notifications:
● Uses Notification API and audio alerts for reminders.

Potential Improvements:

1. Input Validation:
● Ensure all fields are filled and date/time are valid and in the future.

2. Error Handling:
● Improve handling of invalid inputs and permission denials.

3. User Feedback:
● Provide detailed messages for actions and highlight errors.

4. Accessibility:
● Implement ARIA labels/roles and ensure keyboard navigation.

5. Data Persistence:
● Use local storage or a database to save tasks across sessions.

6. Responsive Design:
● Enhance CSS for better compatibility with various screen sizes.

7. Code Refactoring:
● Modularize JavaScript and add comments for readability.

8. Security:
● Sanitize user inputs to prevent security vulnerabilities like XSS.

Considerations:

1. Browser Compatibility:
● Ensure the app works across different browsers.

2. Performance:

16
 ● Test with many tasks to maintain optimal performance.

3. Future Extensions:
● Consider features like recurring tasks, priorities, and user authentication.

6. Conclusion

The task reminder code provides a functional and user-friendly base for a task
scheduling application, allowing users to schedule and display reminders with
notifications. Its clear structure and intuitive interface are strengths, but
enhancements are needed in input validation, error handling, and user feedback
to ensure robustness. Improving accessibility with ARIA roles and making the
design responsive will enhance usability across devices. Adding data persistence
and sanitizing inputs will ensure data remains secure and accessible across
sessions. By addressing these areas, the application can become a more
comprehensive and reliable tool for managing tasks effectively.

7. Reference
1. https://www.youtube.com/watch?v=-TRwWpZwb2Q&list=PPSV
2. AI Support

17