Relógio Básico Com JS

Olá,seja bem vindo 😃

hoje vou mostrar para você que esta iniciando como programador a criar um relógio básico com HTML,CSS e JS do 0!

vamos lá...

HTML source =>

<div class="relogio">
<div>
   <span id="horas" class="border">00</span>
   <span class="tempo"><p>Horas</p></span>
</div>
  
<div>
   <span id="minutos" class="border">00</span>
   <span class="tempo"><p>Minutos</p></span>
</div>
  
<div>
   <span id="segundos" class="border">00</span>
   <span class="tempo"><p>Segundos</p></span>
</div>

CSS source =>

body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-45deg, wheat, mistyrose, lightcoral);
}

.relogio {
display: flex;
justify-content: space-around;
align-items: center;
height: 200px;
width: 550px;
background: transparent;
border-radius: 5px;
box-shadow: 0px 8px 10px rgba(0, 0, 0, .5);
}

 .relogio div {
height: 170px;
width: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgb(197, 185, 196);
background: rgba(0, 0, 0, .9);
box-shadow: 5px 5px 15px rgba(0, 0, 0, .7);
letter-spacing: 4px;
border-radius: 8px;
}

.relogio span {
font-size: 4rem;
font-height: bold;
}

.relogio span.tempo {
font-size: 12px;
}

.relogio span.tempo p {
margin-top: 10px;
}

.relogio span.border {
border-bottom: 1px solid #9e9e9e;
}

JS source =>

 const horas = document.getElementById('horas');
 const minutos = document.getElementById('minutos');
 const segundos = document.getElementById('segundos');

 const relogio = setInterval(function time() {
 let dateToday = new Date();
 let hr = dateToday.getHours();
 let min = dateToday.getMinutes();
 let sec = dateToday.getSeconds();

 if (hr < 10) hr = '0' + hr;
 if (min < 10) min = '0' + min;
 if (sec < 10) sec = '0' + sec;

 horas.textContent = hr;
 minutos.textContent = min;
 segundos.textContent = sec;

 })