Clock – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Thu, 05 Jan 2023 11:36:06 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Build A Simple Alarm Clock in HTML CSS & JavaScript https://www.codingnepalweb.com/simple-alarm-clock-html-javascript/ https://www.codingnepalweb.com/simple-alarm-clock-html-javascript/#comments Wed, 15 Jun 2022 13:26:42 +0000 https://www.codingnepalweb.com/?p=2451 Build A Simple Alarm Clock in HTML CSS & JavaScript

Hey friends, today in this blog, you’ll learn how to Build A Simple Alarm Clock in HTML CSS & JavaScript. In the earlier blog, I had shared how to Build A Digital Clock in JavaScript, and now it’s time to create a Digital Clock with an Alarm System.

In this Alarm Clock, as seen in the preview image, there is a digital clock that shows the current time along with some alarm options hour, minutes, am/pm. Users can select a time and set alarms for any time, whether AM or PM.

If you’re feeling difficulty to understand what I’m saying, you can watch a demo or full video tutorial of this Alarm Clock in JavaScript.

Video Tutorial of Alarm Clock in JavaScript

In the above video, you saw the demo of this alarm clock and how I built it using HTML CSS & JavaScript. If you’re already familiar with JavaScript Date() object, then this alarm code will be easy for you to understand.

If you liked this Alarm Clock and want to get source codes or files, you can easily get them from the bottom of this page. But, if you’re a beginner, I suggest you watch to the above video 2 or 3 times because, in the video, I’ve explained each JavaScript line with written comments that helps you to understand code more easily.

You might like this:

Steps to Build An Alarm Clock in JavaScript

To build an Alarm Clock using HTML CSS & JavaScript, follow the given steps line by line:

  • Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
  • Create an index.html file. The file name must be index and its extension .html
  • Create a style.css file. The file name must be style and its extension .css
  • Create a script.js file. The file name must be script and its extension .js
  • Download the folder that contains the Ringtone and Clock Icon from Google Drive and put it in the same project folder.

