You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.6 KiB
99 lines
3.6 KiB
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');
|
|
if (html.classList.contains('dark')) {
|
|
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 {
|
|
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 % 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>`;
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
|
|
// 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();
|