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.
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;}
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);
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
About Author :
Hello friends, I am Abhi Patel author & founder of Technovichar.com. I am a student of IT engineering. I like to research and write about new things even if it is from any field. You will continue to support us in this way, we will keep on bringing such interesting information for you.
0 Comments