Hey Friends! Today we are make a beautiful clock using html css and javascript. So i hope you like it. Here you can get my all videos source code this source code just paste in your code editor and save it filename.html
In this article, we will tell you how to make clock using html css and javascript. If you like this article of ours, then click on the video given below to watch the video related to this article and also subscribe to our channel.
So let’s know how to make clock using html css and javascript.
Create an Analog Clocks using HTML, CSS and JavaScript
We are going to build a real-time analog clocks using HTML, CSS, and JavaScript.
Prerequisite:
Basic understanding of HTML, CSS, and JavaScript.
Approach: We will create three files (HTML file, a CSS file, and JavaScript File), we also have an image of the clocks that will be used in the background, and on top of that, we will make an hour, minute, and second hand (using HTML and CSS). These hands will rotate as per the system time (we will use the predefined Date function of JavaScript to calculate the degree of rotations of each hand).
Clock Design
It is a simple file having the basic structure of the webpage and ID for the clock’s body and for the second, minute, hour hands.
CSS: The CSS is used just for making the clocks actually look a bit nicer. We have basically centered our clocks in the middle of the webpage.
JavaScript: The JavaScript file will provide the logic behind the rotation of the hands.
For Example:
First we have selected the hour, minute, and second from HTML.
To get the current time we have used the Date() object provided by the JavaScript. This will give the current seconds, minutes, and hours respectively.
Now, we have got our hour, minute, and second, and we know that the clocks rotates 360 degrees. So, we will convert to convert the rotation of the hands of the clocks into degrees. The degree calculation is based on a simple unary method.
HTML for Clock
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for stand fan project make a fast with visual studio code editor.
Now we will learn how to write html for stand fan. So let’s know that first you have to go to the body tag, after that you will take the div tag and together with the class whose name is to be named motor. Then after that we will take div tag again and we will name its class as stand. Again we will take div tag and name its class as bottom stand after that we will take div tag again and we will name its class as petal1. Again we will take div tag and name its class as Pankhdi 2, then again take div tag and name its class as Pankdi 3. Now in the last we will take the div tag and name its class as center.
CSS for Clock Design
Now we will design the stand fan using css. So let’s design, first of all you have to know how we write css. We write css in 3 ways first we can write inline and second we can write it internal and third we can write it external so that we have to create new css file but in this article we have used internal css so that We will not have to create css file separately and we can work inside the same file.
First of all we have to go inside the head section and going inside we have to take style tag then we will take * tag and by applying curly braces open and close in it we will keep margin as 0 and padding as 0. And will keep its box sizing border box. Then we will take the body tag and flex the display in it, then we will center the justify content, after that we will center the align items and also make the background color rgb.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(22, 22, 22);
}
Source Code..
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock by Code with Nizami</title>
<style>
body{
background-color: rgb(220, 219, 221);
padding: 0px;
margin: 0px;
}
.clock{
width: 400px;
height: 400px;
border-radius: 50%;
background-color: rgb(99, 196, 142);
margin: 50px auto 0px auto;
position: relative;
border: 3px solid rgb(165, 6, 6);
box-shadow: 3px 3px 8px rgb(82, 82, 82);
}
.center{
background-color: rgb(95, 64, 121);
position: absolute;
left: 50%;
bottom: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
transform: translate(-50%,50%);
border: 1px solid black;
}
.set{
--r: 0;
position: absolute;
left: 50%;
bottom: 50%;
transform: translate(-50%) rotate(calc(var(--r)*1deg));
transform-origin: bottom;
border-radius: 5px 5px 0px 0px;
}
.H{width: 15px; height: 25%; background-color: #000;}
.M{width: 10px; height: 35%; background-color: #000;}
.S{width: 5px; height: 45%; background-color: rgb(131, 4, 4);}
.T{
border: 1px solid #fff8dc;
background-color: #fff;
padding: 5px;
display: block;
box-shadow: inset 0px 2px 5px rgba(0,0,0,.4);
border-radius: 5px;
width: 90px;
height: 18px;
font-weight: bold;
font-style: oblique;
font-size: 22px;
margin: 186px 0px 0px 50px;
}
.T small{
color: red;
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
font-weight: bold;
font-style: oblique;
font-size: 24px;
margin-bottom: 5px;
}
.clock ul{
list-style: none;
padding: 0;
}
.clock ul li{
position: absolute;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 20px;
color: rgb(14, 13, 13);
}
.clock ul li:nth-child(1){
right: 25%;
top: 10%;
text-shadow: 3px 3px 5px black;
}
.clock ul li:nth-child(2){
right: 10%;
top: 25%;
text-shadow: 3px 3px 5px black;
}
.clock ul li:nth-child(3){
right: 5%;
top: 48%;
font-size: 40px;
font-style: oblique;
color: rgb(117, 4, 4);
text-shadow: 3px 3px 5px black;
font-weight: bold;
}
.clock ul li:nth-child(4){
right: 10%;
top: 68%;
text-shadow: 3px 3px 5px black;
}
.clock ul li:nth-child(5){
right: 26%;
top: 85%;
text-shadow: 3px 3px 5px black;
}
.clock ul li:nth-child(6){
right: 47%;
top: 89%;
font-size: 40px;
font-style: oblique;
color: rgb(117, 4, 4);
text-shadow: 3px 3px 5px black;
font-weight: bold;
}
.clock ul li:nth-child(7){
right: 69%;
top: 85%;
text-shadow: 3px 3px 5px black;
}
.clock ul li:nth-child(8){
right: 85%;
top: 68%;
text-shadow: 3px 3px 5px black;
}
.clock ul li:nth-child(9){
right: 90%;
top: 48%;
font-size: 40px;
font-style: oblique;
color: rgb(117, 4, 4);
text-shadow: 3px 3px 5px black;
font-weight: bold;
}
.clock ul li:nth-child(10){
right: 85%;
top: 25%;
text-shadow: 3px 3px 5px black;
}
.clock ul li:nth-child(11){
right: 70%;
top: 10%;
text-shadow: 3px 3px 5px black;
}
.clock ul li:nth-child(12){
right: 50%;
top: 5%;
font-size: 40px;
font-style: oblique;
color: rgb(117, 4, 4);
text-shadow: 3px 3px 5px black;
font-weight: bold;
}
ul p{
font-size: 16px;
color: rgb(231, 227, 227);
margin: 80px 0px 0px 44%;
font-family: lucida;
text-shadow: 2px 2px 5px black;
}
.pendi{
width: 300px;
height: 100px;
border: 1px solid black;
margin-left: 527px;
border-radius: 100px 100px 0px 0px;
background-color: rgb(76, 75, 129);
box-shadow: 3px 3px 8px black;
}
</style>
</head>
<body>
<div>
<div data-hour></div>
<div data-minute></div>
<div data-second></div>
<div></div>
<div></div>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<p>Quartaz</p>
</ul>
</div>
<div></div>
<script>
setInterval(setClock,1000);
const hour = document.querySelector('.H')
const minute = document.querySelector('.M')
const second = document.querySelector('.S')
const time = document.querySelector('.T')
function setClock(){
const nowDate = new Date();
const sR = nowDate.getSeconds()/60;
const mR = (sR+nowDate.getMinutes())/60;
const hR = (mR+nowDate.getHours())/12;
const sec = nowDate.getSeconds();
const min = nowDate.getMinutes();
const hours = nowDate.getHours()
setRotation(hour,hR);
setRotation(minute,mR);
setRotation(second,sR);
time.innerHTML = '<span>' + '<strong>' +hours+ '</strong>' + ':' +min+ ':' + '<small>' +sec+ '</small>' + '</span>';
}
function setRotation(element,rR){
element.style.setProperty('--r',(rR*360));
}
setClock();
</script>
</body>
</html>Watch video related this article…
