Build a Digital Analog Clock in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

index.html

 

 

<div class="main">
     <div class="badget">clock</div>
      <div class="clock">
          <span id="hour"></span>
          <span id="min"></span>
          <span id="sec"></span>
     </div>
</div>


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color:crimson;
    font-family: 'Cagliostro', sans-serif;
}

.main {
    background-color: #212222;
    border-radius: 5px;
    margin: 100px auto;
    padding: 30px;
    width:400px;
    position: relative;
}

.badget {
    background-color:azure;
    padding:5px;
    position:absolute;
    top:-10px;
    left:40%;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
}

.clock {
    color:white;
    text-align: center;
    font-size:56px;
}


function clock() {

    const fullDate = new Date();
    let hours = fullDate.getHours();
    let mins = fullDate.getMinutes();
    let secs = fullDate.getSeconds();

    if (hours < 10) {
        hours = "0" + hours;
    }
    
    if (mins < 10) {
        mins = "0" + mins;
    }
    
    if (secs < 10) {
        secs = "0" + secs;
    }

    document.getElementById('hour').innerHTML = hours;
    document.getElementById('min').innerHTML = mins;
    document.getElementById('sec').innerHTML = secs;

}

setInterval(clock, 1000)

Leave a Reply