Learn web development by building a custom alarm and clock with HTML, CSS, and JavaScript. Enhance user experience and time management skills effortlessly.
Table of Contents
In today's fast-paced world, efficient time management is crucial. Imagine having a personalized web-based alarm and clock that not only keeps you on schedule but also reflects your style. In this comprehensive guide, we will walk you through the process of creating a custom alarm and clock using HTML, CSS, and JavaScript. Whether you're a beginner looking to enhance your web development skills or an enthusiast eager to build a practical time management tool, this tutorial is tailored for you.
Let's dive into the fascinating realm of front-end programming and design as we embark on the journey of crafting a user-friendly and responsive web-based alarm and clock application. Get ready to unleash your creativity and elevate your coding expertise!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our alarm and clock.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser. Let's break down the code step by step:
1. <!doctype html>: Declares the document type and version of HTML being used, in this case, HTML5.
2. <html lang="en">: The root element of the HTML document. The lang attribute is set to "en" for English, indicating the language of the document.
3. <head>: Contains meta-information about the HTML document, such as title, character set, viewport settings, and links to external resources.
- <meta charset="utf-8">: Specifies the character encoding for the document as UTF-8.
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">: Sets the viewport configuration for responsive design.
- <link rel="stylesheet" href="styles.css">: Links an external CSS stylesheet named "styles.css" to the HTML document.
- <link rel="icon" href="https://image.flaticon.com/icons/png/128/3652/3652191.png"/>: Sets the favicon for the website, using an image from the provided URL.
- <title>Clock and Alarm</title>: Defines the title of the HTML document, which is displayed in the browser's title bar or tab.
4. <body onload="updateclock(); setInterval('updateclock()',1000)">: The body of the HTML document, which contains the content of the page.
- onload="updateclock(); setInterval('updateclock()',1000)": Executes the updateclock function when the page loads and sets an interval to update the clock every second (1000 milliseconds).
5. <div class="container">: Creates a container division to hold different sections of the page.
- Within the container, there are three sections:
- A section for displaying the current time.
- A section for a calendar.
- A section for setting an alarm.
6. Calendar Section:
- The calendar section contains elements for displaying the month, year, and a grid for the calendar days.
7. Alarm Section:
- Allows users to set an alarm with a form containing an input field for the date and time and buttons to set the alarm or stop it.
- Also includes a placeholder for displaying an alarm alert.
8. Audio Section:
- Includes an <audio> element with an ID "my-audio" for playing an alarm sound. The source of the audio file is "https://amazing-js-project.netlify.app/clock%20and%20alarm/audios/alarm.mp3".
9. <script src="script.js"></script>: Links an external JavaScript file named "script.js" to the HTML document, allowing for dynamic behavior and interaction on the page.
This is the basic structure of our alarm and clock using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the alarm and clock is in place, the next step is to add styling to the alarm and clock using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our alarm and clock. Let's break down the code section by section:
1. The * selector applies the following styles to all elements:
- padding: 0;: Sets padding to 0 for all elements.
- margin: 0;: Sets margin to 0 for all elements.
- box-sizing: border-box;: Uses the border-box model for all elements.
2. The .container class:
- width: 100%;: Makes the container take up the full width of its parent.
- margin: auto;: Centers the container horizontally.
- display: flex;: Uses a flex container.
- flex-direction: column;: Stacks child elements vertically.
- align-items: center;: Centers child elements along the cross-axis.
3. The .section class:
- width: fit-content;: Sets the width of the section to fit its content.
4. The .time class:
- Styles for a time-related element.
- margin, padding, max-width, border, font-size, font-weight, display, and text-align properties are set.
5. The .time:hover selector:
- Applies styles when the element is hovered.
- Changes background color, text color, and adds a box shadow.
6. The .alarm class:
- Styles for an alarm-related element.
- Applies styles to nested input, button, and label elements.
- Defines styles for a form, including margin and padding.
7. Media query for screens with a maximum width of 548px:
- Adjusts styles for .time and .alarm classes to be more suitable for smaller screens.
8. The .calendar class:
- Styles for a calendar-related element.
- Uses CSS grid and centers content.
9. Various styles for the calendar header, week days, and days.
10. Styles for the month-picker and year-picker.
11. The .month-list class:
- Positioning and styling for a list of months.
- Initially hidden and becomes visible when the .show class is added.
This will give our alarm and clock an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.section {
width: fit-content;
}
.time {
margin: 1.5rem;
padding: 1rem 5rem;
max-width: 512px;
border: 2px solid red;
font-size: 2rem;
font-weight: 800;
display: flex;
flex-direction: column;
text-align: center;
}
.time:hover {
background-color: red;
color: aliceblue;
-webkit-box-shadow: inset 0 0 30px red, 0 0 30px red;
-moz-box-shadow: inset 0 0 30px red, 0 0 30px red;
box-shadow: inset 0 0 30px red, 0 0 30px red;
}
.alarm {
margin: 1rem;
}
.alarm input {
display: block;
}
.alarm,
.alarm button,
.alarm label,
.alarm input {
font-size: 1.2rem;
}
.alarm h3 {
font-size: 2rem;
}
form {
margin-bottom: 0.8rem;
}
.form-group > * {
margin: 0.8rem 0;
}
.alarm .buttons {
display: flex;
justify-content: space-between;
}
#alarmsubmit {
padding: 0.3rem 1rem;
background-color: #90ee90;
}
#alarmsubmit:hover {
background-color: #5cc55c;
}
#alarmstop {
padding: 0.3rem 1rem;
background-color: #fb8d8d;
}
#alarmstop:hover {
background-color: #fc4f4f;
}
@media (max-width: 548px) {
.time {
margin: 1rem;
padding: 0.3rem 2rem;
font-size: 1.5rem;
}
.alarm {
margin: 0.5rem;
}
}
.calendar {
width: 100%;
margin: 0 0.5rem ;
display: grid;
place-items: center;
border: 4px solid #1B363F;
overflow: hidden;
position: relative;
}
.calendar-header {
padding: 10px;
width: 100%;
border: 2px solid #1B363F;
display: flex;
justify-content: center;
align-items: center;
background-color: #1B363F;
color: aliceblue;
font-size: 1.5rem;
font-weight: 600;
}
.calendar-week-day {
background-color: rgb(251, 223, 187);
height: 50px;
display: grid;
grid-template-columns: repeat(7, 1fr);
font-weight: 600;
}
.calendar-week-day div {
display: grid;
place-items: center;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.calendar-days div {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
position: relative;
cursor: pointer;
}
.calendar-days div span {
position: absolute;
}
.calendar-days div.curr-date span {
display: none;
}
.month-picker {
padding: 5px 10px;
border-radius: 10px;
cursor: pointer;
}
.year-picker {
display: flex;
align-items: center;
}
.year-change {
height: 40px;
width: 40px;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0 10px;
cursor: pointer;
}
.month-list {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 5px;
transform: scale(1.2);
visibility: hidden;
pointer-events: none;
font-size: 1rem;
}
.month-list.show {
background-color: antiquewhite;
transform: scale(1);
visibility: visible;
pointer-events: visible;
transition: all 0.2s ease-in-out;
}
.month-list > div {
display: grid;
place-items: center;
}
.month-list > div > div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 20px;
border: 1px solid #1B363F;
cursor: pointer;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Let's break down the main components:
1. Event Listeners:
- The code starts by selecting various HTML elements using document.getElementById and document.querySelector.
- Event listener is added to the element with the id 'alarmsubmit'. When this element is clicked, the setalarm function is called.
2. setalarm function:
- This function is triggered when the user clicks on an element with the id 'alarmsubmit'.
- It prevents the default form submission behavior (e.preventDefault()).
- It retrieves the selected alarm time from the input field with the id 'alarm'.
- Calculates the time difference between the current time and the selected alarm time.
- If the alarm time is in the future, it sets a timeout to call the ringbell function when the alarm should ring.
3. ringbell function:
- This function plays an audio element (assumed to be a bell sound) when called.
4. updateclock function:
- Updates the displayed clock by getting the current time and formatting it in a 12-hour digital clock format.
- The updated time is then displayed in an HTML element with the id 'clock'.
5. Calendar Generation:
- The code generates a calendar for the current month and year using the generateCalendar function.
- The calendar is displayed in the HTML element with the class 'calendar'.
- It includes functionality to navigate to the previous and next years.
6. HTML Elements:
- Various HTML elements are selected and manipulated throughout the code, such as 'calendar', 'month-list', 'alarmAlert', etc.
- An audio element with the id 'my-audio' is used to play the alarm sound.
7. Month Selection:
- The code includes a list of months that can be selected, and the calendar is updated accordingly.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
let alarmsubmit = document.getElementById('alarmsubmit');
let calendar = document.querySelector('.calendar');
let month_list = calendar.querySelector('.month-list');
let alarm_alert = document.querySelector('.alarmAlert');
alarmsubmit.addEventListener('click', setalarm);
function setalarm(e) {
// audio.play();
e.preventDefault();
let alarm = document.getElementById('alarm');
alarmdate = new Date(alarm.value);
alarm_alert.innerHTML = `Alarm is Set for <span style='color:Red'>${alarmdate}</span>`;
console.log(`alarm is set.. for ${alarmdate}`);
now = new Date();
let timeToAlarm = alarmdate - now;
if (timeToAlarm > 0) {
setTimeout(() => {
ringbell();
}, timeToAlarm);
alarm.value = ' ';
} else {
}
}
// var audio = new Audio("../ ");
// var audio = new Audio("http://music.ogg" ) ;
var audio = document.getElementById('my-audio');
function ringbell() {
audio.play();
}
function stop() {
audio.stop();
}
function updateclock() {
// get the current date and time
let currenttime = new Date();
// extract hours min and sec from date
let currenthour = currenttime.getHours();
let currentminutes = currenttime.getMinutes();
let currentseconds = currenttime.getSeconds();
// convert railway clock to digital clock
let currenthour2 = currenthour;
currenthour = currenthour > 12 ? currenthour - 12 : currenthour;
currenthour = currenthour == 0 ? 12 : currenthour;
// padding with 0 if it is single digit
currenthour = (currenthour < 10 ? '0' : '') + currenthour;
currentminutes = (currentminutes < 10 ? '0' : '') + currentminutes;
currentseconds = (currentseconds < 10 ? '0' : '') + currentseconds;
// checking Am Pm
let timeofday = currenthour2 < 12 ? 'AM' : 'PM';
// seting the date
let currenttimestr =
currenthour + ':' + currentminutes + ':' + currentseconds + ' ' + timeofday;
document.getElementById('clock').innerHTML = currenttimestr;
document.getElementById('clock2').innerHTML = currenttime.toDateString();
}
const month_names = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
generateCalendar = (month, year) => {
let calendar_days = calendar.querySelector('.calendar-days');
let calendar_header_year = calendar.querySelector('#year');
let days_of_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
calendar_days.innerHTML = '';
let currDate = new Date();
if (month == undefined) month = currDate.getMonth();
if (year == undefined) year = currDate.getFullYear();
let curr_month = `${month_names[month]}`;
month_picker.innerHTML = curr_month;
calendar_header_year.innerHTML = year;
let first_day = new Date(year, month, 1);
for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
let day = document.createElement('div');
if (i >= first_day.getDay()) {
day.classList.add('calendar-day-hover');
day.innerHTML = i - first_day.getDay() + 1;
if (
i - first_day.getDay() + 1 === currDate.getDate() &&
year === currDate.getFullYear() &&
month === currDate.getMonth()
) {
day.classList.add('curr-date');
}
}
calendar_days.appendChild(day);
}
};
month_names.forEach((e, index) => {
let month = document.createElement('div');
month.innerHTML = `<div data-month="${index}">${e}</div>`;
month.querySelector('div').onclick = () => {
month_list.classList.remove('show');
curr_month.value = index;
generateCalendar(index, curr_year.value);
};
month_list.appendChild(month);
});
let month_picker = calendar.querySelector('#month-picker');
month_picker.onclick = () => {
month_list.classList.add('show');
};
let currDate = new Date();
let curr_month = { value: currDate.getMonth() };
let curr_year = { value: currDate.getFullYear() };
generateCalendar(curr_month.value, curr_year.value);
document.querySelector('#prev-year').onclick = () => {
--curr_year.value;
generateCalendar(curr_month.value, curr_year.value);
};
document.querySelector('#next-year').onclick = () => {
++curr_year.value;
generateCalendar(curr_month.value, curr_year.value);
};Final Output:
Conclusion:
Congratulations on successfully navigating the intricate world of web development and creating your very own personalized alarm and clock application! In this guide, we covered the essentials of HTML, CSS, and JavaScript to help you build a user-friendly and responsive time management tool.
As you reflect on your journey, remember the importance of clean and efficient code, as well as the endless possibilities for customization. Whether you're a novice developer or an experienced coder, this project offers valuable insights into front-end programming and design.
As you continue to explore the vast landscape of web development, keep experimenting, learning, and pushing your creative boundaries. The skills you've gained here not only contribute to efficient time management but also serve as a solid foundation for your future projects.
Thank you for joining us on this coding adventure. We hope this guide has empowered you to build more exciting and innovative web applications. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
