Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Saturday
00:00:00
AM
May
12
2021
* { padding: 0; margin: 0; box-sizing: border-box; } html, body { display: grid; place-items: center; width: 100%; height: 100%; background: #181818; font-family: "Orbitron", sans-serif; color: #7bf6e4; font-size: 20px; } .clock { padding: 20px 40px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 10px; text-align: center; width: 400px; } .dayName { text-transform: uppercase; font-size: 15px; } .flexbox { display: flex; justify-content: center; align-items: end; padding: 10px; } .HrMinSec { font-size: 35px; } .merdian { font-size: 12px; padding-left: 20px; padding-bottom: 10px; }
function showClock() { // Declare Variables var time = new Date(); var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); var day = time.getDay(); var date = time.getDate(); var month = time.getMonth(); var year = time.getFullYear(); var meridian = hours > 12 ? "PM" : "AM"; var daysOfWeek = [ "SUNDAY", "MONDAY", "TUESDAY", "THURSDAY", "WEDNESDAY", "FRIDAY", "SATURDAY" ]; var monthsOfYear = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ]; var currentDay = daysOfWeek[day]; var currentMonth = monthsOfYear[month]; if (hours > 12) { hours = hours - 12; } // Add Leading Zero hours = hours < 10 ? "0" + hours : hours; minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; var HrMinSec = hours + " : " + minutes + " : " + seconds; // Implement values to DOM document.querySelector(".dayName").innerHTML = currentDay; document.querySelector(".HrMinSec").innerHTML = HrMinSec; document.querySelector(".merdian").innerHTML = meridian; document.querySelector(".month").innerHTML = currentMonth; document.querySelector(".today").innerHTML = date; document.querySelector(".year").innerHTML = year; } setInterval(() => { showClock(); }, 1000);