TimesCoding

Learn, Practice, and Excel with our Coding Tutorials!

How to Create a Stylish Digital Watch with HTML, CSS, and JavaScript

June 11, 2024 2 Min read CSS HTML JAVASCRIPT

Creating a digital watch similar to an Apple Watch using HTML, CSS, and JavaScript involves several steps. We’ll build a simple, functional digital clock that displays the current time, styled to resemble the sleek design of an Apple Watch.

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>Digital Watch</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="watch">
        <div class="screen">
            <div class="watermark"></div>
            <div id="time" class="time"></div>
            <div id="date" class="date"></div>
        </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;
}

.watch {
    width: 300px;
    height: 350px;
    background: linear-gradient(145deg, #1c1c1c, #444);
    border-radius: 30px;
    box-shadow: 10px 10px 20px #111, -10px -10px 20px #555;
    display: flex;
    justify-content: center;
    align-items: center;
}

.screen {
    position: relative;
    width: 260px;
    height: 310px;
    background: #000;
    border-radius: 25px;
    box-shadow: inset 5px 5px 10px #111, inset -5px -5px 10px #555;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #00ff00;
    overflow: hidden;
}

.watermark {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('watermark.png') no-repeat center center;
    background-size: contain;
    opacity: 0.1;
}

.time {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
    z-index: 1;
}

.date {
    font-size: 18px;
    z-index: 1;
}

JavaScript (script.js)

function updateTime() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    const timeString = `${hours}:${minutes}:${seconds}`;

    const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    const dateString = now.toLocaleDateString(undefined, dateOptions);

    document.getElementById('time').textContent = timeString;
    document.getElementById('date').textContent = dateString;
}

setInterval(updateTime, 1000);
updateTime();  // Initial call to display the time immediately

This code provides a simple digital watch interface. You can further enhance it with additional features or more advanced styling to better mimic the look and feel of an Apple Watch.

Related Post:
Trendy Website Color Combinations for 2024 − Here are some trending color combinations to consider for your website, including header, footer, sidebar, and content section colors with codes: 1. Balanced Brights: 2..
Create a Stylish Analog Watch with HTML, CSS, and JavaScript − Creating 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.
Creating a Stylish and Responsive Bootstrap Menu with Colorful Toggle Icon − Below is a simple responsive Bootstrap 5 template that you can use as a starting point for your project. This template includes a stylish &.
Responsive Web Design with CSS: A Short Tutorial − Responsive web design is a crucial aspect of modern web development. It ensures that your website looks and functions well on a variety of devices,.
How to Create a Modern Stylish Accordion with Arrows Using Only HTML and CSS − This modern and stylish accordion is created using only HTML and CSS, featuring smooth transitions and interactive arrows that change direction upon expansion. It’s perfect.
How to Create a Stylish and Modern HTML Select Field Using CSS − Creating a modern and stylish HTML “Select” field involves using CSS to enhance the default styling. Here’s an example of how you can achieve this:.
Modern and Stylish Button with Gradient and Hover Effects − This modern and stylish button features a vibrant gradient background that seamlessly transitions on hover, coupled with a subtle box shadow for added depth. Its.
Creating a Modern Responsive Menu with HTML & CSS Only − Learn how to design a stylish and modern website header section and responsive menu using just HTML and CSS, with a responsive menu that toggles.
Design a Modern and Stylish Login Form using HTML and CSS − This is a modern and stylish login form using HTML and CSS, featuring 3D effects, colorful fields, and a button. The “Not registered? Create an.
Creating a Modern Button with Stylish Hover Effects Using CSS − This is a modern and stylish button with a simple hover effect using CSS. The button has a bold border & the border color will.
How to Create a Colorful Tic-Tac-Toe Game with HTML, CSS and JavaScript − Here’s a colorful Tic-Tac-Toe game implemented using HTML, CSS, and JavaScript only. The game includes a restart button, winner message, and special effects for the.
Pure CSS Custom Modern and Stylish Checkboxes − Creating a custom modern and stylish checkboxes using pure CSS can enhance the visual appeal of your web forms. Here’s a simple and elegant checkboxes.