Build a Digital Clock HTML ,CSS, and Javascript
Learners, In this article we are going to design a Progress bar Digital Clock. which is a basic javascript project based on the date-time functionality of javascript.
Learners I’m assuming that you will know and see this type of clock in your life as well because it is still available in the present era.
So, again let me quickly give me a hand watch your hand has your left hand bindup with the watch is it then observe it. if your watch has 3 needles then understand it as an analog clock or the clock that you watch on you wall of your home it is also an example of an analog.
If it is not and if you are able to observe a mathematical number on it then it is a digital clock or the clock that we used to watch at railway stations it is also an example of a digital clock.
Something similar we are going to design by today’s blog.
Hey learners, Welcome to our today’s blog with codewithrandom. In this blog, we gonna learn how we can design a Progress bar Digital Clock Project Using HTML, CSS, and JAVASCRIPT.
Let’s have a look at our Digital Clock project.
As you are looking in the project preview how the thing is organized in the single container.
Portfolio Website Using HTML ,CSS and Javascript Source Code
And it has quite a different appearance than a normal digital clock so the learner here designing depends on you and it is a real-time project the content of the project will change with respect to time.
HTML SECTION For Digital Clock
Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
We have the following part in the HTML section.
- First, we have a container that is div with the class time that will enclose all other parts of the whether project.
- Within the container, we have designed a three-circle shape with the help of SVG within the circle we will place our time and will put hr in first and succeeding min and sec and next circle.
Go through the below code👇 and run it in your IDE or where you used to design just HTML without CSS styling.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digital Clock</title> </head> <body> <div id="time"> <div class="circle" style="--clr: #ff2972"> <div class="dots hr_dot"></div> <svg> <circle cx="75" cy="75" r="70"></circle> <circle cx="75" cy="75" r="70" id="hh"></circle> </svg> <div id="hours">00</div> </div> <div class="circle" style="--clr: #fee800"> <div class="dots min_dot"></div> <svg> <circle cx="75" cy="75" r="70"></circle> <circle cx="75" cy="75" r="70" id="mm"></circle> </svg> <div id="minutes">00</div> </div> <div class="circle" style="--clr: #04fc43"> <div class="dots sec_dot"></div> <svg> <circle cx="75" cy="75" r="70"></circle> <circle cx="75" cy="75" r="70" id="ss"></circle> </svg> <div id="seconds">00</div> </div> <div class="ap"> <div id="ampm">AM</div> </div> </div> </body> </html>
Weather App Using Html,Css And Javascript (Source Code )
CSS SECTION For Digital Clock
By CSS we will design our container and will bring it to the center and then we will set the progress like shape in all three circles and also will design the inner content of the circle as font size, font color.
The Below code will analyze you more👇. So just add in your HTML half-complete file and wait to watch some magic.
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2f363e;
}
#time {
display: flex;
gap: 40px;
color: #FFF;
}
#time .circle {
position: relative;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
#time .circle svg {
position: relative;
width: 150px;
height: 150px;
transform: rotate(270deg);
}
#time .circle svg circle {
width: 100%;
height: 100%;
fill: transparent;
stroke: #191919;
stroke-width: 4;
/*transform: translate(5px, 5px);*/
}
#time .circle svg circle:nth-child(2) {
stroke: var(--clr);
stroke-dasharray: 440;
}
#time div {
position: absolute;
text-align: center;
font-weight: 500;
font-size: 1.5em;
}
#time div span {
position: absolute;
transform: translate(-50%, -10px);
font-size: 0.35em;
font-weight: 300;
letter-spacing: 0.1em;
text-transform: uppercase;
}
#time .ap {
position: relative;
font-size: 1em;
transform: translateX(-20px);
}
.dots {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
display: flex;
justify-content: center;
}
.dots::before {
content: '';
position: absolute;
top: -3px;
width: 15px;
height: 15px;
background: var(--clr);
border-radius: 50%;
box-shadow: 0 0 20px var(--clr), 0 0 60px var(--clr);
}JavaScript SECTION For Digital Clock
In the Javascript part, we will add magic logic as initially when our page will be loaded then only all three circles will preview with awesome design and in a static manner but we will use javascript functionality doesn’t he clock then it will come under dynamic behavior.
For observing this magic for this project then you should add the js file with the rest of the HTML and CSS file and enjoy this project and deploy it on Github.
setInterval(() => {
let hours = document.getElementById('hours');
let minutes = document.getElementById('minutes');
let seconds = document.getElementById('seconds');
let ampm = document.getElementById('ampm');
let hh = document.getElementById('hh');
let mm = document.getElementById('mm');
let ss = document.getElementById('ss');
let hr_dot = document.querySelector('.hr_dot');
let min_dot = document.querySelector('.min_dot');
let sec_dot = document.querySelector('.sec_dot');
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
let am = h >= 12 ? "PM" : "AM";
// convert 24hr clock to 12hr clock
if (h > 12) {
h = h - 12;
}
// add zero before single digit number
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
hours.innerHTML = h + "<br/><span>Hours</span>";
minutes.innerHTML = m + "<br/><span>Minutes</span>";
seconds.innerHTML = s + "<br/><span>Seconds</span>";
ampm.innerHTML = am;
hh.style.strokeDashoffset = 440 - (440 * h) / 12;
// 12 hrs clock
mm.style.strokeDashoffset = 440 - (440 * m) / 60;
ss.style.strokeDashoffset = 440 - (440 * s) / 60;
hr_dot.style.transform = `rotate(${h * 30}deg)`;
min_dot.style.transform = `rotate(${m * 6}deg)`;
sec_dot.style.transform = `rotate(${s * 6}deg)`;
});Final Output Of a Digital Clock HTML ,CSS, and JavaScript
By this blog… We have learned how we can design a Progress bar Digital Clock Project HTML CSS JAVASCRIPT.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Now I’m looking for your reviews.
So, How was the blog 😁, Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊
I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
You can follow me on Instagram
Written by @Ankit kumar
Code by @Nisad
