Scribd
Upload
6 views

Css Microproject

Its good

Uploaded by

kishorigavade25
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Css Microproject

Its good

Uploaded by

kishorigavade25
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

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 ([email protected])
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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])

You might also like