/** @jsxImportSource https://esm.sh/react */ import React, { useCallback, useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [alarms, setAlarms] = useState([]); const [timers, setTimers] = useState([]); const [notification, setNotification] = useState(""); const [notificationPermission, setNotificationPermission] = useState(false); const [currentPeriod, setCurrentPeriod] = useState(""); const log = useCallback((message) => { console.log(`[${new Date().toISOString()}] ${message}`); }, []); const validateTime = (timeString) => { const timeRegexWithAmPm = /^(0?[1-9]|1[0-2])(:?)([0-5][0-9])?(\s?)(am|pm)?$/i; return timeRegexWithAmPm.test(timeString); }; const convertTo24Hour = (timeString, forcePM = false) => { const timeRegexWithAmPm = /^(\d{1,2})(:?)(\d{2})?(\s?)(am|pm)?$/i; const match = timeString.match(timeRegexWithAmPm); if (!match) return null; let [_, hours, __, minutes = "00", ___, modifier] = match; hours = parseInt(hours, 10); if (!modifier) { modifier = forcePM ? "pm" : currentPeriod.toLowerCase(); } if (hours === 12) { hours = modifier.toLowerCase() === "pm" ? 12 : 0; } else if (modifier.toLowerCase() === "pm") { hours += 12; } return `${hours.toString().padStart(2, "0")}:${minutes}`; }; const validateTimerInput = (input) => { if (input.includes(":")) { return /^(\d{1,2}):([0-5][0-9])$/.test(input); } return /^\d+$/.test(input); }; const parseTimerInput = (input) => { let hours = 0; let minutes = 0; if (input.includes(":")) { const [h, m] = input.split(":").map(Number); hours = h; minutes = m; } else { minutes = parseInt(input); hours = Math.floor(minutes / 60); minutes = minutes % 60; } return { hours, minutes, totalMinutes: hours * 60 + minutes }; }; const addAlarm = (e) => { e.preventDefault(); let timeInput = e.target.alarmTime.value.trim(); if (!validateTime(timeInput)) { setNotification("Invalid time format. Please use HH:MM or HHMM format"); log(`Invalid time format: ${timeInput}`); return; } const now = new Date(); const currentHour = now.getHours(); const currentMinute = now.getMinutes(); let forcePM = false; let notificationMessage = "Alarm set successfully!"; if (!timeInput.toLowerCase().includes("am") && !timeInput.toLowerCase().includes("pm")) { const inputHour = parseInt(timeInput.split(":")[0]); const inputMinute = parseInt(timeInput.split(":")[1] || "0"); if (inputHour < currentHour || (inputHour === currentHour && inputMinute <= currentMinute)) { forcePM = true; notificationMessage = "Time is before current time. Alarm set for PM."; log(`Time before current, setting for PM: ${timeInput}`); } timeInput = `${timeInput} ${forcePM ? "PM" : currentPeriod}`; } const time24 = convertTo24Hour(timeInput, forcePM); if (!time24) { setNotification("Error converting time. Please try again."); log(`Error converting time: ${timeInput}`); return; } const [hours, minutes] = time24.split(":"); let alarmTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), parseInt(hours), parseInt(minutes)); let isForTomorrow = false; if (alarmTime < now) { notificationMessage = "This time has already passed today. Setting alarm for tomorrow."; log(`Time already passed, setting for tomorrow: ${timeInput}`); alarmTime.setDate(alarmTime.getDate() + 1); isForTomorrow = true; sendNotification( "Alarm Set for Tomorrow", `Your alarm for ${timeInput} has been scheduled for tomorrow`, ); } const newAlarm = { id: Date.now(), time: timeInput, time24: time24, timestamp: alarmTime.getTime(), triggered: false, isForTomorrow, }; setAlarms(prevAlarms => [...prevAlarms, newAlarm]); e.target.alarmTime.value = ""; setNotification(notificationMessage); log(`Alarm set: ${JSON.stringify(newAlarm)}`); }; const setTimer = (e) => { e.preventDefault(); const timeStr = e.target.timerTime.value.trim(); if (!validateTimerInput(timeStr)) { setNotification("Please enter time in HH:MM format (e.g. 01:30) or just minutes (e.g. 90)"); log(`Invalid timer input: ${timeStr}`); return; } const { hours, minutes, totalMinutes } = parseTimerInput(timeStr); if (totalMinutes <= 0) { setNotification("Please enter a duration greater than 0"); return; } const end = new Date(Date.now() + totalMinutes * 60000); const newTimer = { id: Date.now(), endTime: end, notificationSent: false, duration: `${hours}h ${minutes}m`, }; setTimers(prevTimers => [...prevTimers, newTimer]); e.target.timerTime.value = ""; let notificationText = []; if (hours > 0) notificationText.push(`${hours} hour${hours > 1 ? "s" : ""}`); if (minutes > 0) notificationText.push(`${minutes} minute${minutes > 1 ? "s" : ""}`); setNotification(`Timer set for ${notificationText.join(" and ")}`); log(`Timer set: ${JSON.stringify(newTimer)}`); }; const deleteAlarm = (id) => { setAlarms(prevAlarms => prevAlarms.filter(alarm => alarm.id !== id)); setNotification("Alarm deleted successfully"); log(`Alarm deleted: ${id}`); }; const deleteTimer = (id) => { setTimers(prevTimers => prevTimers.filter(timer => timer.id !== id)); setNotification("Timer deleted successfully"); log(`Timer deleted: ${id}`); }; const requestNotificationPermission = async () => { try { const permission = await Notification.requestPermission(); setNotificationPermission(permission === "granted"); if (permission === "granted") { setNotification("Notification permission granted!"); log("Notification permission granted"); } else { setNotification("Notification permission denied. You won't receive push notifications."); log("Notification permission denied"); } } catch (error) { console.error("Error requesting notification permission:", error); setNotification("Error requesting notification permission. Please try again."); log(`Error requesting notification permission: ${error.message}`); } }; const sendNotification = (title, body) => { if (Notification.permission === "granted") { new Notification(title, { body }); log(`Notification sent: ${title} - ${body}`); } }; const cleanupExpiredAlarms = useCallback(() => { const now = Date.now(); setAlarms(prevAlarms => { const updatedAlarms = prevAlarms.filter(alarm => { if (alarm.timestamp < now && alarm.triggered) { log(`Removing expired alarm: ${JSON.stringify(alarm)}`); return false; } return true; }); return updatedAlarms; }); }, [log]); const cleanupExpiredTimers = useCallback(() => { const now = Date.now(); setTimers(prevTimers => { const updatedTimers = prevTimers.filter(timer => { if (timer.endTime < now && timer.notificationSent) { log(`Removing expired timer: ${JSON.stringify(timer)}`); return false; } return true; }); return updatedTimers; }); }, [log]); useEffect(() => { const updateCurrentPeriod = () => { const period = new Date().getHours() >= 12 ? "PM" : "AM"; setCurrentPeriod(period); }; updateCurrentPeriod(); const interval = setInterval(updateCurrentPeriod, 60000); return () => clearInterval(interval); }, []); useEffect(() => { log("Setting up alarm and timer check interval"); const checkAlarmsAndTimers = setInterval(() => { const now = new Date(); setAlarms(prevAlarms => prevAlarms.map(alarm => { if (alarm.timestamp <= now.getTime() && !alarm.triggered) { sendNotification("Alarm!", `It's ${alarm.time}`); log(`Triggering alarm: ${JSON.stringify(alarm)}`); return { ...alarm, triggered: true }; } return alarm; }) ); setTimers(prevTimers => prevTimers.map(timer => { if (now >= timer.endTime && !timer.notificationSent) { sendNotification("Timer ended!", "Your timer has finished."); log(`Timer ended: ${JSON.stringify(timer)}`); return { ...timer, notificationSent: true }; } return timer; }) ); cleanupExpiredAlarms(); cleanupExpiredTimers(); }, 1000); return () => { clearInterval(checkAlarmsAndTimers); log("Cleared alarm and timer check interval"); }; }, [cleanupExpiredAlarms, cleanupExpiredTimers, log]); useEffect(() => { if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js") .then(registration => { log("Service Worker registered"); console.log("Service Worker registered"); }) .catch(error => { log(`Service Worker registration failed: ${error.message}`); console.error("Service Worker registration failed:", error); }); } setNotificationPermission(Notification.permission === "granted"); log(`Initial notification permission: ${Notification.permission}`); }, [log]); return (

⏰ Alarm & Timer App

{notification &&

{notification}

} {!notificationPermission && ( )}

Set Alarm

Enter time as HH:MM or HHMM (e.g., 09:30 or 0930). Current period: {currentPeriod}{" "} (will be used if AM/PM is not specified)

{alarm.time} -{" "} {alarm.triggered ? "Triggered" : (alarm.isForTomorrow ? "Will go off tomorrow" : "Alarm set for today")}

Set Timer

Duration: {timer.duration} - Ends at {timer.endTime.toLocaleTimeString()} {timer.notificationSent ? " - Finished" : ""}

View source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/sw.js") { return new Response( ` self.addEventListener('install', (event) => { event.waitUntil(self.skipWaiting()); }); self.addEventListener('activate', (event) => { event.waitUntil(self.clients.claim()); }); self.addEventListener('push', (event) => { const data = event.data.json(); self.registration.showNotification(data.title, { body: data.body, icon: '/icon.png' }); }); `, { headers: { "Content-Type": "application/javascript", }, }, ); } return new Response( ` Alarm & Timer App

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; } .container { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .section { margin-bottom: 30px; } h1, h2 { color: #333; } input { padding: 8px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } button { padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } .delete-btn { background-color: #f44336; margin-left: 10px; } .delete-btn:hover { background-color: #da190b; } .notification { padding: 10px; margin-bottom: 20px; background-color: #dff0d8; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c763d; } .helper-text { color: #666; font-size: 0.9em; margin: 5px 0; } .alarm-item, .timer-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; margin: 5px 0; background-color: #f8f9fa; border-radius: 4px; } .permission-btn { background-color: #007bff; margin-bottom: 20px; } .permission-btn:hover { background-color: #0056b3; } .footer { text-align: center; margin-top: 20px; color: #666; } .footer a { color: #007bff; text-decoration: none; } .footer a:hover { text-decoration: underline; } `;

SafeReminder