0
1
2
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
0
1
2
3
4
5
6
7
8
9
Digital clocks are a common and useful feature for displaying the current time on websites. Creating a dynamic and visually appealing digital clock using HTML, CSS, and JavaScript can add a touch of sophistication to your website. In this tutorial, we'll walk you through the process of building a digital clock that updates in real-time.
Step 1: HTML Markup:
Start by setting up the basic HTML structure for your digital clock. You'll need an element to display the time.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="clock">
<div class="hr">
<div class="column">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
</div>
<div class="column">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
<div class="min">
<div class="column">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
</div>
<div class="column">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
<div class="sec">
<div class="column">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
</div>
<div class="column">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Step 2: Styling with CSS:
Create a separate CSS file (style.css) to style the digital clock and its appearance.
/*-------------------- CSS --------------------*/
/* style.css */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Mono', monospace;
}
body{
font-size: 4rem;
min-height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
background: linear-gradient(-45deg, #c4d2ef, #dfe6f6);
}
.clock{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 8rem;
height: 4rem;
position: relative;
padding: 0 4rem;
}
.hr, .min, .sec{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 4rem;
grid-row: 1/2;
align-items: start;
}
.number{
width: 8rem;
height: 8rem;
border-radius: 50%;
color: #f9fbfd;
display: grid;
place-items: center;
transition: all 0.5s 0.1s ease;
user-select: none;
}
.column{
transition: transform 0.5s ease-in-out;
border-radius: 1.3rem;
background: #dfe6f6;
box-shadow: -1rem -1rem 2rem -0.5rem #f9fbfd, 1rem 1rem 2rem #a9bee8;
}
.highlight{
color: #3e6ccb;
font-weight: bold;
transform: scale(1.3);
background: #dfe6f6;
box-shadow: -1rem -1rem 2rem #f9fbfd, 1rem 1rem 2rem #a9bee8;
}
Step 3: Adding JavaScript Interaction:
Create a JavaScript file (main.js) to handle the real-time updating of the digital clock.
//-------------------- Java Script --------------------//
// main.js
const columns = document.querySelectorAll(".column");
const frontHeight = "8";
highlight = (column, d)=>{
let numbers = columns[column].querySelectorAll(".number");
numbers[d].classList.add("highlight");
setTimeout(()=>{
numbers[d].classList.remove("highlight");
}, 950);
}
slider = (column, number)=>{
let d1 = Math.floor(number / 10);
let d2 = number % 10;
columns[column].style.transform = `translateY(${d1 * - frontHeight}rem)`;
highlight(column, d1);
columns[column + 1].style.transform = `translateY(${d2 * - frontHeight}rem)`;
highlight(column + 1, d2);
}
setInterval(()=>{
const time = new Date();
const hours = time.getHours();
const mins = time.getMinutes();
const secs = time.getSeconds();
slider(0, hours);
slider(2, mins);
slider(4, secs);
}, 1000);
In the CSS section, we've styled the digital clock's appearance. The JavaScript section updates the clock's time every microsecond using the setInterval function.
Congratulations! You've successfully created a stylish and functional digital clock using HTML, CSS, and JavaScript. This dynamic element can be a valuable addition to your website, providing visitors with the current time in an elegant manner.
Feel free to customize the font, colors, and sizing to match your website's design. You can also explore additional JavaScript features to add animations or further enhance the clock's appearance.
By following this tutorial, you've gained a useful skill in web development that can help you create more interactive and engaging user interfaces. Implement this digital clock on your website to provide a real-time visual element that enhances the overall user experience.
0 Comments