HTML
<div class="clock-container">
<div class="date"></div>
<div class="time"></div>
</div>
A cool Digital Clock For Reko Lovers 😘
<div class="clock-container">
<div class="date"></div>
<div class="time"></div>
</div>
.clock-container
.date
.time
.clock-container{
color: white;
background-color: #039be5;
margin: 60px auto;
width: 220px;
font-size: 20px;
padding: 17px;
transition: all 0.3s;
box-shadow: 2px 2px 10px #057bb6;
border-radius: 6px;
}
.clock-container:hover{
width: 230px;
box-shadow: 5px 5px 17px #057bb6;
}
.time{
font-size: 30px;
margin-top: 10px;
font-weight: 500;
}
const date = document.querySelector(".date");
const time = document.querySelector(".time");
const digitalclock = () => {
// date
let now = new Date()
const datenow = now.toDateString()
date.innerText = datenow;
// time
let hours = now.getHours() - 12
let min = now.getMinutes()
let sec = now.getSeconds()
let hourszone = now.getHours()
if (hourszone > 13) {
hourszone = "PM"
} else {
hourszone = "AM"
}
if (hours < 10) {
hours = `0${now.getHours() - 12}`
} else {
hours = now.getHours() - 12
}
if (min < 10) {
min = `0${now.getMinutes()}`
} else {
min = now.getMinutes()
}
if (sec < 10) {
sec = `0${now.getSeconds()}`
} else {
sec = now.getSeconds()
}
time.innerText = `${hours} : ${min} : ${sec} ${hourszone}`
}
setInterval(digitalclock, 1000);