An alarm clock in JavaScript is a program that uses the JavaScript language to set and trigger an alarm at a specified time. The alarm can be used to alert the user of an event, remind them of a task, or perform some other action.
JavaScript alarm clocks typically use the setTimeout() or setInterval() functions to schedule the alarm, and the Date object to determine the current time and the time at which the alarm should go off.
HTML Code:
Here's an example of how you can build a simple alarm clock in HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Alarm Clock</title>
</head>
<body>
<div id="clock"></div>
<div>
<label for="alarm-time">Set Alarm:</label>
<input type="time" id="alarm-time">
<button id="set-alarm">Set</button>
<button id="stop-alarm">Stop</button>
</div>
</body>
</html>
CSS Code:
#clock {
font-size: 48px;
text-align: center;
}
JavaScript Code:
It starts by declaring several variables:
- clock is a reference to the div element in the HTML that will display the current time.
- alarmTime is a reference to the input element in the HTML that will be used to set the alarm time.
- alarmButton is a reference to the button element in the HTML that will be used to set the alarm.
- stopAlarm is a reference to the button element in the HTML that will be used to stop the alarm.
- alarmInterval is a variable that will be used to store the interval that is created when the alarm is set.
- The updateTime() function updates the text of the clock element to the current time, which is obtained by creating a new Date object and calling the toLocaleTimeString() method. This function is called every second using the setInterval() method.
The alarmButton element's click event is set to run a function that creates a new Date object for the alarm time, gets the current time and calculates the time in milliseconds until the alarm should go off, and uses the setTimeout() function to trigger an alert message when the alarm goes off. The setTimeout() function returns a value that is stored in the alarmInterval variable.
The stopAlarm element's click event is set to run a function that uses the clearTimeout() method and passing the alarmInterval variable to stop the alarm.
let clock = document.getElementById("clock");
let alarmTime = document.getElementById("alarm-time");
let alarmButton = document.getElementById("set-alarm");
let stopAlarm = document.getElementById("stop-alarm");
let alarmInterval;
// Function to update the clock every second
function updateTime() {
let date = new Date();
let time = date.toLocaleTimeString();
clock.innerText = time;
}
// Set interval to update the clock every second
setInterval(updateTime, 1000);
// Function to set the alarm
alarmButton.addEventListener("click", function() {
let alarm = new Date("January 01, 2000 " + alarmTime.value);
let currentTime = new Date();
let timeUntilAlarm = alarm.getTime() - currentTime.getTime();
alarmInterval = setTimeout(function() {
alert("Time's up!");
}, timeUntilAlarm);
});
// Function to stop the alarm
stopAlarm.addEventListener("click", function() {
clearTimeout(alarmInterval);
});
This example creates an HTML page with a div to display the clock, an input field to set the alarm time, and two buttons to set and stop the alarm.
The JavaScript code uses the setInterval() function to update the clock every second, and the setTimeout() function to trigger an alert when the alarm goes off.
The clearTimeout() function is used to stop the alarm when the user clicks the stop button.
You can test this alarm clock by opening the HTML file in a web browser and setting the alarm.
Note:
- You can also use JavaScript libraries like moment.js, clock.js, etc. for date and time functionality.
- Alarm will only work when the tab/browser is open and active, if you close it, the alarm will not be triggered.
Top comments (0)