HTML - Laravel - PHP

Create an Analog Clock using HTML, CSS and JavaScript

Create an Analog Clock using HTML

What is Analog clock

How to Create an Analog Clock using html.

An analog clock, a common timekeeping tool used regularly for timekeeping, consists of moving hands and a circular dial inscribed with hours, minutes, and sometimes seconds, providing a visual representation of the current time.

Analog clocks, named for their depiction of time through continuous physical motion instead of numerical displays like digital clocks, are commonly found in homes, offices, schools, and public spaces.

We are going to build this by using CSS, JavaScript and HTML.

  1. HTML
  2. CSS
  3. JavaScript
  • HTML: This file has the basic layout of the webpage, including IDs for the clock’s body, second, minute, and hour hands.
  • CSS : We use CSS to improve the appearance of the clock, mainly by centering it on the webpage to make it look nicer.
  • JavaScript : The JavaScript file makes the hands of the clock move.
    • Initially, we’ve picked out the hour, minute, and second elements from the HTML.
    • To fetch the current time, we’ve utilized JavaScript’s Date() object, which provides the current seconds, minutes, and hours.
    • With the hour, minute, and second values in hand, we know the clock rotates 360 degrees.
    • So, we calculate the degree of rotation for the clock hands based on a straightforward method.

Example: This example shows the implementation of the above-explained approach.

  1. CSS Code


CSS Code Documentation: Clock Styling

This document provides an explanation of the CSS code snippet responsible for styling the clock displayed on a webpage.

CSS Code Explanation:

  1. Clock Container (#clockContainer):
    • position: relative;: Specifies the position of the clock container relative to its normal position.
    • margin: auto;: Centers the clock container horizontally within its parent element.
    • height: 40vw;: Sets the height of the clock container to 40% of the viewport width, ensuring responsiveness.
    • width: 40vw;: Sets the width of the clock container to 40% of the viewport width, ensuring responsiveness.
    • background: url(clock.png) no-repeat;: Sets the background image of the clock container to “clock.png” without repeating.
    • background-size: 100%;: Ensures the background image covers the entire container.
  2. Clock Hands (#hour, #minute, #second):
    • position: absolute;: Positions the clock hands absolutely within the clock container.
    • background: black;: Sets the background color of the clock hands to black.
    • border-radius: 10px;: Applies a border-radius of 10 pixels to create rounded corners for the clock hands.
    • transform-origin: bottom;: Specifies the origin point for the transformation of the clock hands as the bottom center.
  3. Hour Hand (#hour):
    • width: 1.8%;: Sets the width of the hour hand to 1.8% of the clock container’s width.
    • height: 25%;: Sets the height of the hour hand to 25% of the clock container’s height.
    • top: 25%; left: 48.85%;: Positions the hour hand relative to the clock container.
    • opacity: 0.8;: Sets the opacity of the hour hand to 0.8 for a slightly transparent effect.
  4. Minute Hand (#minute):
    • width: 1.6%;: Sets the width of the minute hand to 1.6% of the clock container’s width.
    • height: 30%;: Sets the height of the minute hand to 30% of the clock container’s height.
    • top: 19%; left: 48.9%;: Positions the minute hand relative to the clock container.
    • opacity: 0.8;: Sets the opacity of the minute hand to 0.8 for a slightly transparent effect.
  5. Second Hand (#second):
    • width: 1%;: Sets the width of the second hand to 1% of the clock container’s width.
    • height: 40%;: Sets the height of the second hand to 40% of the clock container’s height.
    • top: 9%; left: 49.25%;: Positions the second hand relative to the clock container.
    • opacity: 0.8;: Sets the opacity of the second hand to 0.8 for a slightly transparent effect.

Purpose:

  • This CSS code defines the visual appearance and layout of the clock displayed on the webpage, including the positioning and styling of the clock container and its hands.

2. HTML Code

Document: Clock Container Structure

This document outlines the HTML code snippet responsible for defining the structure of a clock displayed on a webpage.

HTML Code Explanation:

The provided HTML code snippet describes the structure of the clock container displayed on the webpage. It consists of the following elements:

  1. Clock Container:
    • The <div> element with the ID "clockContainer" serves as the main container for the clock.
    • This container holds the hour, minute, and second hands of the clock.
  2. Clock Hands:
    • Inside the clock container, three <div> elements are nested, each representing a different hand of the clock:
      • <div id="hour"></div>: Represents the hour hand of the clock.
      • <div id="minute"></div>: Represents the minute hand of the clock.
      • <div id="second"></div>: Represents the second hand of the clock.

Notes:

  • Each hand of the clock is represented by a <div> element within the clock container.
  • The IDs assigned to these elements ("hour", "minute", "second") are used by JavaScript to manipulate their appearance and rotation dynamically.

Purpose:

  • This HTML structure defines the visual layout of the clock displayed on the webpage.
  • The container and hand elements provide a basis for styling and dynamic manipulation using CSS and JavaScript, respectively.

3. JavaScript

Document: Clock Rotation Logic

This document explains the JavaScript code responsible for animating the rotation of the hands of a clock displayed on a webpage.

Code Explanation:

The provided JavaScript code snippet uses the setInterval function to repeatedly execute a block of code at specified intervals. In this case, the code block executes every second (1000 milliseconds).

Within the code block:

  1. Date Object Creation:
    • A new Date object d is created to obtain the current date and time.
  2. Time Extraction:
    • The current hour (hr), minute (min), and second (sec) are extracted from the Date object d using appropriate methods (getHours(), getMinutes(), getSeconds()).
  3. Rotation Calculation:
    • The rotation angles for the hour, minute, and second hands are calculated based on the current time:
      • hr_rotation: Calculated based on the current hour (hr) and minute (min). It represents the rotation angle for the hour hand.
      • min_rotation: Calculated based on the current minute (min). It represents the rotation angle for the minute hand.
      • sec_rotation: Calculated based on the current second (sec). It represents the rotation angle for the second hand.
  4. DOM Manipulation:
    • The rotation angles calculated above are applied to the corresponding clock hands in the HTML document using CSS transform property:
      • hour.style.transform: Sets the rotation angle for the hour hand.
      • minute.style.transform: Sets the rotation angle for the minute hand.
      • second.style.transform: Sets the rotation angle for the second hand.

Note:

  • The rotation angles are calculated based on the conventional clock rotation:
    • 360 degrees for a complete rotation.
    • Each hour corresponds to a rotation of 30 degrees.
    • Each minute corresponds to a rotation of 6 degrees.
    • Each second corresponds to a rotation of 6 degrees.

This code dynamically updates the rotation of the clock hands every second, creating an animated effect simulating the passage of time on a clock face.

Full code with HTML, CSS and Javascript

Note — Use this image for background clock

Thanks For Reading.

Visited 12 times, 1 visit(s) today

One comment on “Create an Analog Clock using HTML, CSS and JavaScript

  1. I do believe all the ideas youve presented for your post They are really convincing and will certainly work Nonetheless the posts are too short for novices May just you please lengthen them a little from subsequent time Thanks for the post

Leave a Reply

Your email address will not be published. Required fields are marked *