First, paste the following codes into your index.html file:

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Alarm Clock in JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <img src="./files/clock.svg" alt="clock">
      <h1>00:00:00 PM</h1>
      <div class="content">
        <div class="column">
          <select>
            <option value="Hour" selected disabled hidden>Hour</option>
          </select>
        </div>
        <div class="column">
          <select>
            <option value="Minute" selected disabled hidden>Minute</option>
          </select>
        </div>
        <div class="column">
          <select>
            <option value="AM/PM" selected disabled hidden>AM/PM</option>
          </select>
        </div>
      </div>
      <button>Set Alarm</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Second, paste the following codes into your style.css file:

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body, .wrapper, .content{
  display: flex;
  align-items: center;
  justify-content: center;
}
body{
  padding: 0 10px;
  min-height: 100vh;
  background: #4A98F7;
}
.wrapper{
  width: 440px;
  padding: 30px 30px 38px;
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.wrapper img{
  max-width: 103px;
}
.wrapper h1{
  font-size: 38px;
  font-weight: 500;
  margin: 30px 0;
}
.wrapper .content{
  width: 100%;
  justify-content: space-between;
}
.content.disable{
  cursor: no-drop;
}
.content .column{
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #bfbfbf;
  width: calc(100% / 3 - 5px);
}
.content.disable .column{
  opacity: 0.6;
  pointer-events: none;
}
.column select{
  width: 100%;
  height: 53px;
  border: none;
  outline: none;
  background: none;
  font-size: 19px;
}
.wrapper button{
  width: 100%;
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  padding: 17px 0;
  margin-top: 20px;
  border-radius: 5px;
  background: #4A98F7;
}

Last, paste the following codes into your script.js file:

const currentTime = document.querySelector("h1"),
content = document.querySelector(".content"),
selectMenu = document.querySelectorAll("select"),
setAlarmBtn = document.querySelector("button");

let alarmTime, isAlarmSet,
ringtone = new Audio("./files/ringtone.mp3");

for (let i = 12; i > 0; i--) {
    i = i < 10 ? `0${i}` : i;
    let option = `<option value="${i}">${i}</option>`;
    selectMenu[0].firstElementChild.insertAdjacentHTML("afterend", option);
}

for (let i = 59; i >= 0; i--) {
    i = i < 10 ? `0${i}` : i;
    let option = `<option value="${i}">${i}</option>`;
    selectMenu[1].firstElementChild.insertAdjacentHTML("afterend", option);
}

for (let i = 2; i > 0; i--) {
    let ampm = i == 1 ? "AM" : "PM";
    let option = `<option value="${ampm}">${ampm}</option>`;
    selectMenu[2].firstElementChild.insertAdjacentHTML("afterend", option);
}

setInterval(() => {
    let date = new Date(),
    h = date.getHours(),
    m = date.getMinutes(),
    s = date.getSeconds(),
    ampm = "AM";
    if(h >= 12) {
        h = h - 12;
        ampm = "PM";
    }
    h = h == 0 ? h = 12 : h;
    h = h < 10 ? "0" + h : h;
    m = m < 10 ? "0" + m : m;
    s = s < 10 ? "0" + s : s;
    currentTime.innerText = `${h}:${m}:${s} ${ampm}`;

    if (alarmTime === `${h}:${m} ${ampm}`) {
        ringtone.play();
        ringtone.loop = true;
    }
});

function setAlarm() {
    if (isAlarmSet) {
        alarmTime = "";
        ringtone.pause();
        content.classList.remove("disable");
        setAlarmBtn.innerText = "Set Alarm";
        return isAlarmSet = false;
    }

    let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`;
    if (time.includes("Hour") || time.includes("Minute") || time.includes("AM/PM")) {
        return alert("Please, select a valid time to set Alarm!");
    }
    alarmTime = time;
    isAlarmSet = true;
    content.classList.add("disable");
    setAlarmBtn.innerText = "Clear Alarm";
}

setAlarmBtn.addEventListener("click", setAlarm);

That’s all; now you’ve successfully Build An Alarm Clock in HTML, CSS, and JavaScript. If you encounter any problems or your code is not working as expected, you can download the source code files for this Alarm Clock by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.

 

]]> https://www.codingnepalweb.com/simple-alarm-clock-html-javascript/feed/ 5 Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript https://www.codingnepalweb.com/digital-clock-using-javascript/ https://www.codingnepalweb.com/digital-clock-using-javascript/#comments Sat, 29 Aug 2020 08:39:00 +0000 https://codingnepalweb.com/2020/08/29/digital-clock-with-colorful-glowing-effect-using-html-css-javascript/ Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Working Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript. Earlier I have also shared a blog on how to create a Digital Clock using JavaScript but in that clock, there wasn’t a glowing effect and now it’s time to create a colorful glowing effect on the digital clock.

A digital clock or watch in which the hours, minutes, and sometimes seconds are indicated by digits, as opposed to an analog clock, where the time is indicated by the positions of rotating hands. If you’re searching for Working Analog Clock, I have also created a blog on how to create a Working Analog Clock.

In this program (Digital Clock with Colorful Glowing Effect), on the webpage, there is a digital clock that is displaying the real-time with a colorful gradient glowing background and text effect. Generally, this clock takes real-time from our pcs/computers, not from the server, and shows on the webpage. Using Javascript new Date() method I fetched real-time from my current PC.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Digital Clock with Colorful Glowing Effect ).

Video Tutorial of Digital Clock with Colorful Glowing Effect 

 
In the video, you have seen the working digital clock which is displaying real-time and I hope you have understood the basic codes behind creating this program. As you have seen in the video, I used the only CSS to create a glowing background effect and animate it with the CSS @keyframes property. But to show the real-time I used pure JavaScript.

If you’re a beginner, you can also create this digital clock or the glowing effect because there are no vast codes of CSS and JavaScript on this program. If you like this program (Custom Checkbox Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Working Clock in your HTML pages and websites.

You might like this:

Digital Clock with Colorful Glowing Effect [Source Codes]

To create this program (Digital Clock with Colorful Glowing Effect). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Digital Clock with Glowing Effect | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="wrapper">
         <div class="display">
            <div id="time"></div>
         </div>
         <span></span>
         <span></span>
      </div>
      <script>
         setInterval(()=>{
           const time = document.querySelector(".display #time");
           let date = new Date();
           let hours = date.getHours();
           let minutes = date.getMinutes();
           let seconds = date.getSeconds();
           let day_night = "AM";
           if(hours > 12){
             day_night = "PM";
             hours = hours - 12;
           }
           if(seconds < 10){
             seconds = "0" + seconds;
           }
           if(minutes < 10){
             minutes = "0" + minutes;
           }
           if(hours < 10){
             hours = "0" + hours;
           }
           time.textContent = hours + ":" + minutes + ":" + seconds + " "+ day_night;
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.wrapper{
  height: 100px;
  width: 360px;
  position: relative;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  border-radius: 10px;
  cursor: default;
  animation: animate 1.5s linear infinite;
}
.wrapper .display,
.wrapper span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper .display{
  z-index: 999;
  height: 85px;
  width: 345px;
  background: #1b1b1b;
  border-radius: 6px;
  text-align: center;
}
.display #time{
  line-height: 85px;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 1.5s linear infinite;
}
@keyframes animate {
  100%{
    filter: hue-rotate(360deg);
  }
}
.wrapper span{
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: inherit;
}
.wrapper span:first-child{
  filter: blur(7px);
}
.wrapper span:last-child{
  filter: blur(20px);
}

That’s all, now you’ve successfully created a Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/digital-clock-using-javascript/feed/ 36 Working Analog Clock using HTML CSS & JavaScript https://www.codingnepalweb.com/working-analog-clock-javascript/ https://www.codingnepalweb.com/working-analog-clock-javascript/#comments Tue, 05 May 2020 15:24:00 +0000 https://codingnepalweb.com/2020/05/05/working-analog-clock-using-html-css-javascript/ Working Analog Clock using HTML CSS and Javascript

Hello readers, Today in this blog you’ll learn how to build a Working Analog Clock using HTML CSS & Javascript. Earlier I have shared a Working Digital Clock using HTML CSS & Javascript, now it’s time to create a Working Analog Clock using Javascript.

A clock or watch is called “analog” when it has moving hands and (normally) hours marked from 1 to 12 to show you the time. Some have Roman Numerals (I, II, III, etc) instead, or no numbers at all.

As you can see in the image, this is an Analog Clock that is based on HTML CSS & Javascript. There are 12 marks for showing times 1 to 12 and 3 handles for showing minutes, hours, and second. As usual, the hour handle is small, and the minute handle is bigger than that, and the second handle larger overall.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Working Analog Clock).

Video Tutorial of Working Analog Clock using JavaScript

As you see in the video this is a real-time working clock. This time takes from your PC, not from the server. I am sharing this live clock program, which functions is work in javascript. I had already shared many Javascript projects, click here to watch them all.

If you like this program (Working Analog Clock) and want to get the source codes of this program. You can easily get it from the download link which is given below.

Working Analog Clock in HTML CSS & JavaScript [Source Codes]

To create this program (Working Analog Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Neumorphism Analog Clock | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="clock">
         <div class="center-nut"></div>
         <div class="center-nut2"></div>
         <div class="indicators">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
         </div>
         <div class="sec-hand">
            <div class="sec"></div>
         </div>
         <div class="min-hand">
            <div class="min"></div>
         </div>
         <div class="hr-hand">
            <div class="hr"></div>
         </div>
      </div>
      <script>
         const sec = document.querySelector(".sec");
         const min = document.querySelector(".min");
         const hr = document.querySelector(".hr");
         setInterval(function(){
           let time  = new Date();
           let secs = time.getSeconds() * 6;
           let mins = time.getMinutes() * 6;
           let hrs = time.getHours() * 30;
           sec.style.transform = `rotateZ(${secs}deg)`;
           min.style.transform = `rotateZ(${mins}deg)`;
           hr.style.transform = `rotateZ(${hrs+(mins/12)}deg)`;
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}
.clock{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dde1e7;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
.clock:before{
  position: absolute;
  content: '';
  height: 220px;
  width: 220px;
  background: #dde1e7;
  border-radius: 50%;
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.clock:after{
  position: absolute;
  content: '';
  height: 120px;
  width: 120px;
  background: #dde1e7;
  border-radius: 50%;
  box-shadow: -1px -1px 5px #ffffff73,
              1px 1px 3px rgba(94,104,121,0.288);
}
.clock .center-nut{
  height: 15px;
  width: 15px;
  background: #404040;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
}
.clock .center-nut2{
  height: 9px;
  width: 9px;
  background: #3498db;
  border-radius: 50%;
  z-index: 15;
  position: absolute;
}
.indicators div{
  position: absolute;
  width: 2px;
  height: 5px;
  background: #404040;
}
.indicators div:nth-child(1){
  transform: rotate(30deg) translateY(-100px);
}
.indicators div:nth-child(2){
  transform: rotate(60deg) translateY(-100px);
}
.indicators div:nth-child(3){
  background: #3498db;
  transform: rotate(90deg) translateY(-100px);
}
.indicators div:nth-child(4){
  transform: rotate(120deg) translateY(-100px);
}
.indicators div:nth-child(5){
  transform: rotate(150deg) translateY(-100px);
}
.indicators div:nth-child(6){
  background: #3498db;
  transform: rotate(180deg) translateY(-100px);
}
.indicators div:nth-child(7){
  transform: rotate(210deg) translateY(-100px);
}
.indicators div:nth-child(8){
  transform: rotate(240deg) translateY(-100px);
}
.indicators div:nth-child(9){
  background: #3498db;
  transform: rotate(270deg) translateY(-100px);
}
.indicators div:nth-child(10){
  transform: rotate(300deg) translateY(-100px);
}
.indicators div:nth-child(11){
  transform: rotate(330deg) translateY(-100px);
}
.indicators div:nth-child(12){
  background: #3498db;
  transform: rotate(360deg) translateY(-100px);
}
.sec-hand,.min-hand,.hr-hand{
  position: absolute;
}
.sec-hand, .sec{
  height: 180px;
  width: 180px;
  z-index: 6;
}
.min-hand, .min{
  height: 140px;
  width: 140px;
  z-index: 5;
}
.hr-hand, .hr{
  height: 110px;
  width: 110px;
  z-index: 4;
}
.sec,.min,.hr{
  display: flex;
  justify-content: center;
  position: absolute;
}
.sec:before{
  position: absolute;
  content: '';
  height: 110px;
  width: 3px;
  background: #3498db;
}
.sec:after{
  position: absolute;
  content: '';
  height: 35px;
  width: 7px;
  background: #3498db;
  top: 105px;
  border-radius: 5px;
}
.min:before{
  position: absolute;
  content: '';
  width: 1px;
  top: -15px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 60px solid #e95949;
}
.min:after{
  position: absolute;
  content: '';
  width: 3px;
  top: 40px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 30px solid #e95949;
}
.hr:before{
  position: absolute;
  content: '';
  width: 1px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 35px solid #303030;
}
.hr:after{
  position: absolute;
  content: '';
  width: 3px;
  top: 34px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 25px solid #303030;
}

That’s all, now you’ve successfully created a Working Analog Clock using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/working-analog-clock-javascript/feed/ 13 Digital Clock using HTML CSS & Javascript https://www.codingnepalweb.com/digital-clock-using-javascript-2/ https://www.codingnepalweb.com/digital-clock-using-javascript-2/#comments Sun, 26 Apr 2020 15:47:00 +0000 https://codingnepalweb.com/2020/04/26/digital-clock-using-html-css-javascript/ Digital Clock using HTML CSS and Javascript

Hello readers, Today in this blog you’ll learn how to create a Digital Working Clock using Javascript. Earlier I have shared a Working Analog Clock using HTML CSS & Javascript, now it’s time to create a Digital Clock using Javascript.

JavaScript gets real-time from your device and displays it on the webpage. And this post is about how JavaScript gets the time and displays with some basics ways. As you can see in the image, there is a real-time digital clock, which means you can see time in number with hour, minutes, and seconds.

And the clock run normally you don’t have to refresh the webpage to see the updated time. There is just a time in numbers format and am pm indicator. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Digital Clock).

Video Tutorial of Digital Clock using Javascript

 
As you can see in the video this is a real-time working digital clock with ‘Am’ and ‘PM’ indicators. I hope this video help beginner to understand the code behind the working digital clock.

You can use it in your sites and projects after a few changes of codes according to your requirements. And I believe you can take this digital clock at the next level with your creativity. If you like this program (Digital Clock) and want to get the source codes of this program. You can easily get it from the download link which is given below.

Working Digital Clock using Javascript [Source Codes]

To create this program (Digital Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Digital Clock Javascript | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="clock">
      <div class="display">
</div>
</div>
<script>
      setInterval(function(){
        const clock = document.querySelector(".display");
        let time = new Date();
        let sec = time.getSeconds();
        let min = time.getMinutes();
        let hr = time.getHours();
        let day = 'AM';
        if(hr > 12){
          day = 'PM';
          hr = hr - 12;
        }
        if(hr == 0){
          hr = 12;
        }
        if(sec < 10){
          sec = '0' + sec;
        }
        if(min < 10){
          min = '0' + min;
        }
        if(hr < 10){
          hr = '0' + hr;
        }
        clock.textContent = hr + ':' + min + ':' + sec + " " + day;
      });
    </script>

  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #131419;
}
.clock{
  background: #131419;
  height: 120px;
  
  line-height: 120px;
  text-align: center;
  padding: 0 30px;
  box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
               3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display{
  font-size: 60px;
  color: cyan;
  letter-spacing: 5px;
  font-family: 'Orbitron', sans-serif;
}

That’s all, now you’ve successfully created a Digital Clock using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/digital-clock-using-javascript-2/feed/ 5 Build A Working Analog Clock using HTML CSS & Javascript https://www.codingnepalweb.com/build-working-analog-clock-javascript/ https://www.codingnepalweb.com/build-working-analog-clock-javascript/#comments Sun, 26 Apr 2020 07:09:00 +0000 https://codingnepalweb.com/2020/04/26/build-a-working-analog-clock-using-html-css-javascript/ Build A Working Analog Clock using HTML CSS and JavascriptHello reader, Today in this blog you’ll learn how to Build A Working Analog Clock using HTML CSS, and Javascript. Previously I have shared a Responsive Footer Section Design using HTML and CSS. Now it’s time to make an analog clock using javascript.
 
You can tell JavaScript is the core of any web page, in other words, without JavaScript, a web page just is a dead body. We can create so many basic to high-level programs only using JavaScript (without any javascript libraries).

As you can in the image, this is an Analog Clock using HTML CSS & Javascript. This is a real-time clock, not a dummy. You can find the clock program, but you will get most just CSS stuff. Just a vector of the clock. But I am sharing a live clock, which functions as work in javascript.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Build A Working Analog Clock).

Video Tutorial of A Working Analog Clock in Javascript

 
I hope your doubts are clear now. As you see in the video this is a real-time working clock. This time takes from your PC, not from the server. If you’re feeling difficulty to do code of this clock, Don’t worry you can easily get the source code of this Javascript Clock from the download link which is given below.

If you like this program (Build A Working Analog Clock) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Working Analog Clock using Javascript [Source Codes]

To build this project (Build A Working Analog Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Clock</title>
      <link rel="stylesheet" href="style.css">
      <style id="clock-animate"></style>
   </head>
   <body>
      <div class="clock">
         <div class="center-nut"></div>
         <div class="center-nut2"></div>
         <div class="indicator">
            <div>
            </div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
         </div>
         <div class="sec-hand"></div>
         <div class="min-hand"></div>
         <div class="hr-hand"></div>
      </div>
      <script>
         (function() {
           var time = new Date(), //we get this time from our pc time not from server
           second = time.getSeconds() / 60 * 360,
           minute = time.getMinutes() / 60 * 360 + time.getSeconds() / 60 *6,
           hour = time.getHours() / 12 * 360 + time.getMinutes() /60 * 30,
           animation = [
             "@keyframes sec-hand{from{transform: rotate(" + second + "deg);}to{transform: rotate(" + (second  + 360) + "deg);}}",
             "@keyframes min-hand{from{transform: rotate(" + minute + "deg);}to{transform: rotate(" + (minute + 360) + "deg);}}",
             "@keyframes hr-hand{from{transform: rotate(" + hour + "deg);}to{transform: rotate(" + (hour + 360) + "deg);}}"
           ].join("");
           document.querySelector("#clock-animate").innerHTML = animation;
         })();
         
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #00a2ff;
}
.clock{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  background: #e9fcfc;
  border-radius: 50%;
  border: 16px solid #303030;
  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.8);
}
.clock:before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  width: 259px;
  height: 259px;
  border: 6px solid #202020;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.clock:after{
  position: absolute;
  content: '';
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background: #59c3ff;
  z-index: 1;
}
.center-nut,.center-nut2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.center-nut{
  height: 15px;
  width: 15px;
  background: #262626;
  z-index: 2;
}
.center-nut2{
  width: 9px;
  height: 9px;
  background: red;
  z-index: 6;
}
.indicator div{
  position: absolute;
  width: 2px;
  height: 5px;
  background: #404040;
}
.indicator div:nth-child(1) {
  transform: rotate(30deg) translateY(-113px);
}
.indicator div:nth-child(2) {
  transform: rotate(60deg) translateY(-113px);
}
.indicator div:nth-child(3) {
  transform: rotate(90deg) translateY(-113px);
  background: red;
}
.indicator div:nth-child(4) {
  transform: rotate(120deg) translateY(-113px);
}
.indicator div:nth-child(5) {
  transform: rotate(150deg) translateY(-113px);
}
.indicator div:nth-child(6) {
  transform: rotate(180deg) translateY(-113px);
  background: red;
}
.indicator div:nth-child(7) {
  transform: rotate(210deg) translateY(-113px);
}
.indicator div:nth-child(8) {
  transform: rotate(240deg) translateY(-113px);
}
.indicator div:nth-child(9) {
  transform: rotate(270deg) translateY(-113px);
  background: red;
}
.indicator div:nth-child(10) {
  transform: rotate(300deg) translateY(-113px);
}
.indicator div:nth-child(11) {
  transform: rotate(330deg) translateY(-113px);
}
.indicator div:nth-child(12) {
  transform: rotate(360deg) translateY(-113px);
  background: red;
}
.sec-hand{
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 5;
  animation: sec-hand 60s linear infinite;
}
.sec-hand:before{
  position: absolute;
  content: '';
  height: 130px;
  width: 3px;
  left: -1px;
  top: -25px;
  background: red;
  border-radius: 3px;
}
.sec-hand:after{
  position: absolute;
  content: '';
  height: 45px;
  width: 7px;
  left: -3px;
  top: -55px;
  background: red;
  border-radius: 3px;
}
.min-hand{
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 4;
  animation: min-hand 3600s linear infinite;
}
.min-hand:before{
  position: absolute;
  content: '';
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 70px solid #303030;
  left: -3px;
  top: -95px;
  width: 1px;
  height: 1px;
}
.min-hand:after{
  position: absolute;
  content: '';
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 25px solid #303030;
  left: -3px;
  top: -25px;
  width: 3px;
  height: 1px;
}
.hr-hand{
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 3;
  animation: hr-hand 43200s linear infinite;
}
.hr-hand:before{
  position: absolute;
  content: '';
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 55px solid #303030;
  left: -3px;
  top: -75px;
  width: 1px;
  height: 1px;
}
.hr-hand:after{
  position: absolute;
  content: '';
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 20px solid #303030;
  left: -3px;
  top: -20px;
  width: 3px;
  height: 1px;
}

That’s all, now you’ve successfully Build A Working Analog Clock using HTML CSS & Javascript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/build-working-analog-clock-javascript/feed/ 2