May 25, 2020

Build a Simple Clock using Javascript and CSS

Javascript can be ideally used to do nearly everything but here today we are going to build a simple clock using Javascript and Css. We will use javascript to get the current time and update our css every second.

Javascript clock

Javascript

function calculateTheTime() {
    const seconds = document.querySelector('.second');
    var minute = document.querySelector('.min');
    var hour = document.querySelector('.hour');
    const now = new Date();

    const timeSeconds = now.getSeconds(); // get current second
    const secondsDegrees = ((timeSeconds / 60) * 360); //conver the current second into degree on clock
    seconds.style.transform = `rotate(${secondsDegrees}deg)`;

    const timeMins = now.getMinutes();
    const minsDegrees = ((timeMins / 60) * 360) + ((timeSeconds / 60) * 6);
    console.log(minsDegrees);
    minute.style.transform = `rotate(${minsDegrees}deg)`;

    const timeHour = now.getHours();
    const hourDegrees = ((timeHour / 12) * 360) + ((timeMins / 60) * 30);
    hour.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(calculateTheTime, 1000);

calculateTheTime();

 

  • Firstly we create our method calculateTheTime which we run every second using the setInterval method
  • Then get the DOM elements for the hour, minutes and seconds hands div.
  • Now we will get the current time and based upon it get the current second, minute and hour value
  • Now these value are the current time but in order to plot these on map we need to convert them into degree respective to 12:00 o’clock which will be the starting position
  • We then use the time and get the corresponding degrees. For example if its 15 seconds then the second’s hand need to be transformed by 90 degrees from 12 to indicate it
  • Once we have the degree rotation required which add it to the existing styles of these elements.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <p>Clock with Javascript and Css</p>
    <div class="clock-div">
        <div class="hand hour"></div>
        <div class="hand min"></div>
        <div class="hand second"></div>
        <div class="time time1">1</div>
        <div class="time time2">2</div>
        <div class="time time3">3</div>
        <div class="time time4">4</div>
        <div class="time time5">5</div>
        <div class="time time6">6</div>
        <div class="time time7">7</div>
        <div class="time time8">8</div>
        <div class="time time9">9</div>
        <div class="time time10">10</div>
        <div class="time time11">11</div>
        <div class="time time12">12</div>
    </div>
</body>
</html>

 

Also Read: Routing in Angular

CSS

html {
    text-align: center;
    font-size: 10px;
    background: #3E5151;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #DECBA4, #3E5151);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #DECBA4, #3E5151);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 2rem;
    min-height: 100vh;
    font-family: 'Pacifico', cursive;
}

p {
    color: white;
    font-size: 3rem;
}

.clock-div {
    position: relative;
    width: 20rem;
    height: 20rem;
    border: 4px solid yellow;
    border-radius: 50%;
    margin: 50px auto;
    outline: whitesmoke;
}

.clock-div .time {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

.clock-div .time1 {
    transform: rotate(30deg);
}

.clock-div .time2 {
    transform: rotate(60deg);
}

.clock-div .time3 {
    transform: rotate(90deg);
    color: yellow;
}

.clock-div .time4 {
    transform: rotate(120deg);
}

.clock-div .time5 {
    transform: rotate(150deg);
}

.clock-div .time6 {
    transform: rotate(180deg);
    color: yellow;
}

.clock-div .time7 {
    transform: rotate(210deg);
}

.clock-div .time8 {
    transform: rotate(240deg);
}

.clock-div .time9 {
    transform: rotate(270deg);
    color: yellow;
}

.clock-div .time10 {
    transform: rotate(300deg)
}

.clock-div .time11 {
    transform: rotate(330deg)
}

.clock-div .time12 {
    color: yellow;
}

.clock-div .hand {
    width: 5px;
    height: 38%;
    background: black;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom;
    transform: translateX(-50%);
    z-index: 10;
}

.clock-div .hour {
    height: 33%;
}

.clock-div .second {
    background-color: white;
    width: 2px;
}

 

  • For the clock, we will simply create a div and use the border-radius property to create a circular shape.
  • Set up some styling like border, outline, or background
  • For the time, we place the numbers absolutely in reference to the div
  • We then transform each of them again based upon their position in degrees respective to 12
  • For the hands, we first place them at the center of the page and then provide height and width values
  • Set up different height and width for all hands as usually the hour is the smallest and seconds is thinnest.

That’ it, the set interval method will be called every second and the hands will be transformed from the position via JS accordingly. Thus, creating an working clock using javascript on our web page.

One thought on “Build a Simple Clock using Javascript and CSS

Leave a Reply

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