Below is the format in which the current day and time is to be printed
Today is : Wednesday
Current time is : 12 PM : 9 : 4
JavaScript Code :
var today = new Date();
var day = today.getDay();
var dayl = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
console.log(`Today is : ${dayl[day]}`);
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var merid = (h >= 12) ? " PM " : " AM ";
h = (h >= 12) ? h - 12 : h;
if (h === 0 && merid === " PM ") {
if (m === 0 && s === 0) {
h = 12;
merid = " Noon ";
}
else {
h = 12;
merid = " PM ";
}
}
if (h === 0 && merid === " AM ") {
if (m === 0 && s === 0) {
h = 12;
merid = " Midnight ";
}
else {
h = 12;
merid = " AM ";
}
}
console.log(`Current Time is : ${h}${merid} : ${m} : ${s}`);
Sample Output : Live Demo
Today is : Sunday
Current Time is : 1 PM : 30 : 13
Explanation :
Declare JavaScript Date Object, it contains various method for date and time. It is based on a time value that is the number of milliseconds since 1 January, 1970 UTC.
getDay() method is used to get the day of the local date. It returns the number of the day such that 0 correspond to Sunday, 1 correspond to Monday and so on. dayl is the list which contains all the day name.
getHours() method is used to get the hours of the local time. It returns the value from 0 to 23.
getMinutes() and getSeconds() method is used to get the minutes and seconds of the local time respectively. They return the value from 0 to 59
merid variable calculate and stores whether the time is in PM or AM
if h is greater than or equal to 12 then merid is PM else AM.
h is converted to 12 hour format
Then conditions are applied to the script using if else statements which can be easily understood by reading.
Implementation :
HTML Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day Time</title>
</head>
<body>
<button>Run</button>
<h3 id="day">Today is :</h3>
<h3 id="time">Current Time is :</h3>
<script src="daytime.js"></script>
</body>
</html>
daytime.js (JavaScript)
To use JavaScript with HTML some modifications are made in above java Script Code
let btn = document.querySelector('button');
let out1 = document.querySelector('#day')
let out2 = document.querySelector('#time')
btn.addEventListener('click', () => {
var today = new Date();
var day = today.getDay();
var dayl = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let outday = `Today is : ${dayl[day]}`;
out1.innerText = outday;
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var merid = (h >= 12) ? " PM " : " AM ";
h = (h >= 12) ? h - 12 : h;
if (h === 0 && merid === " PM ") {
if (m === 0 && s === 0) {
h = 12;
merid = " Noon ";
}
else {
h = 12;
merid = " PM ";
}
}
if (h === 0 && merid === " AM ") {
if (m === 0 && s === 0) {
h = 12;
merid = " Midnight ";
}
else {
h = 12;
merid = " AM ";
}
}
let outtime = `Current Time is : ${h}${merid} : ${m} : ${s}`;
out2.innerText = outtime;
});
Query Selectors are used to select various items in the HTML file. Event Listener is added to the button. Event Listener wait for the event to occur and runs the arrow function after the event had occurred. innerText is used to replace the text written in the component which is selected by the query selector.
Run the code by clicking the run button :
0 Comments
Ask Your Queries in the comments