PCF 113524
HTML
<div id="clock">
<h5 id="date-time"></h5>
</div>
<button-pop-up onclick="openInteractivePopup()"> ⛅ </button-pop-up>
JavaScript
window.addEventListener("load", () => {
clock();
function clock() {
const today = new Date();
// get time components
const hours = today.getHours();
const minutes = today.getMinutes();
const seconds = today.getSeconds();
//add '0' to hour, minute & second when they are less 10
const hour = hours < 10 ? "0" + hours : hours;
const minute = minutes < 10 ? "0" + minutes : minutes;
const second = seconds < 10 ? "0" + seconds : seconds;
//make clock a 12-hour time clock
const hourTime = hour > 24 ? hour - 24 : hour;
if (hour < 18 ) {
Saluto = "☀️";
} else {
Saluto = "🌙 ";
}
// if (hour === 0) {
// hour = 12;
// }
//assigning 'am' or 'pm' to indicate time of the day
const ampm = hour < 12 ? "" : "";
// get date components
const month = today.getMonth();
const day = today.getDate();
//declaring a list of all months in a year
const monthList = [
"Gennaio",
"Febbraio",
"Marzo",
"Aprile",
"Maggio",
"Giugno",
"Luglio",
"Agosto",
"Settembre",
"Ottobre",
"Novembre",
"Decembre"
];
//get current date and time
function getWeekDay(date) {
let days = ['DOM', 'LUN', 'MAR', 'MER', 'GIO', 'VEN', 'SAB'];
return days[date.getDay()];
}
const date = Saluto + day + " " + monthList[month] + " ";
const time = hourTime + ":" + minute + ":" + second + ampm;
//combine current date and time
const dateTime = date + time + " (" + getWeekDay(today) + ")";
//print current date and time to the DOM
document.getElementById("date-time").innerHTML = dateTime;
setTimeout(clock, 1000);
}
});
// Function to open a popup and control its content and behavior
function openInteractivePopup() {
// Open a new window with specific dimensions
let popup = window.open("", "InteractivePopupExample", "width=995,height=600");
//...