Create Analog Wall Clock with HTML
CSS and JavaScript
A clock in which the hours, minutes, and sometimes seconds are indicated by hands on a dial. Compare digital clock.
Video Tutorial of Analog Wall Clock
Analog Wall Clock [Source Codes]
To Create Analog Wall Clock with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
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 style 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 source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="style.css">
- <title>Analog Wall Clock</title>
- </head>
- <body>
- <div class="clock">
- <div class="numbers">
- <div class="twelve">12</div>
- <div class="three">3</div>
- <div class="six">6</div>
- <div class="nine">9</div>
- </div>
- <div class="arrows">
- <div class="hour"></div>
- <div class="minute"></div>
- <div class="second"></div>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- body {
- margin: 0;
- padding: 0;
- font-family: 'Courier New', Courier, monospace;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
- }
-
- .clock {
- width: 350px;
- height: 350px;
- background-color:#CFD0D0;
- border-radius: 100%;
- border: 8px solid #606060;
- box-shadow: 4px 5px 8px rgba(0,0,0,.6);
- position: relative;
- }
- .numbers div {
- position: absolute;
- font-size: 40px;
- font-weight: bold;
- color: #000;
- text-shadow: 1px 1px 2px rgba(0,0,0,.7);
- }
-
- .twelve {
- top: 6px;
- left: 50%;
- transform: translateX(-50%);
- }
-
- .three {
- right: 6px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- .six {
- bottom: 6px;
- left: 50%;
- transform: translateX(-50%);
- }
-
- .nine {
- left: 6px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- .arrows {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .arrows::before {
- content: "";
- width: 25px;
- height: 25px;
- background-color: #484848;
- border-radius: 50%;
- box-shadow: 1px 1px 25px rgba(0,0,0,.7);
- z-index: 4;
- }
-
- .arrows div {
- width: 7px;
- height: 120px;
- background-color: white;
- position: absolute;
- bottom: 50%;
- box-shadow: 1px 1px 8px rgba(0,0,0,.7);
- border-radius: 50% 50% 0 0;
- transform-origin: bottom center;
- z-index: 3;
- }
-
- .arrows .hour {
- height: 80px;
- transform: rotate(30deg);
- }
-
- .arrows .second {
- background-color:#000;
- transform: rotate(250deg);
-
- }
Now paste the following codes into your script.js file
- const hour = document.querySelector(".hour");
- const minute = document.querySelector(".minute");
- const second = document.querySelector(".second");
-
- function setDate() {
- const now = new Date();
-
- const getSecond = now.getSeconds();
- const getMinute = now.getMinutes();
- const getHour = now.getHours();
-
- const secondDegree = (getSecond / 60) * 360;
- const minuteDegree = (getMinute / 60) * 360;
- const hourDegree = (getHour / 12) * 360;
-
- second.style.transform = `rotate(${secondDegree}deg)`;
- minute.style.transform = `rotate(${minuteDegree}deg)`;
- hour.style.transform = `rotate(${hourDegree}deg)`;
- }
-
- setInterval(setDate, 1000);
If you face any difficulties while creating Analog Wall Clock or your code is not working as expected, you can download the source code files by clicking download button.