Build a JavaScript Digital Clock within 3 Minutes
How to build a javascript digital clock
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>JavaScript Digial Clock</title>
</head>
<body>
<div class="time-card">
<div class="time"><h1 id="hour"></h1></div>
<div class="time"><h1 id="minute"></h1></div>
<div class="time"><h1 id="sec"></h1></div>
</div>
<script src="./index.js"></script>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
body {
color: #888;
background: rgb(150, 150, 150);
font-family: 'Oswald', sans-serif;
padding-top: 100px;
}
.time-card {
display: flex;
justify-content: center;
vertical-align: middle;
}
.time-card .time {
background: rgba(0, 0, 0, .8);
margin: 5px;
border-radius: 5px;
padding: 0px 10px;
box-shadow: 0 5px 14px 1px #16161652;
width: 60px;
text-align: center;
}
.time-card .time h1 {
font-size: 50px;
}
JS Code
setInterval(showTime, 1000);
function showTime() {
var date = new Date();
var hour = date.getHours() % 12 || 12;
var seconds = date.getSeconds();
var minutes = date.getMinutes();
// minutes = minutes < 10 ? `0${minutes}` : minutes;
console.log(minutes)
const showHours = document.getElementById("hour");
showHours.innerHTML = hour;
const showMin = document.getElementById("minute");
showMin.innerHTML = minutes;
const showSec = document.getElementById("sec");
showSec.innerHTML = seconds;
}