HELLO FRIENDS......Welcome to Technovichar.com. This Post is About How To Make Simple and Responsive clock Using HTML , CSS and Javascript. IF You Don't Know How To Make Simple and Responsive clock Using HTML , CSS and Javascript. Then This  Post  is For You . So Check Out Full Post In Details. 


Page Content :


  • Some Information About Responsive Clock
  • Basic Step How to Make Responsive Clock
  • HTML CSS AND JAVASCRIPT WITH SOURCE CODE
  • CHECK OUT CLOCK IS WORKING OR NOT  

 


 

Some Information About This Clock : 


  • This Clock is Made By  HTML , CSS and Javascript.
  • So That You can Easily Learn and Know How to Make This Type Of Clock.
  • To Make This Type of Clock Not Much Skill is Required. 
  • It Requires Some Basic Knowledge of HTML CSS and Javascript. 



SOME BASIC STEP TO MAKE RESPONSIVE CLOCK:


1) Make One HTML file and LINK css and Javascript Files.
2) Write HTML Code.
3) Write CSS Code To Make Html More Interactive.
4) Write Javascipt Code.
5) Check Out Full Design.




1) Make One HTML File and LINK css and Javascript Files 
File name is : Index.html  



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> My Clock</title>

    <link rel="stylesheet" href="style.css"> 

</head>

<body>

  <script src="index.js"></script>

</body>

</html>




2) Write HTML Code in Index.html File 

File name is : Index.html








<!DOCTYPE html>

<html lang="en">
<head>
    
  <meta charset="UTF-8">
   
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title> My Clock</title>

    <link rel="stylesheet" href="style.css"> 

</head>

<body>

    <div id="clock">

        <div id="hour"></div>

        <div id="min"></div>

        <div id="sec"></div>

    </div>

    <script src="index.js"></script>

</body>

</html>








3) Write CSS Code To Make HTML File Interactive 

File name is : style.css






#clock{
   
    position: relative;

    width:50vh;

    height:50vh;

    margin:auto;

     background-image:url("clock.png") ;

     background-repeat: no-repeat;

    background-size: cover;

    

}

#hour {
    background-color: black;

    height: 81px;

    width: 8px;
    position: absolute;

    top: 26%;

    left: 48%;

    transform-origin: bottom;
}

#min {
    background-color: black;

    height: 90px;

    width: 8px;

    position: absolute;

    top: 24%;


    left: 48%;

     border-radius: 10px;

    transform-origin: bottom;
}

#sec {
    background-color: black; 
                                                 
    height: 104px;

    width: 4px;

    position: absolute;

    top: 19%;

    left: 48%;

    border-radius: 10px;

    transform-origin: bottom;
}






CLOCK BACKGROUND USED IN THIS PROJECT




How To Make Simple and Responsive clock Using HTML and CSS




4) Write Javascript Code 

File name is : index.js







var hour = document.getElementById("hour")

var min =document.getElementById("min")

var sec= document.getElementById("sec");


    

setInterval(()=>{

    var d = new Date();

var h= d.getHours();

var m= d.getMinutes();

var s = d.getSeconds();

var h_rotate = 30*h +m/2;

var m_rotate = 6 * m;

var s_rotate =  6 * s;


    hour.style.transform=`rotate(${h_rotate}deg)`;

    min.style.transform=`rotate(${m_rotate}deg)`;

    sec.style.transform=`rotate(${s_rotate}deg)`;
     
    },1000);









Now Clock is ready !!!!!!!!!!!
How To Make Simple and Responsive clock

Some Other Clock Designs By Using Different Background :





Conclusion :


This is All About how to create How To Make Simple and Responsive clock Using HTML , CSS and Javascript .If You Like This Article Content Then Like and Share it With Your Friends and Family.



I HOPE THAT THIS


BLOG IS


HELPFUL FOR YOU.


THANKYOU FOR READING.




TAGS :HTML ,  CSS , JAVAscript , Responsive clock