Creating a digital clock with JavaScript is a fun and useful project that can help you understand how to manipulate the DOM (Document Object Model) and how to use JavaScript’s built-in Date object.
Preview (Digital Clock with JavaScript)
HTML
To start, we have some HTML code that includes three span elements with IDs for the hour, minute, and second. These elements will be used to display the current time. There is also a span element with an ID for the date and another for the day of the week.
<div class="container">
<div class="time">
<span id="hour">00</span>
<span class="blink-colon">:</span>
<span id="minute">00</span>
<span class="blink-colon">:</span>
<span id="second">00</span>
</div>
<div class="date-container">
<span id="date">01/01/2014</span>,
<span id="day">Sunday</span>
</div>
</div>CSS
To style the digital clock we created with JavaScript, we can use CSS. For example, we might want to change the font, size, and color of the clock's text, or add some background color or a border to the container element.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inconsolata', monospace;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #020100;
}
.container {
border: 10px solid rgb(0, 240, 0);
width: 450px;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color:#fff;
font-size: 32px;
border-radius: 50%;
background: rgb(0, 0, 0);
box-shadow:
0 0 5px rgb(0, 240, 0),
0 0 10px rgb(0, 240, 0),
0 0 15px rgb(0, 240, 0);
}
.time {
font-size: 2em;
color:rgb(0, 240, 0);
}
.blink-colon {
animation: blink 1s infinite linear;
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
30% {
opacity: 0.4;
}
}
.date-container {
margin-top: 6px;
font-size: 24px;
color: rgba(255,255,255,0.8)
}
/* Digital Clock with JavaScript */With just a few lines of CSS, we can add some polish and personality to our digital clock. Experiment with different styles and see what looks best to you.
JavaScript
window.onload = function () {
setInterval(updateTime, 1000)
};
function updateTime() {
const hourEL = document.querySelector("#hour");
const minuteEL = document.querySelector("#minute");
const secondEL = document.querySelector("#second");
let d = new Date();
let hours = d.getHours();
let minutes = d.getMinutes();
let seconds = d.getSeconds();
if (hours >= 0 && hours <= 9) hours = "0" + hours;
if (minutes >= 0 && minutes <= 9) minutes = "0" + minutes;
if (seconds >= 0 && seconds <= 9) seconds = "0" + seconds;
hourEL.innerHTML = hours;
minuteEL.innerHTML = minutes;
secondEL.innerHTML = seconds;
const dateEl = document.querySelector("#date");
let date = d.getDate();
if (date >= 0 && date <= 9) date = "0" + date;
let month = d.getMonth() + 1;
if (month >= 0 && month <= 9) month = "0" + month;
let year = d.getFullYear();
if (year >= 0 && year <= 9) year = "0" + year;
dateEl.innerHTML = `${date}/${month}/${year}`;
const dayEL = document.querySelector("#day");
let daynumber = d.getDay(), day = "";
switch (daynumber) {
case 0: day = "Sunday"; break;
case 1: day = "Monday"; break;
case 2: day = "Tuesday"; break;
case 3: day = "Wednesday"; break;
case 4: day = "Thrusday"; break;
case 5: day = "Friday"; break;
case 6: day = "Saturday"; break;
}
dayEL.innerHTML = day;
}
// Digital Clock with JavaScriptNext, we have a JavaScript function called updateTime that gets called every 1000 milliseconds (1 second) using the setInterval function. Inside the updateTime function, we first select the span elements that we want to update using querySelector.
Then, we create a new Date object and assign it to the d variable. This object contains information about the current date and time. We use the getHours, getMinutes, and getSeconds methods to extract the current hour, minute, and second, respectively.
To ensure that the time is displayed with a leading zero (e.g. 09:05:02), we use some conditional statements to check if the hour, minute, or second is less than or equal to 9. If it is, we add a leading zero.
Next, we use the innerHTML property to update the text content of the span elements with the current time.
Finally, we use the getDate, getMonth, and getFullYear methods to extract the current date, month, and year, respectively. We also use a switch statement to determine the current day of the week based on the day number returned by the getDay method.
With these simple steps, we have created a digital clock with JavaScript to update in real-time. You can customize this code further by adding more features or styling the clock using CSS.
Check out other projects that are from the 15 Days - 15 Projects Series.
Read other Code Projects from here. See the live preview from here.
Happy Coding!
