Digital Clock Design Using 8086 Theory

Digital Clock Design Using 8086 Theory

In this tutorials we  are going to learning how to create  a simple digital clock using HTML5, CSS3 and JavaScript.

Requirement

For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.

Files

For this project we will need three files namely

  • index.html
  • style.css
  • script.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap" rel="stylesheet">
</head>
<body>
    <h2>Digital Clock</h2>
    <div class="clock">
        <div class="times">
            <div class="time">
                <span id="hour">00</span>
            </div>
            <div class="title">
                <span>Hours</span>
            </div>
        </div>
        <div class="times">
            <div class="time">
                <span id="minute">00</span>
            </div>
            <div class="title">
                <span>Minutes</span>
            </div>
        </div>
        <div class="times">
            <div class="time">
                <span id="second">00</span>
            </div>
            <div class="title">
                <span>Seconds</span>
            </div>
        </div>
    </div>
</body>
</html>

style.css

*{
font-family: 'Big Shoulders Display', cursive;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
background: #c2c2c2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
}
h2{
font-size: 4em;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 30px;
}
.clock{
max-width: 800px;
width: 100%;
height: 100%;
display: flex;
justify-content: space-evenly;
}
.clock .times{
width: 200px;
height: 250px;
position: relative;
}
.clock .times::before{
content: "";
position: absolute;
transform-origin: bottom;
}
.clock .times::after{
content: "";
position: absolute;
transform-origin: left;
}
.clock .times .time{
width: 100%;
height: 180px;
text-align: center;
background: #003f83;
line-height: 180px;
font-size: 5em;
letter-spacing: 3px;
}
.clock .times .title{
width: 100%;
height: 70px;
text-align: center;
line-height: 70px;
background:#0051a9;
font-size: 2em;
letter-spacing: 2px;
}
.clock .times .title::before{
content: "";
position: absolute;
width: 100%;
height: 250px;
bottom: 0;
left: 0;
z-index: -1;
filter: blur(5px);
}

script.js

<script>
const hours = document.querySelector('#hour');
        const minutes = document.querySelector('#minute');
        const seconds = document.querySelector('#second');
        function clock(){
            let h = new Date().getHours();
            let m = new Date().getMinutes();
            let s = new Date().getSeconds();
            hours.textContent = h;
            minutes.textContent = m;
            seconds.textContent = s;
        }
        // clock();
        let interval = setInterval(clock, 1000);
<script>

Result:

Leave a Reply

Your email address will not be published. Required fields are marked *