const hourEl = document.getElementById("hour") const minuteEl = document.getElementById("minutes") const secondEl = document.getElementById("seconds") const ampmEl = document.getElementById("ampm") function updateClock(){ let h = new Date().getHours() let m = new Date().getMinutes() let s = new Date().getSeconds() let ampm = "AMPM" if(h > 12){ h = h- 12 ampm = "PM" } h = h<10 ? "0" + h : h; m = m<10 ? "0" + m : m; s = s<10 ? "0" + s : s; hourEl.innerText = h; minuteEl.innerText = m; secondEl.innerText = s; ampmEl, (innerText = ampm); setTimeout(()=> { updateClock() }, 1000) } updateClock();
body{ margin: 0; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; display: flex; flex-direction: column; align-items: center; height: 100vh; justify-content: center; background: url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80"); background-size: cover; overflow: hidden; } h2{ text-transform: uppercase; letter-spacing: 4px; font-size: 14px; text-align: center; color: white; } .clock{ display: flex; } .clock div{ margin: 5px; position: relative; } .clock span{ width: 100px; height: 80px; background: sandybrown; opacity: 8; color: white; display: flex; justify-content: center; align-items: center; font-size: 50px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .clock .text{ height: 30