lOMoARcPSD|45230697
Css microproject
Client side scripting language (Sahyadri Polytechnic Sawarde)
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
Sahyadri Shikshan Santha’s
SAHYADRI POLYTECHNIC SAWARDE
MICRO PROJECT
ON
Countdown Timer
Submitted To
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
IN THE PARTIAL FULFILLMENT OF THE REQUIRMENT FOR DIPLOMA IN INFORMATION
TECHNOLOGY
SUBMITTED BY
MR .Bilal AbdulRauf Madre
MR._Choughuley Zaid M.Shahid
UNDER THE GUINDANCE OF
Ms. Prachi Shinde
2023-2024
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
SAHYADRI POLYTECHNIC SAWARDE
MICRO PROJECT
Academic Year: 2023-2024
TITLE OF PROJECT
Countdown Timer
Program: TY Information Technology Program Code: IF5I
Course: Client Side Scripting Language Course Code: 22519
Group Details:
TITLE OF PROJECT: Countdown Timer
Sr Name of group members Roll Enrollment Number Seat Number
No Number
1 Bilal AbdulRauf Madre 3519 2201080087
2 Choughuley Zaid M. Shahid 3520 2201080088
Name of Guide: Ms. Prachi Shinde
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
MAHARASHTRA STATE BOARD TECHNICAL EDUCATION
Certificate
This is to certify that Mr. Bilal AbdulRauf Madre
Mr Choughuley Zaid M. Shahid
Of 5th semester diploma in Computer Engineering / Information Technology of Sahyadri polytechnic
Sawarde (Code:0108) has completed the Micro Project satisfactory in subject CSS for the academic year 2022-23
as prescribed in the curriculum.
Place: Sawarde Enrollment Number:2201080087
2201080088
Date: _______________ Exam Seat No: __________________
Subject Teacher HOD Principal
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
Micro Project Report
Title: Countdown timer using JavaScript
A countdown timer is a wen or virtual
clock that is displayed on a landing
page. And it drops down from a specific
date to represent the start or end of
an event.
A countdown timer can be used on
eCommerce websites to display the start
(or end) of an offer. The countdown
timer's purpose is to persuade
customers to act, such as purchasing
products or services.
It's important to note that the
JavaScript countdown timer creates
reusable, so we can use it on a certain
landing page. We can also use this
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
countdown to generate new countdown
timers on the same page.
A countdown timer is a perfect timer
that can be used to display the
countdown to any special event, such as
a deadline, birthday, or anniversary,
on a website or blog.
Aims/Benefits of the Micro-Project:-
• Set a suitable end date.
• Determine how much time is
left.
• Convert the time to a required
format.
• Create a reusable object from
the clock data.
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
• Show the clock on the web page
and stop the timer when it
goes to zero.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Countdown Timer</title>
<style> body {
background-color: #f1f1f1;
text-align: center;
font-family: Arial, sans-serif;
} h1 {
color: #333;
} p{
font-size: 18px;
button {
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
button:hover {
background-color: #45a049;
#countdownDisplay {
font-size: 24px;
margin-top: 20px;
</style>
</head>
<body>
<h1>Event Countdown Timer</h1>
<p>Enter the event date and time:</p>
<input type="datetime-local" id="eventTime">
<button id="setEvent">Set Event Time</button>
<br>
<br>
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
<div id="countdownDisplay">
Days: <span id="days">0</span> |
Hours: <span id="hours">0</span> |
Minutes: <span id="minutes">0</span> |
Seconds: <span id="seconds">0</span>
</div>
<script> let countdown;
const daysElement = document.getElementById('days');
const hoursElement = document.getElementById('hours');
const minutesElement = document.getElementById('minutes');
const secondsElement = document.getElementById('seconds');
document.getElementById('setEvent').addEventListener('click', function() {
const eventTime = new Date(document.getElementById('eventTime').value).getTime();
clearInterval(countdown);
countdown = setInterval(function() {
const now = new Date().getTime();
const distance = eventTime - now;
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
if (distance <= 0) {
clearInterval(countdown);
alert('Event time has arrived!');
return;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
daysElement.textContent = days;
hoursElement.textContent = hours;
minutesElement.textContent = minutes;
secondsElement.textContent = seconds;
}, 1000);
});
</script>
</body>
</html>
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
Output:
Actual Resources Used:
Sr
Name of Resource/ Material Specification QTY Remark
No
Operating System Windows 10 1
1)
Computer system Ryzen 7 16 gb ram 1
2)
Internet reference Youtube, 1
3) GeeksforGeeks
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
Skill Develop/ Learning outcome of this micro-Project:
Upon completing this project on creating
a countdown timer in JavaScript,
students will be able to design and
implement a functional countdown timer
that accurately counts down to a
specified time, incorporates user-
friendly design principles, and
effectively utilizes JavaScript
programming concepts and libraries.
Application of this Micro Project:
Subject: Countdown Timer Project Application
I'm excited about the countdown timer project
because it offers a chance to enhance my
JavaScript skills, improve user experience,
tackle real-world challenges, and collaborate
with peers. I look forward to contributing to the
project's success.
Sincerely,
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
Evaluation Sheet for the Micro Project
Name of Student: - Bilal AbdulRauf Madre Enrollment No:- 2201080087
Name of Program: IF5I Semester: -5th
Course Title:CSS Code:-22519
Title of Micro Project:- Countdown Timer
Course Outcomes Achieved:
Students will be able to design, implement, and customize countdown timer functionality using
programming languages and libraries, enabling them to create engaging and time-sensitive applications
for various digital platforms.
Sr Poor Average Good Excellent
No Characteristics to be assessed (Marks 6-8)
(Marks 1-3) (Marks4-5) (Marks 9-10)
1 Relevance to the course
2 Literature survey / Information collection
3 Completion of the target as per project proposal
4 Analysis of data and representation
5 Quality of prototype / Model
6 Report Presentation
(A) Process and Product Assessment (Convert above total marks out of 6 marks)
8 Presentation
9 Viva
(B) Individual Presentation /Viva (Convert above total marks out of 4 marks)
(A)
(B) Individual Presentation / Viva Total
Process and Product Assessment (6
(4 marks) marks 10
marks)
Comments/Suggestions above team work/leadership/inter-personal communication (if any)
_____________________________________________________________________________________
_____________________________________________________________________________________
Name and designation of the Teacher:-_____________________________________________________
Dated Signature:-______________________________________________________________________
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
lOMoARcPSD|45230697
Evaluation Sheet for the Micro Project
Name of Student: -Choughuley Zaid M. Shahid Enrollment No:- 2201080088
Name of Program: IF5I Semester: -5th
Course Title:-CSS Code:-22519
Title of Micro Project:- Countdown Timer
Course Outcomes Achieved:
Students will be able to design, implement, and customize countdown timer functionality using
programming languages and libraries, enabling them to create engaging and time-sensitive applications
for various digital platforms.
Sr Poor Average Good Excellent
No Characteristics to be assessed (Marks 6-8)
(Marks 1-3) (Marks4-5) (Marks 9-10)
1 Relevance to the course
2 Literature survey / Information collection
3 Completion of the target as per project proposal
4 Analysis of data and representation
5 Quality of prototype / Model
6 Report Presentation
(A) Process and Product Assessment (Convert above total marks out of 6 marks)
8 Presentation
9 Viva
(B) Individual Presentation /Viva (Convert above total marks out of 4 marks)
(A)
(B) Individual Presentation / Viva Total
Process and Product Assessment (6
(4 marks) marks 10
marks)
Comments/Suggestions above team work/leadership/inter-personal communication (if any)
_____________________________________________________________________________________
_____________________________________________________________________________________
Name and designation of the Teacher:-_____________________________________________________
Dated Signature:-______________________________________________________________________
Downloaded by Kishori Gavade (kishorigavade25@gmail.com)
