Wed Jul 10 2024
Create a Digital Clock from Scratch
JavaScript101 views
File Name: digital-clock-in-js.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="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@700&display=swap"
rel="stylesheet"
/>
<style>
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
}
body {
background: radial-gradient(
ellipse at center,
#565656 0%,
#212121 100%
);
}
section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section #timer {
font-size: 60px;
color: #fff;
font-weight: 700;
display: flex;
gap: 5px;
}
section #timer span {
width: 80px;
text-align: center;
}
section #date {
font-size: 20px;
color: #b9b9b9;
font-weight: 700;
}
</style>
</head>
<body>
<section>
<div id="timer"></div>
<div id="date"></div>
</section>
<script>
const week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const month = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const showTime = () => {
const now = new Date();
const extraH = now.getHours() < 10 ? "0" : "";
const extraM = now.getMinutes() < 10 ? "0" : "";
const extraS = now.getSeconds() < 10 ? "0" : "";
const hour = `<span>${extraH}${now.getHours()}</span>`;
const minute = `<span>${extraM}${now.getMinutes()}</span>`;
const second = `<span>${extraS}${now.getSeconds()}</span>`;
document.getElementById(
"timer"
).innerHTML = `${hour}:${minute}:${second}`;
document.getElementById("date").innerText = `${week[now.getDay()]}, ${
month[now.getMonth()]
} ${now.getDate()} ${now.getFullYear()}`;
};
showTime();
setInterval(showTime, 1000);
</script>
</body>
</html>
Author:Geekboots