Digital Clock

A cool Digital Clock For Reko Lovers 😘

HTML

HTML
<div class="clock-container">
  <div class="date"></div>
  <div class="time"></div>
</div>

Pug

Pug
.clock-container
  .date
  .time

CSS

CSS
.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;
}                  

JavaScript

JavaScript
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);