Scribd
Upload
71 views8 pages

Timmer Project

Javascript code

Uploaded by

amritapal320
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
71 views8 pages

Timmer Project

Javascript code

Uploaded by

amritapal320
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Introduction

In this javascript project we have create timmer countdown using HTML and pure javascript.
A timer or countdown timer is a type of clock that starts from a specified time duration and
stops when reaching 00:00.
A simple timer is an Hourglass. Commonly a timmer triggers an alaram when it ends.
A timmer can be implemented through hardware and software. Stopwatches operate in the
opposite direction. upwards from 00:00,measuring elapsed time since a given time instant.
Time switches are timmers that control an electric switch.
It's important to note that the JavaScript countdown timer creates reusable, so we can use it
on a certain landing page.
We can set a countdown timer in JavaScript using the setInterval() method. This method
continuously calls a function or executes a code snippet with a fixed time delay between
every call. The setInterval() method calls a function at described intervals in milliseconds.
We can also use this 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.

1
Aims/Benefits
 Set a suitable time.
Time management is the process of planning and controlling how much time to spend
on specific activities.

 Determine how much time is left.


It shows that how much time is left

 Convert the time to a required format.


Given a time at 12-hour AM/PM format, convert it to military (24-hour) time.
Note: Midnight is 12:00:00 AM on a 12-hour clock and 00:00:00 on a 24-hour clock. Noon is
12:00:00 PM on 12-hour clock and 12:00:00 on 24-hour clock.

 Create a reusable object from the clock data.


 It Show the clock on the page and stop the timer when it goes to zero.
 It includes hours, minutes, seconds.
 It starts beeping when it goes to zero when we run in networking
environment. After completion it beeps

2
Software
These types of timers are not devices nor parts of devices, they exist only as software. They
rely on the accuracy of a clock generator usually built into a hardware device that runs the
software.

Applications

Due to the increasing popularity of mobile phones, many timer apps have been developed
that mimic the old mechanical timer, but which have also highly sophisticated functions.
These apps are also easier to use, because they are available at once, without any need to
purchase or carry separate devices. Timers can be software applications phones,
smartwatches, or tablets. Some of these apps are countdown timers, stopwatch timers, etc.
These timer apps can be set for a specific time and can be used for tracking working or
training time, motivating children to do tasks, replacing an hourglass-form egg timer in
board games such as Boggle, or for the traditional purpose of tracking time when cooking.
Apps may be superior to hour glasses, or to mechanical timers. Hour glasses are not precise
and clear, and they can jam. Mechanical timers lack the customization that applications
support, such as sound volume adjustments for individual needs. Most applications will also
offer selectable alarm sounds.
Some timer applications can help children to understand the concept of time, help them to
finish tasks in time, and help them to get motivated. These applications are especially used
with children with disabilities like ADHD,Down syndrome, etc., but everybody else can also
benefit from them.

3
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Countdown Timer</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#countdown {
font-size: 2em;
}
.time-unit {
display: inline-block;
padding: 0.5em;
}
.label {
font-size: 0.5em;
color: #888;
}
input {
font-size: 1em;
padding: 0.5em;
margin: 0.5em;

4
}
button {
font-size: 1em;
padding: 0.5em 1em;
margin: 1em;
}
</style>
</head>
<body>
<h1>Custom Countdown Timer</h1>
<div>
<input type="number" id="hours-input" placeholder="Hours" min="0">
<input type="number" id="minutes-input" placeholder="Minutes" min="0">
<input type="number" id="seconds-input" placeholder="Seconds" min="0">
<br> <button onclick="startCountdown()">Start Countdown</button> </br>
</div>
<div id="countdown">
<div class="time-unit" id="hours">
<span id="hour-value">00</span>
<div class="label">Hours</div>
</div>
<div class="time-unit" id="minutes">
<span id="minute-value">00</span>
<div class="label">Minutes</div>
</div>
<div class="time-unit" id="seconds">
<span id="second-value">00</span>
<div class="label">Seconds</div>
</div>

5
</div>

<script>
let countdownInterval;

function startCountdown() {
clearInterval(countdownInterval);
const hours = parseInt(document.getElementById('hours-input').value) || 0;
const minutes = parseInt(document.getElementById('minutes-input').value) || 0;
const seconds = parseInt(document.getElementById('seconds-input').value) || 0;
const now = new Date().getTime();
const endTime = now + (hours * 3600 * 1000) + (minutes * 60 * 1000) + (seconds *
1000);

countdownInterval = setInterval(function() {
const now = new Date().getTime();
const distance = endTime - now;

const remainingHours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60*


60));
const remainingMinutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const remainingSeconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById('hour-value').innerText =
String(remainingHours).padStart(2, '0');
document.getElementById('minute-value').innerText =
String(remainingMinutes).padStart(2, '0');
document.getElementById('second-value').innerText =
String(remainingSeconds).padStart(2, '0');

if (distance < 0) {

6
clearInterval(countdownInterval);
document.getElementById('hour-value').innerText = "00";
document.getElementById('minute-value').innerText = "00";
document.getElementById('second-value').innerText = "00";
beep();
}
}, 1000);
}

function beep() {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();

oscillator.type = 'sine'; // or 'square', 'triangle', 'sawtooth'


oscillator.frequency.setValueAtTime(440, audioContext.currentTime); // Frequency in
Hz (A4 note)
oscillator.connect(audioContext.destination);
oscillator.start();

// Stop the beep after 1 second


setTimeout(() => {
oscillator.stop();
}, 1000);
}
</script>
</body>
</html>

7
Output

You might also like