Create Your Own Digital Watch with HTML, CSS, and JavaScript

Create Your Own Digital Watch with HTML, CSS, and JavaScript - A Beginner's Guide

HTML, CSS, and JavaScript are three essential technologies that form the backbone of modern web development. These languages allow you to create dynamic and interactive websites, and with a little creativity, you can even build your own digital watch. In this beginner's guide, we will walk you through the process of creating a digital watch from scratch using HTML, CSS, and JavaScript.

Introduction

In this digital age, watches have gone beyond their traditional function of telling time and have become a fashion statement and a reflection of personal style. By building your own digital watch, you not only have a unique timepiece but also gain a deeper understanding of web development concepts. So, let's get started!

Setting Up the HTML Structure

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, 
        initial-scale=1.0" />
  <title>Minimal Clock</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>

<body>

  <div class="wrapper">
    <div class="top_sec">
      <div class="rcwrap"><svg id="round_clock" viewBox="0 0 512 512" width="30" title="clock">
          <path d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z" />
        </svg></div>
      <div class="time">DIGITAL WATCH</div>
    </div>
    <div id="dig_clock"></div>
    <div class="btm_sec">
      <div id="date"></div>
      <div id="day"></div>
    </div>
  </div>
</body>
<script src="main.js"></script>
</html>

Styling with CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(79, 161, 194);
  font-family: "Poppins", sans-serif;
  font-weight:bold;
}

.wrapper {
  position: absolute;
  height: 221px;
  width: 330px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.top_sec {
  display: flex;
  flex-direction: row;
  width: 330px;
}

.rcwrap {
  height: 55px;
  width: 55px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  margin-right: 8.5px;
}
#round_clock {
  top: 50%;
  left: 50%;
  transform: translate(10%, 10%);
  height: 45px;
  width: 45px;
  align-items: center;
}

.time {
  color: rgb(79, 161, 194);
  height: 55px;
  letter-spacing:1.5px;
  width: 266.5px;
  margin-bottom: 10px;
  padding-top: 7px;
  text-align:center;
  border-radius: 4px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  font-size: 28px;
  background-color: white;
  font-weight: bold;
}

#dig_clock {
  background-color: rgb(255, 255, 255);
  color: rgb(79, 161, 194);
  position: absolute;
  align-items: center;
  justify-content: center;
  top: 50;
  display: flex;
  width: 330px;
  height: 90px;
  border-radius: 4px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  font-size: 52px;
  letter-spacing: 8px;
  font-weight: bolder;
}

#date {
  color: rgb(79, 161, 194);
  position: absolute;
  height: 55px;
  width: 230px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  bottom: 0;
  text-align: center;
  font-size: 25px;
  letter-spacing:2px;
  padding-top: 8px;
}

#day{
  color: rgb(79, 161, 194);
  position: absolute;
  height: 55px;
  width: 90.5px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  bottom: 0;
  right:0;
  text-align: center;
  font-size: 25px;
  letter-spacing:1.5px;
  padding-top: 8px;
}

Adding Interactivity with JavaScript

setInterval(showTime, 1000);

function showTime() {
  let time = new Date();
  let hour = time.getHours();
  let min = time.getMinutes();
  let sec = time.getSeconds();

  if (hour > 12) {
    hour -= 12;
  }
  if (hour == 0) {
    hr = 12;
  }
  hour = hour < 10 ? "0" + hour : hour;
  min = min < 10 ? "0" + min : min;
  sec = sec < 10 ? "0" + sec : sec;
  let currentTime = hour + ":" + min + ":" + sec;
  document.getElementById("dig_clock").innerHTML = currentTime;
}
showTime();

var d = new Date();
document.getElementById("date").innerHTML = d.toLocaleDateString();

var d = new Date();
var days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
document.getElementById("day").innerHTML = days[d.getDay()];  

Output

YOU ROCK!!

Create Your Own Digital Watch with HTML, CSS, and JavaScript - A Beginner's Guide"