Clock using HTML, CSS, and Javascript. Good looking example of Clock

Clock using HTML, CSS, and Javascript. Good looking example of Clock

Avatar

 BY TEJAS




Making this Clock Example, we use HTML5, CSS3, and Javascript. It is very easy to make this Clock we use very simple tags and attributes in this example.



This clock is a very clean and very good looking example of HTML, CSS, and Javascript.

For Making this type of clock you have HTML, CSS, and javascript files.
First, we write Html Codes in "HTML" file to add elements and format that elements
Then we add "CSS" to gives good style to our class for EX:- Colours, Shapes and this like things
After adding CSS we add Javascript file to Working of Clock. Without javascript clock is not work. It is very important.


In below video shows working of Clock


below here is a HTML, CSS, and Javascript codes.



clock.html :-
    
        <div class="clock">
        <div class="wrap">
              <span class="hour"></span>
              <span class="minute"></span>
              <span class="second"></span>
              <span class="dot"></span>
            <div>
          <div>
    


clock-style.css :-
    
     
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background: grey;
          }
          
          .clock {
            border-radius: 0%;
            background: tomato;
            font-family: "Montserrat";
            box-shadow: inset 2px 3px 8px 0 rgba(0, 0, 0, 0.1);
          }
          
          .wrap {
            overflow: hidden;
            position: relative;
            width: 350px;
            height: 350px;
            border-radius: 100%;
          }
          
          .minute,
          .hour {
            position: absolute;
            height: 100px;
            width: 6px;
            margin: auto;
            top: -27%;
            left: 0;
            bottom: 0;
            right: 0;
            background: black;
            transform-origin: bottom center;
            transform: rotate(0deg);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
            z-index: 1;
          }
          
          .minute {
            position: absolute;
            height: 130px;
            width: 4px;
            top: -38%;
            left: 0;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
            transform: rotate(90deg);
          }
          
          .second {
            position: absolute;
            height: 90px;
            width: 2px;
            margin: auto;
            top: -26%;
            left: 0;
            bottom: 0;
            right: 0;
            border-radius: 4px;
            background: white;
            transform-origin: bottom center;
            transform: rotate(180deg);
            z-index: 1;
          }
          
          .dot {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 12px;
            height: 12px;
            border-radius: 100px;
            background: white;
            border: 2px solid #1b1b1b;
            border-radius: 100px;
            margin: auto;
            z-index: 1;
          }

    
  
clock.js :-
    
        var inc = 1000;

        clock();
        
        function clock() {
          const date = new Date();
        
          const hours = ((date.getHours() + 11) % 12 + 1);
          const minutes = date.getMinutes();
          const seconds = date.getSeconds();
          
          const hour = hours * 30;
          const minute = minutes * 6;
          const second = seconds * 6;
          
          document.querySelector('.hour').style.transform = `rotate(${hour}deg)`
          document.querySelector('.minute').style.transform = `rotate(${minute}deg)`
          document.querySelector('.second').style.transform = `rotate(${second}deg)`
        }
        
        setInterval(clock, inc);
        
    
    
        <div class="clock">
        <div class="wrap">
              <span class="hour"></span>
              <span class="minute"></span>
              <span class="second"></span>
              <span class="dot"></span>
            <div>
          <div>
    


style.css :-
    
     
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background: grey;
          }
          
          .clock {
            border-radius: 0%;
            background: tomato;
            font-family: "Montserrat";
            box-shadow: inset 2px 3px 8px 0 rgba(0, 0, 0, 0.1);
          }
          
          .wrap {
            overflow: hidden;
            position: relative;
            width: 350px;
            height: 350px;
            border-radius: 100%;
          }
          
          .minute,
          .hour {
            position: absolute;
            height: 100px;
            width: 6px;
            margin: auto;
            top: -27%;
            left: 0;
            bottom: 0;
            right: 0;
            background: black;
            transform-origin: bottom center;
            transform: rotate(0deg);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
            z-index: 1;
          }
          
          .minute {
            position: absolute;
            height: 130px;
            width: 4px;
            top: -38%;
            left: 0;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
            transform: rotate(90deg);
          }
          
          .second {
            position: absolute;
            height: 90px;
            width: 2px;
            margin: auto;
            top: -26%;
            left: 0;
            bottom: 0;
            right: 0;
            border-radius: 4px;
            background: white;
            transform-origin: bottom center;
            transform: rotate(180deg);
            z-index: 1;
          }
          
          .dot {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 12px;
            height: 12px;
            border-radius: 100px;
            background: white;
            border: 2px solid #1b1b1b;
            border-radius: 100px;
            margin: auto;
            z-index: 1;
          }

    
  
clock.js :-
    
        var inc = 1000;

clock();

function clock() {
  const date = new Date();

  const hours = ((date.getHours() + 11) % 12 + 1);
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  
  const hour = hours * 30;
  const minute = minutes * 6;
  const second = seconds * 6;
  
  document.querySelector('.hour').style.transform = `rotate(${hour}deg)`
  document.querySelector('.minute').style.transform = `rotate(${minute}deg)`
  document.querySelector('.second').style.transform = `rotate(${second}deg)`
}

setInterval(clock, inc);

    
Search
Advertisement
Share With
Follow us on
Advertisement