Published on May 16, 2024
Hello, everyone! Welcome back to our YouTube channel. Today, we have an exciting tutorial for you. We’ll be walking you through the process of creating a simple alarm clock using HTML, CSS, and JavaScript.
Let’s dive right in. Here’s the HTML code for our alarm clock.
This line tells the browser that we’re using HTML5.
Next, we have the <html> tag, which wraps all the HTML content and specifies the document’s root element.
Inside the <html> tag, we have the <head> section. This section contains metadata about the document, such as the character set, viewport settings, and links to external resources like stylesheets and scripts.
Here, we set the character set to UTF-8 and define the viewport to ensure proper scaling on different devices.
We link our stylesheet, style.css, to control the presentation of our alarm clock.
Moving on to the <body> tag. This is where the visible content of our web page goes.
Inside the body, we have a <div> element with the class “wrapper.” This serves as a container for our alarm clock interface.
We include an image of a clock using the <img> tag.
Next, we have an <h1> tag displaying the current time in 12-hour format.
Inside the wrapper, we have another <div> with the class “content.” This will hold our selection options for setting the alarm time.
Within the content div, we have three dropdown menus represented by <select> tags. These will allow users to choose the hour, minute, and AM/PM for their alarm.
Finally, we have a <button> element labeled “Set Alarm” to trigger the alarm-setting functionality.
At the end of our HTML document, we link our JavaScript file, script.js, which will handle the alarm functionality.
And that’s the HTML structure of our alarm clock. In the next part of this tutorial, we’ll style it using CSS to make it visually appealing. So stay tuned!
CSS
Now that we’ve set up the structure of our alarm clock using HTML, it’s time to make it look good with CSS.
We start by resetting the default margin, padding, and font family for all elements using the universal selector *.
This ensures consistent spacing and typography throughout our project.
Next, we set up our layout using Flexbox. The body, wrapper, and content elements are all displayed as flex containers, allowing us to easily align and center their child elements.
We give the body some padding and set its minimum height to 100% of the viewport height.
The wrapper class styles the container for our alarm clock. It has a fixed width, padding, background colour, border radius, and a box shadow to create a card-like appearance.
Here, we ensure that the clock image inside the wrapper doesn’t exceed a maximum width.
Our alarm clock’s title is styled with a larger font size, some padding, a background colour, text alignment, and a border radius for rounded corners.
The content class represents the area containing our selection options for setting the alarm time. It’s set to occupy the full width of its container and spaces its child elements evenly.
We add a bit of interactivity by adjusting the appearance of the selection options when the content is disabled. This includes reducing opacity and disabling pointer events.
Our “Set Alarm” button is styled with a bold font, padding, margin, border radius, and background colour to make it stand out.
Lastly, we style the dropdown menus for selecting the hour, minute, and AM/PM. They have no borders, background, and are sized uniformly.
And there you have it! Our alarm clock interface is starting to take shape. In the next part of this tutorial, we’ll add some functionality to our clock using JavaScript. So stay tuned!
JAVASCRIPT
Now that we’ve designed the visual interface for our alarm clock, it’s time to give it some functionality with JavaScript.
Let’s dive into the JavaScript code and see how we’re going to make our alarm clock work.
We start by selecting various elements from our HTML document using the document.querySelector method and store them in variables.
These variables include the current time display, the content area, selection menus, and the “Set Alarm” button.
Next, we populate the dropdown menus for selecting the hour, minute, and AM/PM options dynamically using for loops.
We use setInterval to continuously update the current time displayed on our clock every second.
Inside the setInterval function, we get the current time using the Date object, format it to 12-hour format with leading zeros where necessary, and update the display accordingly.
We also implement the alarm functionality. When the current time matches the set alarm time, we play a ringtone.
The setAlarm function handles setting and clearing the alarm. It checks if a valid time has been selected and updates the alarm time accordingly.
Finally, we add an event listener to the “Set Alarm” button so users can interact with our clock.
There you have it! Our alarm clock is now fully operational. In our upcoming tutorial segment, we’ll amalgamate all the components and illustrate how it functions seamlessly. So, stay tuned for the next video! Until then, take care and goodbye!