c0921720
8 months ago
parent
a90f6d3936
commit
b08f3e9b61
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@ -1,48 +1,98 @@
|
||||
const hourEl = document.querySelector('.hour')
|
||||
const minuteEl = document.querySelector('.minute')
|
||||
const secondEl = document.querySelector('.second')
|
||||
const timeEl = document.querySelector('.time')
|
||||
const dateEl = document.querySelector('.date')
|
||||
const toggle = document.querySelector('.toggle')
|
||||
const hourEl = document.querySelector('.hour');
|
||||
const minuteEl = document.querySelector('.minute');
|
||||
const secondEl = document.querySelector('.second');
|
||||
const timeEl = document.querySelector('.time');
|
||||
const dateEl = document.querySelector('.date');
|
||||
const toggle = document.querySelector('.toggle');
|
||||
const alarmTimeEl = document.querySelector('#alarm-time');
|
||||
const setAlarmButton = document.querySelector('.set-alarm');
|
||||
const alarmStatusEl = document.querySelector('.alarm-status');
|
||||
const alarmNotification = document.querySelector('#alarm-notification');
|
||||
const weatherLocationEl = document.querySelector('.weather-location');
|
||||
const weatherDescriptionEl = document.querySelector('.weather-description');
|
||||
const weatherTempEl = document.querySelector('.weather-temp');
|
||||
|
||||
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
||||
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
|
||||
let alarmTime = null;
|
||||
|
||||
// Load the alarm sound
|
||||
const alarmSound = new Audio('./mixkit-digital-clock-digital-alarm-buzzer-992.wav');
|
||||
|
||||
toggle.addEventListener('click', (e) => {
|
||||
const html = document.querySelector('html')
|
||||
const html = document.querySelector('html');
|
||||
if (html.classList.contains('dark')) {
|
||||
html.classList.remove('dark')
|
||||
e.target.innerHTML = 'Dark mode'
|
||||
html.classList.remove('dark');
|
||||
e.target.innerHTML = 'Dark mode';
|
||||
} else {
|
||||
html.classList.add('dark');
|
||||
e.target.innerHTML = 'Light mode';
|
||||
}
|
||||
});
|
||||
|
||||
setAlarmButton.addEventListener('click', () => {
|
||||
alarmTime = alarmTimeEl.value;
|
||||
if (alarmTime) {
|
||||
alarmStatusEl.textContent = `Alarm set for ${alarmTime}`;
|
||||
} else {
|
||||
html.classList.add('dark')
|
||||
e.target.innerHTML = 'Light mode'
|
||||
alarmStatusEl.textContent = 'Please set a valid time for the alarm';
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
function setTime() {
|
||||
const time = new Date();
|
||||
const month = time.getMonth()
|
||||
const day = time.getDay()
|
||||
const date = time.getDate()
|
||||
const hours = time.getHours()
|
||||
const hoursForClock = hours >= 13 ? hours % 12 : hours;
|
||||
const minutes = time.getMinutes()
|
||||
const seconds = time.getSeconds()
|
||||
const ampm = hours >= 12 ? 'PM' : 'AM'
|
||||
|
||||
hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`
|
||||
minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`
|
||||
secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`
|
||||
|
||||
timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
|
||||
dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`
|
||||
const month = time.getMonth();
|
||||
const day = time.getDay();
|
||||
const date = time.getDate();
|
||||
const hours = time.getHours();
|
||||
const hoursForClock = hours % 12 || 12; // Adjust for 12-hour format
|
||||
const minutes = time.getMinutes();
|
||||
const seconds = time.getSeconds();
|
||||
const ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
|
||||
hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`;
|
||||
minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`;
|
||||
secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`;
|
||||
|
||||
timeEl.innerHTML = `${hoursForClock}:${minutes.toString().padStart(2, '0')} ${ampm}`;
|
||||
dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
|
||||
}
|
||||
|
||||
// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
|
||||
const scale = (num, in_min, in_max, out_min, out_max) => {
|
||||
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
||||
function checkAlarm() {
|
||||
const time = new Date();
|
||||
const hours = time.getHours();
|
||||
const minutes = time.getMinutes();
|
||||
const currentTime = `${hours}:${minutes.toString().padStart(2, '0')}`;
|
||||
|
||||
if (alarmTime && currentTime === alarmTime) {
|
||||
alarmSound.play(); // Play alarm sound
|
||||
showAlarmNotification(); // Show the notification
|
||||
alarmTime = null; // Reset alarm after triggering
|
||||
alarmStatusEl.textContent = 'No alarm set';
|
||||
}
|
||||
}
|
||||
|
||||
// Show the alarm notification on the webpage
|
||||
function showAlarmNotification() {
|
||||
alarmNotification.classList.add('show'); // Show the notification
|
||||
setTimeout(() => {
|
||||
alarmNotification.classList.remove('show'); // Hide the notification after 5 seconds
|
||||
}, 5000); // Notification disappears after 5 seconds
|
||||
}
|
||||
|
||||
setTime()
|
||||
|
||||
setInterval(setTime, 1000)
|
||||
// Scale function for time rotation
|
||||
const scale = (num, in_min, in_max, out_min, out_max) => {
|
||||
return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
|
||||
};
|
||||
|
||||
// Set the clock and weather widget
|
||||
setTime();
|
||||
setInterval(() => {
|
||||
setTime();
|
||||
checkAlarm(); // Check if the alarm time is reached
|
||||
}, 1000);
|
||||
|
||||
// Initialize weather widget
|
||||
getLocation();
|
||||
|
||||
Loading…
Reference in new issue