Complete JavaScript Analog Clock
Exciting to make a analog clock using html css and javascript lets watch it start to finish.
The fisrt and main part of the analog clock is design so do create one with the help of adobe xd and adobe illustrator.
Now the next part is to convert the design into html css without using any image in it only use css and the help of javascript.
So the last and the final part to make this html css analog clock fully working using javascript to display real-time according to the region like a real watch.
Watch Video Tutorial
Live Preview
HTML Code
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Analog Wall Clock Using HTML CSS and JS</title>
<!-- Style Sheet -->
<link href="css/style.css" rel="stylesheet"></link>
</head>
<body>
<div class="clock">
<div class="clock-inner">
<div class="clock-design">
<div class="clock-numbers"></div>
<div class="clock-points"></div>
<div class="clock-pins">
<div class="houre-pin"></div>
<div class="minuts-pin"></div>
<div class="seconds-pin"></div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="js/main.js"></script>
<script src="js/working.js"></script>
</body>
</html>
CSS Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.clock{
width: 100%;
height: 100vh;
position: relative;
background: rgb(84,84,84);
background: radial-gradient(circle, rgba(34,34,34,0.8) 0%, rgba(84,84,84,1) 100%);
}
.clock-inner{
width: 400px;
height: 400px;
border: 5px solid rgba(255,214,10,1);
border-radius: 100%;
background: rgb(84,84,84);
background: radial-gradient(circle, rgba(84,84,84,1) 20%, rgba(34,34,34,1) 100%);
box-shadow: 0 0 15px rgba(0,0,0,0.6), inset 0 0 3px rgba(244, 140, 6, 0.8);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
}
.clock-design{
width: 370px;
height: 370px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 3px solid rgba(255,214,10,1);
border-radius: 100%;
overflow: hidden;
display: block;
margin: 0 auto;
}
.clock-numbers{
width: 350px;
height: 350px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(-2deg);
overflow: hidden;
display: block;
margin: 0 auto;
}
.clock-points{
width: 295px;
height: 295px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
display: block;
margin: 0 auto;
}
.point, .number{
top: 50%;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
border-radius: 100%;
padding: 5px;
}
.point span{
width: 4px;
height: 8px;
top: 0;
left: 50%;
display: block;
margin: 0 auto;
background: white;
}
.point:nth-child(5n+0) span{
width: 8px;
height: 8px;
top: 0;
left: 50%;
display: block;
margin: 0 auto;
background: rgba(255,214,10,1);
transform: rotate(45deg);
}
.number span{
font-size: 20px;
position: absolute;
top: 0;
left: 50%;
display: block;
margin: 0 auto;
color: rgb(128, 185, 24);
}
.clock-pins{
width: 80px;
height: 80px;
background: rgba(0,0,0,0.3);
border: 2px solid rgb(128, 185, 24);
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.clock-pins .houre-pin{
width: 12px;
height: 100px;
position: absolute;
top: -15%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: bottom;
border-radius: 0 0 20px 20px;
background: rgb(255,195,0);
background: linear-gradient(90deg, rgba(255,195,0,1) 50%, rgba(255,214,10,1) 50%);
}
.clock-pins .minuts-pin{
width: 10px;
height: 120px;
position: absolute;
top: -30%;
left: 50%;
transform-origin: bottom;
border-radius: 0 0 20px 20px;
background: rgb(255,195,0);
background: linear-gradient(90deg, rgba(255,195,0,1) 50%, rgba(255,214,10,1) 50%);
}
.clock-pins .houre-pin:before,
.clock-pins .minuts-pin:before{
content: "";
width: 18px;
height: 18px;
position: absolute;
background: rgb(255,195,0);
background: linear-gradient(90deg, rgba(255,195,0,1) 50%, rgba(255,214,10,1) 50%);
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
border-radius: 100%;
}
.clock-pins .houre-pin:after,
.clock-pins .minuts-pin:after{
content: "";
width: 16px;
height: 16px;
position: absolute;
background: rgb(255,195,0);
background: linear-gradient(45deg, rgba(255,195,0,1) 50%, rgba(255,214,10,1) 50%);
top: -12%;
left: 50%;
transform: translate(-50%, 0%) rotate(45deg);
}
.clock-pins .seconds-pin{
width: 3px;
height: 150px;
position: absolute;
left: 50%;
top: -147%;
transform: translate(-50%, 0%) rotate(90deg);
transform-origin: bottom;
border-radius: 20px;
background: red;
}
.clock-pins .seconds-pin:before{
content: "";
width: 20px;
height: 20px;
position: absolute;
background: red;
bottom: 0%;
left: 50%;
transform: translate(-50%, 50%);
border-radius: 100%;
}
.clock-pins .seconds-pin:after{
content: "";
width: 6px;
height: 30px;
position: absolute;
background: red;
bottom: -10%;
left: 50%;
transform: translate(-50%, 50%);
}Custom JavaScript Code For Design (main.js)
var numbers = document.querySelector('.clock-numbers');
var points = document.querySelector('.clock-points');
// Create Numeric Numbers
for (var i = 0; i < 12; i++) {
// Create div.
var div = document.createElement('div');
div.classList.add('number');
// Create span tag
var span = document.createElement('span');
span.innerText = +[i]+1; //i = 0 + 1 = 1...2..3..4..12
div.appendChild(span);
numbers.appendChild(div);
}
// Setting for Numbers
var deg = [];
var number = document.querySelectorAll('.number');
var numberSpan = document.querySelectorAll('.clock-numbers span');
for (var i = 0; i < number.length; i++) {
var newDeg = deg.slice(-1);
deg.push(+newDeg+30);
number[i].style.transform = "translate(0px, -50%) rotate("+deg[i]+"deg)";
numberSpan[i].style.transform = "rotate("+(-deg[i])+"deg)";
}
// Create Clock Points
for (var i = 0; i < 60; i++) {
// Create div.
var div = document.createElement('div');
div.classList.add('point');
// Create span tag
var span = document.createElement('span');
div.appendChild(span);
points.appendChild(div);
}
// Setting for Points
var deg1 = [];
var point = document.querySelectorAll('.point');
for (var i = 0; i < point.length; i++) {
var newDeg1 = deg1.slice(-1);
deg1.push(+newDeg1+6);
point[i].style.transform = "translate(0px, -50%) rotate("+deg1[i]+"deg)";
}
Custom JavaScript Code For Working (working.js)
var houres = document.querySelector(".houre-pin");
var minutes = document.querySelector(".minuts-pin");
var seconds = document.querySelector(".seconds-pin");
function clock(){
// Get current time using javascript inbuilt functions
var t = new Date();
var h = t.getHours();
var m = t.getMinutes();
var s = t.getSeconds();
//Create Custom Degrees for Pins
var hourDeg = +h*30+m/2;
var minDeg = m*6;
var secDeg = s*6;
houres.style.transform = "translate(-50%, -50%) rotate("+hourDeg+"deg)";
minutes.style.transform = "translate(-50%, -50%) rotate("+minDeg+"deg)";
seconds.style.transform = "rotate("+secDeg+"deg)";
}
setInterval(function(){ clock(); }, 1000);
0 Comments