Create a Stylish Analog Watch with HTML, CSS, and JavaScript
June 12, 2024 ⚊ 3 Min read ⚊ CSS HTML JAVASCRIPTCreating a stylish analog watch using HTML, CSS, and JavaScript involves simulating the appearance and movement of clock hands. We’ll build a simple analog clock with rotating hour, minute, and second hands.
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Analog Watch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock">
<div class="center"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
margin: 0;
font-family: Arial, sans-serif;
}
.clock {
position: relative;
width: 300px;
height: 300px;
background: linear-gradient(145deg, #1c1c1c, #444);
border-radius: 50%;
box-shadow: 10px 10px 20px #111, -10px -10px 20px #555;
border: 10px solid #000;
}
.center {
position: absolute;
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10; /* Ensure the center is above the hands */
}
.hand {
position: absolute;
width: 50%;
height: 6px;
background-color: #fff;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: transform 0.5s ease-in-out;
}
.hour-hand {
height: 8px;
background-color: #00ff00;
z-index: 2; /* Ensure the hour hand is below the center */
}
.minute-hand {
height: 6px;
background-color: #00ffff;
z-index: 3; /* Ensure the minute hand is below the center */
}
.second-hand {
height: 4px;
background-color: #ff0000;
z-index: 4; /* Ensure the second hand is below the center */
}
.number {
position: absolute;
color: #fff;
font-size: 24px;
font-weight: bold;
}
.number1 { top: 15%; left: 72%; transform: translate(-50%, -50%); }
.number2 { top: 28%; left: 85%; transform: translate(-50%, -50%); }
.number3 { top: 50%; left: 90%; transform: translate(-50%, -50%); }
.number4 { top: 72%; left: 85%; transform: translate(-50%, -50%); }
.number5 { top: 85%; left: 72%; transform: translate(-50%, -50%); }
.number6 { top: 90%; left: 50%; transform: translate(-50%, -50%); }
.number7 { top: 85%; left: 28%; transform: translate(-50%, -50%); }
.number8 { top: 72%; left: 15%; transform: translate(-50%, -50%); }
.number9 { top: 50%; left: 10%; transform: translate(-50%, -50%); }
.number10 { top: 28%; left: 15%; transform: translate(-50%, -50%); }
.number11 { top: 15%; left: 28%; transform: translate(-50%, -50%); }
.number12 { top: 10%; left: 50%; transform: translate(-50%, -50%); }
JavaScript (script.js)
function setClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
const secondsDegree = ((seconds / 60) * 360) + 90;
const minutesDegree = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
const hoursDegree = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;
document.querySelector('.second-hand').style.transform = `rotate(${secondsDegree}deg)`;
document.querySelector('.minute-hand').style.transform = `rotate(${minutesDegree}deg)`;
document.querySelector('.hour-hand').style.transform = `rotate(${hoursDegree}deg)`;
}
setInterval(setClock, 1000);
setClock(); // Initial call to set the clock immediately
This setup creates a visually appealing analog clock that updates in real time. You can further enhance the design and functionality as needed.