Realistic Dual Clock: Combining Analog and Digital Clocks using HTML CSS and JS
In this post, we'll guide you through the fascinating process of creating a dual clock, seamlessly combining both analog and digital time displays using HTML and CSS. This unique project showcases not only the art of web development but also the creative synergy of blending traditional and modern clock styles.
Must Read: Stunning Login Form using HTML and CSS only
HTML Structure
The HTML code provided forms the foundation of our dual clock.
<div class="main-container centered-flex">
<div class="outer centered-flex">
<div class="inner">
<div class="clock-container">
<ul class="h-marking centered-flex">
<li style="--i:0"></li>
<li style="--i:1"></li>
<li style="--i:2"></li>
<li style="--i:3"></li>
<li style="--i:4"></li>
<li style="--i:5"></li>
</ul>
<ul class="m-marking centered-flex">
<li style="--i:1"></li>
<li style="--i:2"></li>
<li style="--i:3"></li>
<li style="--i:4"></li>
<li style="--i:6"></li>
<li style="--i:7"></li>
<li style="--i:8"></li>
<li style="--i:9"></li>
<li style="--i:11"></li>
<li style="--i:12"></li>
<li style="--i:13"></li>
<li style="--i:14"></li>
<li style="--i:16"></li>
<li style="--i:17"></li>
<li style="--i:18"></li>
<li style="--i:19"></li>
<li style="--i:21"></li>
<li style="--i:22"></li>
<li style="--i:23"></li>
<li style="--i:24"></li>
<li style="--i:26"></li>
<li style="--i:27"></li>
<li style="--i:28"></li>
<li style="--i:29"></li>
</ul>
<div class="hands centered-flex">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="dot"></div>
</div>
<div class="date centered-flex"><span></span></div>
<div class="indicator centered-flex"></div>
<div class="digital-clk centered-flex">
<div class="time centered-flex">
<span class="value"></span>
<span class="colon">:</span>
<span class="value"></span>
<span class="colon">:</span>
<span class="value"></span>
</div>
</div>
</div>
<div class="top-text">DUAL TIME</div>
<div class="func-text">
<span>LIGHT</span>
<span>ST/SP</span>
<span>RESET</span>
<span>MODE</span>
</div>
<span class="center-text">SPORTS</span>
</div>
<div class="buttons">
<span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
Let's break down the structure:
"main-container" is the primary container, which we've centered both vertically and horizontally using the "centered-flex" class. It sets the stage for our dual clock. Inside the main container, we have an outer container. Again, we've centered it for a clean presentation.
The "inner" container holds the core elements of our dual clock, including the analog and digital displays. "clock-container" contains the analog and digital clock elements. We've marked hours and minutes with neatly spaced tick marks.
The "hands" denotes the clock hands – hour, minute, and second – along with a central dot representing the pivot point. The "digital clock" display is housed within this container. It features a formatted time display with hours, minutes, and seconds.
The "date" is used to display the current date, adding a useful feature to the dual clock and "indicator" is an indicator or separator element can be used here to visually separate the analog and digital clock displays. Finally, we've included a set of buttons that can be further customized and linked to clock-related functions.
Must Read: Realistic Candle using HTML and CSS only
We've added functional and textual elements for context and aesthetics. The "top-text" is used to display the title for the dual clock, adding a stylish touch, "func-text" provide information about the clock's button and the "center-text" element adds an additional layer of style to the design.
CSS Styling
Below is the Snippet for the CSS code, this CSS code enhances the aesthetics and functionality of the dual clock
@font-face {
font-family: 'CustomFont';
src: url("https://db.onlinewebfonts.com/t/61b4eaee5625d47bb7215f205e44f580.ttf")format("truetype");
}
.main-container {
min-width: 300px;
min-height: 100vh;
}
.outer {
width: 12rem;
height: 12rem;
border-radius: 50%;
position: relative;
background: radial-gradient(#9b9b9b 50%, black);
}
.inner {
width: 10rem;
height: 10rem;
position: relative;
border-radius: 50%;
background: #2d2d2d;
}
.clock-container,
.clock-container ul {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.h-marking:after {
content: '';
z-index: 1;
width: 80%;
height: 80%;
border-radius: 50%;
position: absolute;
background-color: #2d2d2d;
}
.h-marking li {
width: .4rem;
height: 10rem;
z-index: 1;
list-style: none;
position: absolute;
background: linear-gradient(to right, white, #555555, white);
clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%, 100% 50%);
}
.h-marking li {
transform: rotate(calc(var(--i) * 30deg));
}
.m-marking li {
width: .01rem;
height: 100%;
list-style: none;
background: white;
}
.m-marking li {
transform: rotate(calc(var(--i) * 6deg));
}
ul.m-marking:after {
content: '';
width: 94%;
height: 94%;
border-radius: 50%;
position: absolute;
background: #2d2d2d;
}
.hands {
width: 100%;
height: 100%;
}
.hour-hand,
.minute-hand,
.second-hand {
top: 50%;
z-index: 2;
position: absolute;
transform-origin: center 95%;
transform: translateY(-95%) rotate(0deg);
background: linear-gradient(to right, white, #8e8888, white);
}
.hour-hand {
width: 5%;
height: 25%;
clip-path: polygon(50% 0, 80% 8%, 100% 95%, 50% 100%, 0% 95%, 20% 8%);
}
.minute-hand {
width: 4%;
height: 40%;
clip-path: polygon(50% 0, 80% 8%, 100% 95%, 50% 100%, 0% 95%, 20% 8%);
}
.second-hand {
width: 1%;
height: 45%;
z-index: 3;
border-radius: 1rem;
transform-origin: center 85%;
transform: translateY(-85%) rotate(0deg);
}
.dot {
width: 0.2rem;
height: 0.2rem;
z-index: 3;
border-radius: 50%;
position: absolute;
background: #000000;
}
.digital-clk {
bottom: 16%;
clip-path: polygon(0% 20%, 15% 20%, 30% 0%, 70% 0%, 85% 20%, 100% 20%, 100% 55%, 85% 100%, 15% 100%, 0% 55%);
}
.date,
.digital-clk {
width: 68%;
height: 22%;
left: 50%;
z-index: 1;
position: absolute;
background: #030303;
transform: translateX(-50%);
box-shadow: inset 0px 0px 2px 2px #4f4f4feb;
}
.time {
color: white;
font-family: 'CustomFont';
width: 100%;
font-size: 1.4rem;
}
.value {
width: 22%;
text-align: center;
font-weight: bold;
letter-spacing: .05rem;
}
.colon {
font-size: 1.4rem;
width: 5%;
text-align: center;
margin-bottom: .4rem;
}
.time span:nth-child(4) {
left: 58%;
}
.top-text {
position: absolute;
color: white;
z-index: 1;
top: 13%;
font-weight: bold;
font-size: .4rem;
left: 50%;
transform: translate(-50%);
}
.date {
top: 19%;
clip-path: polygon(20% 0%, 80% 0%, 100% 60%, 100% 100%, 0 100%, 0% 60%);
}
.date span {
color: white;
font-size: 0.9rem;
word-spacing: .3rem;
font-family: 'CustomFont';
font-weight: bold;
}
.buttons span {
width: .4rem;
height: 1rem;
background: linear-gradient(to bottom, #a5a5a5, black 50%, #acacac);
position: absolute;
list-style: none;
border-radius: 50% 0 0 50%;
z-index: -1;
}
.buttons span:nth-child(1) {
left: 12%;
top: 10%;
transform: rotate(43deg);
}
.buttons span:nth-child(2) {
right: 12%;
top: 10%;
transform: rotate(135deg);
}
.buttons span:nth-child(3) {
right: 12%;
bottom: 10%;
transform: rotate(225deg);
}
.buttons span:nth-child(4) {
left: 12%;
bottom: 10%;
transform: rotate(315deg);
}
.buttons span:nth-child(5) {
right: -3.5%;
top: 43%;
border: 5px double #6c6c6c40;
width: .8rem;
height: 1.6rem;
transform: rotate(180deg);
}
.func-text span {
font-size: .4rem;
color: #bbbbbb;
position: absolute;
}
.func-text span:nth-child(1) {
left: 13%;
top: 17%;
transform: rotate(315deg);
}
.func-text span:nth-child(2) {
right: 13%;
top: 17%;
transform: rotate(45deg);
}
.func-text span:nth-child(3) {
right: 13%;
bottom: 17%;
transform: rotate(315deg);
}
.func-text span:nth-child(4) {
left: 13%;
bottom: 17%;
transform: rotate(45deg);
}
.center-text {
color: #c5c5c5;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
font-size: .5rem;
right: 20%;
text-shadow: 0px 1px 1px black;
}
.indicator {
font-size: .6rem;
width: 17%;
height: 17%;
font-weight: bold;
color: white;
font-family: 'CUSTOMFONT';
background: black;
position: absolute;
left: 16%;
top: 45%;
box-shadow: inset 0px 0px 2px 2px #4f4f4feb;
z-index: 1;
border-radius: 50%;
}
.centered-flex {
display: flex;
justify-content: center;
align-items: center;
}Reset and Basic Styling: The CSS begins with a reset, ensuring consistent styling across browsers. The body background is set to black for a sleek look.
Custom Font: It includes the use of a custom font ('CustomFont') imported with @font-face. This custom font likely enhances the digital clock's appearance.
Clock Styling: The code carefully styles the clock components, including the hour and minute markings on the analog clock, the clock hands (hour, minute, and second), and the digital clock display. It also adds subtle gradients and shadows for depth and detail.
Buttons and Functional Text: The CSS styles buttons and functional text elements, giving them a modern appearance. The buttons are given radial gradients, and functional text is rotated to match the clock's design.
JS Implementation
Here is the code snippet for the JavaScript code:
const hr_hand = document.querySelector(".hour-hand");
const min_hand = document.querySelector(".minute-hand");
const sec_hand = document.querySelector(".second-hand");
const val = document.querySelectorAll(".time .value");
const dt = document.querySelector('.date');
const options = { weekday: 'short', month: 'short', day: 'numeric' };
const indicator = document.querySelector('.indicator');
setInterval(() => {
let date = new Date();
dt.firstElementChild.innerText = date.toLocaleDateString('en-US', options);
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
indicator.innerText = h >= 12 ? 'PM' : 'AM'
h = h > 12 ? h - 12 : h
let ah = 30 * h + m / 2 + s / 120;
let am = 6 * m + s / 10;
let as = 6 * s;
hr_hand.style.transform = `translateY(-95%) rotate(${ah}deg)`;
min_hand.style.transform = `translateY(-95%) rotate(${am}deg)`;
sec_hand.style.transform = `translateY(-85%) rotate(${as}deg)`;
val[0].innerText = h > 9 ? h : '0' + h;
val[1].innerText = m > 9 ? m : '0' + m;
val[2].innerText = s > 9 ? s : '0' + s;
}, 1000)Clock Initialization: The code initializes various elements, such as the clock hands (hour, minute, and second), digital time values, date display, and an indicator for AM or PM.
Interval Function: It sets up a setInterval function that runs every second (1000 milliseconds) to update the clock's time and date. This ensures real-time updates on the clock.
Time Calculation: Within the interval function, the code calculates the current time in hours, minutes, and seconds using the Date object. It also handles the conversion from 24-hour time to 12-hour time, updating the indicator accordingly.
Clock Hand Rotation: The JavaScript code dynamically rotates the clock hands (hour, minute, and second) based on the calculated time. This provides the analog clock's ticking effect and ensures the correct time is displayed.
Date Display: The code retrieves the current date, formats it using options for the weekday, month, and day, and displays it in the designated element.
These points highlight the essential functionalities of the JavaScript code, enabling the dual clock to accurately display and update both analog and digital time representations.
By following this post, you've not only learned how to create a captivating dual clock with both analog and digital displays but also explored the art of blending tradition with modernity in web design. The possibilities for customization and integration into your projects are endless. Feel free to experiment with styles, colors, and functionalities to make this dual clock uniquely yours.
Ready to showcase your creativity and enhance your web projects with this intriguing dual clock? Share your thoughts, questions, and customization ideas in the comments below as you embark on this exciting web development journey.
