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>