Progress bar Digital Clock | Progress bar Digital Clock HTML CSS Javascript

Progress bar Digital Clock| Progress bar Digital Clock HTML CSS 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 it your hand has your left hand is 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 its a mathematical number on it then it is a digital clock or the clock that we used to watch on railway station 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 code with random. In this blog, we gonna learn how we can design a Progress bar Digital Clock Project Using HTML CSS JAVASCRIPT.



Let's have a look at our project.

Progress bar Digital Clock | Progress bar Digital Clock HTML CSS Javascript







As you are looking in the project preview how the thing is organized in the single container.
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 

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 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>  

CSS SECTION 

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 

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)`;  
 });  
A live preview of our project is attached below refer to this codepen
 

See the Pen Digital Clock by nissad (@nissad) on CodePen.


By this blog... 
We have learned how we can design a Progress bar Digital Clock Project HTML CSS JAVASCRIPT.
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

Post a Comment

Previous Post Next Post