Digital Clock UI Design Using CSS3 & Vanilla Javascript | HTML

HTML
<div id="clock">
    <h2>The time is now</h2>
    <div id="time">
        <div><span id="hour">00</span><span>Hours</span></div>
        <div><span id="minutes">00</span><span>Minutes</span></div>
        <div><span id="seconds">00</span><span>Seconds</span></div>
    </div>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Open Sans',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#060a1f;
}
#clock h2
{
    position:relative;
    display:block;
    color:#fff;
    text-align:center;
    margin:10px 0;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.4em;
    font-size:0.8em;
}
#clock #time
{
    display:flex;
}
#clock #time div
{
    position:relative;
    margin:0 5px;
    -webkit-box-reflect:below 1px linear-gradient(transparent,#0004)
}
#clock #time div span
{
    position:relative;
    display:block;
    width:100px;
    height:80px;
    background:#2196f3;
    color:#fff;
    font-weight:300;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:3em;
    z-index:10;
    box-shadow:0 0 0 1px rgba(0,0,0,.2);
}
#clock #time div span:nth-child(2)
{
    height:30px;
    font-size:0.7em;
    letter-spacing:0.2em;
    font-weight:500;
    z-index:9;
    box-shadow:none;
    background:#127fd6;
    text-transform:uppercase;
}
#clock #time div:last-child span
{
    background:#ff006a;
}
#clock #time div:last-child span:nth-child(2){
    background:#ec0062;
}
JS
function clock(){
    var hours = document.getElementById('hour');
    var minutes = document.getElementById('minutes');
    var seconds = document.getElementById('seconds');
    
    var h = new Date().getHours();
    var m = new Date().getMinutes();
    var s = new Date().getSeconds();
    
    hours.innerHTML = h;
    minutes.innerHTML = m;
    seconds.innerHTML = s;
}

var interval = setInterval(clock,1000);

/*
    All the credits: https://www.youtube.com/watch?v=CWOnjWTfPW4 
*/

Autor: Leonard

Publicado: 07/06/2022

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario