Building a Stylish Digital Clock: HTML, CSS, and JavaScript Guide @rayen-code

Rayen
00 00 00 AM

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><link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;500&display=swap" rel="stylesheet">
    <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">
        <span id="hours">00</span>
        <span id="minutes">00</span>
        <span id="seconds">00</span>
        <span id="session">AM</span>
    </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;

}

body{
    background:linear-gradient(45deg, #2b7df0, #f87066);
    min-height: 100vh;    
    display: flex;
    justify-content: center;
    align-items: center;
}

.clock{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
.clock span{
    font-size: 4rem;
    background: black;
    width: 200px;
    height: 200px;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid #80808075;
}
.clock span::after{
    
    position: absolute;
    color: #ababab;
    font-size: 0.9rem;
    top: 140px;
    font-weight: 200;
}
.clock span:nth-child(1)::after{
    content: "HOURS";
}
.clock span:nth-child(2)::after{
    content: "MINUTES";
}
.clock span:nth-child(3)::after{
    content: "SECONDS";
}
.clock span:nth-child(4)::after{
    content: "SESSION";
}

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

let hours = document.getElementById("hours");
let minutes = document.getElementById("minutes");
let seconds = document.getElementById("seconds");
let session = document.getElementById("session");

displayTime= () =>{
    let newTime = new Date();
    let hrs = newTime.getHours();
    let min = newTime.getMinutes();
    let sec = newTime.getSeconds();
    
    
 if(hrs >= 12){
    session.innerText = "PM"
 }
 else{
    session.innerText = "AM"
 }


 if(hrs > 12){
    hrs = hrs - 12;
 }
    hours.innerText = hrs;
    

    if(minutes.innerText < 10){
        minutes.innerText = "0"+ min;
    }else{
        minutes.innerText = min;
    }
    seconds.innerText = sec;

    if(seconds.innerText < 10){
        seconds.innerText = "0"+ sec;
    }
    else{
        seconds.innerText = sec;
    }


   
}

setInterval(displayTime, 1);

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