Digital Clock using javascript is a project that shows the time along with the Date. It uses your system time to fetch the current time and displays it.
Source Code for Digital Clock Javascript
Simple digital clock application built with HTML, CSS, and JavaScript. The JavaScript file (index.js) would contain the logic to get the current date and time, format it appropriately, and update the dayName and time elements in the HTML.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Digital Clock</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--Display day information e.g Wednesday March 12,2021-->
<div id="dayIntro">
<p id="dayName"></p>
</div>
<div class="container">
<!-- Display time -->
<div class="dispClock">
<div id="time"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
/* Google font */
@import url("https://fonts.googleapis.com/css?family=Orbitron");
* {
margin: 0;
padding: 0;
}
html,
body {
display: grid;
place-items: center;
}
#dayIntro {
font-size: 40px;
font-weight: 600;
letter-spacing: 3px;
border: 7px solid rgb(17, 129, 134);
border-radius: 10px;
margin: 20px;
font-family: "Times New Roman", Times, serif;
padding: 15px;
background: linear-gradient(180deg, #a8b9d3, rgb(173, 227, 229));
}
.container {
height: 120px;
width: 550px;
position: relative;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
border-radius: 10px;
cursor: default;
}
.container .dispClock,
.container {
position: absolute;
top: 28%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .dispClock {
top: 50%;
height: 105px;
width: 535px;
background: linear-gradient(147deg, #000000 0%, #2c3e50 74%);
border-radius: 6px;
text-align: center;
}
.dispClock #time {
line-height: 85px;
color: #fff;
font-size: 70px;
font-weight: 600;
letter-spacing: 1px;
font-family: "Orbitron", sans-serif;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
setInterval(currentTime, 1000);
function currentTime() {
let time = new Date(); // creating object of Date class
let dayName = time.getDay();
let month = time.getMonth();
let year = time.getFullYear();
let date = time.getDate();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
var am_pm = "AM";
if (hour == 12) am_pm = "PM";
if (hour > 12) {
hour -= 12;
am_pm = "PM";
}
if (hour == 0) {
hour = 12;
am_pm = "AM";
}
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
//value of current time
let currentTime = hour + ":" + min + ":" + sec + " " + am_pm;
// value of present day(Day, Month, Year)
var months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
var week = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
var presentDay =
week[dayName] + ", " + months[month] + " " + date + ", " + year;
const clock = document.getElementById("time");
const dayIntro = document.getElementById("dayName");
clock.innerHTML = currentTime;
dayIntro.innerHTML = presentDay;
}
currentTime(); //calling currentTime() function to initiate the process
More about Index.html – Digital Clock
- The HTML structure includes a
divwith the iddayIntroto display the day information (e.g., “Wednesday March 12, 2021”). Thepelement with the iddayNameis likely updated with JavaScript to display the current day. - There’s another
divwith the classcontainerthat contains adivwith the classdispClock. Inside thisdiv, there’s anotherdivwith the idtime. This is likely where the current time is displayed, updated by JavaScript. - The CSS file (linked as
style.css) would be responsible for styling these elements to look like a digital clock. - The JavaScript file (linked as
index.js) would contain the logic to get the current date and time, format it appropriately, and update thedayNameandtimeelements in the HTML.
More about Style.css – Digital Clock
This CSS file is styling the HTML elements for the digital clock application. Here’s a breakdown of the styles:
-
@import url("https://fonts.googleapis.com/css?family=Orbitron");: This line imports the Orbitron font from Google Fonts. -
*: This is a universal selector that targets all elements. It sets the margin and padding of all elements to 0. -
html, body: These elements are set to display as a grid with items centered both vertically and horizontally. -
#dayIntro: This id selector targets thedivthat displays the day information. It sets the font size, weight, letter spacing, border, border radius, margin, font family, padding, and background color. The background is a linear gradient. -
.container: This class selector targets the maindivthat contains the clock. It sets the height, width, position, background color (a linear gradient), border radius, and cursor style. -
.container .dispClock, .container: These selectors target thedivthat displays the time and the containerdiv. They set the position, top, left, and transform properties to center thedivboth vertically and horizontally. -
.container .dispClock: This selector targets thedivthat displays the time. It sets the top, height, width, background color (a linear gradient), border radius, and text alignment. -
.dispClock #time: This selector targets thedivthat displays the current time. It sets the line height, color, font size, weight, letter spacing, font family, and background color. The background is a linear gradient and the-webkit-background-clipand-webkit-text-fill-colorproperties are used to make the text transparent and show the background gradient through the text.
These styles are likely used in combination with the HTML structure to create a digital clock with a modern, colorful design.
More about Script.js – Digital Clock
This JavaScript file is responsible for the functionality of the digital clock application. Here’s a breakdown:
-
setInterval(currentTime, 1000);: This line sets up a timer that calls thecurrentTimefunction every 1000 milliseconds (or 1 second). This is how the clock updates every second. -
currentTime(): This function gets the current date and time, formats it, and updates the HTML elements to display it.-
let time = new Date();: This line creates a new Date object with the current date and time. - The next several lines get the current day, month, year, date, hour, minute, and second.
- The
ifstatements determine whether it’s AM or PM and adjust the hour accordingly. - The next three lines add a leading zero to the hour, minute, and second if they’re less than 10.
-
let currentTime = hour + ":" + min + ":" + sec + " " + am_pm;: This line formats the current time as a string. - The
monthsandweekarrays hold the names of the months and days of the week. -
var presentDay = week[dayName] + ", " + months[month] + " " + date + ", " + year;: This line formats the current date as a string. -
const clock = document.getElementById("time"); const dayIntro = document.getElementById("dayName");: These lines get references to the HTML elements that display the time and date. -
clock.innerHTML = currentTime; dayIntro.innerHTML = presentDay;: These lines update the HTML elements with the current time and date.
-
-
currentTime();: This line calls thecurrentTimefunction to start the process.
This script enables the digital clock to display the current date and time, updating every second.
Top comments (0)