Please checkout my YouTube Channel
Today we are going to learn how to make a real-time clock by using vanilla JavaScript and CSS only.
Final Output
CodePen
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="index.css" /> <title>Clock UI Design</title> </head> <body> <div id="clock"> <h2>Time is</h2> <div id="time"> <div> <span id="hours">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> <span id="phase">AM</span> </div> </div> </div> <script src="./index.js"></script> </body> </html> CSS Code
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 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: 0.4em; font-size: 2em; } #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, 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:nth-last-child(2) span { background: #ff006a; } #clock #time div:nth-last-child(2) span:nth-child(2) { background: #ec0062; } #clock #time div:nth-last-child(1) span { position: absolute; bottom: 0; width: 60px; height: 40px; font-size: 1.5em; background: #fff; color: #000; -webkit-box-reflect: below 1px linear-gradient(transparent, #0004); } JS Code
function clock() { var hours = document.getElementById("hours"); var minutes = document.getElementById("minutes"); var seconds = document.getElementById("seconds"); var phase = document.getElementById("phase"); var h = new Date().getHours(); var m = new Date().getMinutes(); var s = new Date().getSeconds(); var am = "AM"; if (h > 12) { h = h - 12; var am = "PM"; } h = h < 10 ? "0" + h : h; m = m < 10 ? "0" + m : m; s = s < 10 ? "0" + s : s; hours.innerHTML = h; minutes.innerHTML = m; seconds.innerHTML = s; phase.innerHTML = am; } var interval = setInterval(clock, 1000); 
Top comments (0)