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. Tue, 02 May 2023 11:56:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Build Analog Clock in HTML CSS & JavaScript https://www.codingnepalweb.com/build-clock-html-css-javascript/ https://www.codingnepalweb.com/build-clock-html-css-javascript/#respond Sat, 11 Mar 2023 21:11:21 +0000 https://www.codingnepalweb.com/?p=4115 Build Analog Clock in HTML CSS & JavaScript

Creating an analog clock using HTML, CSS, and JavaScript is an excellent way to improve your coding skills and gain valuable experience in web development.

Today in this blog, you will discover the process of building an Analog Clock in HTML, CSS, and JavaScript. Additionally, I will provide guidance on how to integrate dark and light mode options into the clock’s functionality. An intriguing aspect of the dark and light modes is that the selected theme will persist even if the page is refreshed or the file is reopened.

The analog clock that we will construct will have a user interface design that is identical to the image provided. Furthermore, all of the HTML, CSS, and JavaScript code that I will utilize to construct this clock will be made accessible to you.

Video tutorial of Analog Clock in HTML CSS & JavaScript

In this video tutorial, I have endeavored to make the code easy to comprehend for everyone by keeping it neat and straightforward. Furthermore, I have provided explanations for all of the code using comments.

I strongly suggest that you watch the video tutorial to build this Analog Clock using HTML, CSS, and JavaScript. However, if you prefer to skip the video tutorial, you may proceed with reading the blog.

Steps for creating Analog Clock

To create Analog Clock, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Analog Clock by clicking on the given download button.

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

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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>Analog Clock JavaScript</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <div class="clock">
        <label style="--i: 1"><span>1</span></label>
        <label style="--i: 2"><span>2</span></label>
        <label style="--i: 3"><span>3</span></label>
        <label style="--i: 4"><span>4</span></label>
        <label style="--i: 5"><span>5</span></label>
        <label style="--i: 6"><span>6</span></label>
        <label style="--i: 7"><span>7</span></label>
        <label style="--i: 8"><span>8</span></label>
        <label style="--i: 9"><span>9</span></label>
        <label style="--i: 10"><span>10</span></label>
        <label style="--i: 11"><span>11</span></label>
        <label style="--i: 12"><span>12</span></label>

        <div class="indicator">
          <span class="hand hour"></span>
          <span class="hand minute"></span>
          <span class="hand second"></span>
        </div>
      </div>

      <div class="mode-switch">Dark Mode</div>
    </div>
  </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@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
:root {
  --primary-color: #f6f7fb;
  --white-color: #fff;
  --black-color: #18191a;
  --red-color: #e74c3c;
}
body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
}
body.dark {
  --primary-color: #242526;
  --white-color: #18191a;
  --black-color: #fff;
  --red-color: #e74c3c;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.container .clock {
  display: flex;
  height: 400px;
  width: 400px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--white-color);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1), 0 25px 45px rgba(0, 0, 0, 0.1);
  position: relative;
}
.clock label {
  position: absolute;
  inset: 20px;
  text-align: center;
  transform: rotate(calc(var(--i) * (360deg / 12)));
}
.clock label span {
  display: inline-block;
  font-size: 30px;
  font-weight: 600;
  color: var(--black-color);
  transform: rotate(calc(var(--i) * (-360deg / 12)));
}
.container .indicator {
  position: absolute;
  height: 10px;
  width: 10px;
  display: flex;
  justify-content: center;
}
.indicator::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  z-index: 100;
  background: var(--black-color);
  border: 4px solid var(--red-color);
}
.indicator .hand {
  position: absolute;
  height: 130px;
  width: 4px;
  bottom: 0;
  border-radius: 25px;
  transform-origin: bottom;
  background: var(--red-color);
}
.hand.minute {
  height: 120px;
  width: 5px;
  background: var(--black-color);
}
.hand.hour {
  height: 100px;
  width: 8px;
  background: var(--black-color);
}
.mode-switch {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 400;
  display: inline-block;
  color: var(--white-color);
  background: var(--black-color);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

Third, paste the following codes into your script.js file.

// Get references to DOM elements
const body = document.querySelector("body"),
  hourHand = document.querySelector(".hour"),
  minuteHand = document.querySelector(".minute"),
  secondHand = document.querySelector(".second"),
  modeSwitch = document.querySelector(".mode-switch");

// check if the mode is already set to "Dark Mode" in localStorage
if (localStorage.getItem("mode") === "Dark Mode") {
  // add "dark" class to body and set modeSwitch text to "Light Mode"
  body.classList.add("dark");
  modeSwitch.textContent = "Light Mode";
}

// add a click event listener to modeSwitch
modeSwitch.addEventListener("click", () => {
  // toggle the "dark" class on the body element
  body.classList.toggle("dark");
  // check if the "dark" class is currently present on the body element
  const isDarkMode = body.classList.contains("dark");
  // set modeSwitch text based on "dark" class presence
  modeSwitch.textContent = isDarkMode ? "Light Mode" : "Dark Mode";
  // set localStorage "mode" item based on "dark" class presence
  localStorage.setItem("mode", isDarkMode ? "Dark Mode" : "Light Mode");
});

const updateTime = () => {
  // Get current time and calculate degrees for clock hands
  let date = new Date(),
    secToDeg = (date.getSeconds() / 60) * 360,
    minToDeg = (date.getMinutes() / 60) * 360,
    hrToDeg = (date.getHours() / 12) * 360;

  // Rotate the clock hands to the appropriate degree based on the current time
  secondHand.style.transform = `rotate(${secToDeg}deg)`;
  minuteHand.style.transform = `rotate(${minToDeg}deg)`;
  hourHand.style.transform = `rotate(${hrToDeg}deg)`;
};

// call updateTime to set clock hands every second
setInterval(updateTime, 1000);

//call updateTime function on page load
updateTime();

That’s all, now you’ve successfully created a project on Analog Clock. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/build-clock-html-css-javascript/feed/ 0 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