Alarrm Clock Tool

Alarm Clock - WebTools Pro * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary: #4361ee; --secondary: #3a0ca3; --accent: #4cc9f0; --light: #f8f9fa; --dark: #212529; --success: #4CAF50; --warning: #ff9800; --danger: #f44336; --gray: #6c757d; } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .alarm-container { background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); width: 100%; max-width: 500px; overflow: hidden; } .alarm-header { background: var(--primary); color: white; padding: 30px; text-align: center; } .alarm-header h1 { font-size: 2.2rem; margin-bottom: 10px; } .alarm-header p { opacity: 0.9; } .alarm-body { padding: 30px; } .current-time-display { background: var(--light); border-radius: 15px; padding: 25px; text-align: center; margin-bottom: 30px; border: 2px solid #eaeaea; } .time-display { font-size: 4rem; font-weight: 700; color: var(--primary); font-family: 'Courier New', monospace; margin: 10px 0; } .date-display { color: var(--gray); font-size: 1.1rem; } .alarm-form { background: #f8f9fa; padding: 25px; border-radius: 15px; margin-bottom: 30px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark); } .input-group { display: flex; gap: 15px; align-items: center; } .time-input { flex: 1; padding: 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 1.1rem; font-family: 'Courier New', monospace; } .alarm-label-input { width: 100%; padding: 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 1rem; margin-top: 10px; } .btn { display: inline-block; background: var(--primary); color: white; border: none; padding: 15px 30px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; margin-top: 10px; } .btn:hover { background: var(--secondary); transform: translateY(-2px); } .btn-danger { background: var(--danger); } .btn-danger:hover { background: #d32f2f; } .alarms-list { margin-top: 30px; } .alarms-list h3 { margin-bottom: 20px; color: var(--secondary); font-size: 1.3rem; } .alarm-item { display: flex; justify-content: space-between; align-items: center; background: white; padding: 20px; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); border-left: 5px solid var(--primary); transition: all 0.3s ease; } .alarm-item.inactive { opacity: 0.6; border-left-color: var(--gray); } .alarm-info h4 { font-size: 1.4rem; color: var(--dark); margin-bottom: 5px; } .alarm-info p { color: var(--gray); } .alarm-controls { display: flex; gap: 10px; } .control-btn { width: 40px; height: 40px; border-radius: 50%; border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .toggle-btn { background: var(--success); } .delete-btn { background: var(--danger); } .empty-state { text-align: center; padding: 40px 20px; color: var(--gray); } .empty-state i { font-size: 3rem; margin-bottom: 15px; opacity: 0.5; } .notification { position: fixed; top: 20px; right: 20px; background: var(--success); color: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transform: translateX(150%); transition: transform 0.3s ease; z-index: 1000; } .notification.show { transform: translateX(0); } .footer { text-align: center; padding: 20px; color: var(--gray); margin-top: 20px; } @media (max-width: 480px) { .time-display { font-size: 3rem; } .input-group { flex-direction: column; } .alarm-item { flex-direction: column; gap: 15px; text-align: center; } } Alarm Clock Set multiple alarms with custom labels 00:00:00 Monday, January 1, 2023 Set New Alarm Alarm Time Set Alarm Alarm Label (Optional) Active Alarms No alarms set. Set your first alarm above. Alarms are saved in your browser's local storage Alarm triggered! let alarms = JSON.parse(localStorage.getItem('alarms')) || []; let currentTimeInterval; // Initialize current time display function updateCurrentTime() { const now = new Date(); const timeString = now.toLocaleTimeString('en-US', { hour12: false }); const dateString = now.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); document.getElementById('currentTime').textContent = timeString; document.getElementById('currentDate').textContent = dateString; // Check alarms checkAlarms(now); } // Check if any alarm should trigger function checkAlarms(now) { const currentTimeString = now.toTimeString().slice(0, 5); // HH:MM format alarms.forEach(alarm => { if (alarm.active && alarm.time === currentTimeString) { triggerAlarm(alarm); } }); } // Trigger alarm notification function triggerAlarm(alarm) { // Show notification const notification = document.getElementById('notification'); notification.querySelector('i').className = 'fas fa-bell'; notification.innerHTML = ` ${alarm.label || 'Alarm'} - ${alarm.time}`; notification.style.background = 'var(--warning)'; notification.classList.add('show'); // Play alarm sound const alarmSound = document.getElementById('alarmSound'); alarmSound.currentTime = 0; alarmSound.play(); // Auto-hide notification after 10 seconds setTimeout(() => { notification.classList.remove('show'); alarmSound.pause(); }, 10000); // Disable the alarm after triggering alarm.active = false; saveAlarms(); renderAlarms(); } // Set new alarm document.getElementById('setAlarmBtn').addEventListener('click', setAlarm); function setAlarm() { const alarmTimeInput = document.getElementById('alarmTime'); const alarmLabelInput = document.getElementById('alarmLabel'); const alarmTime = alarmTimeInput.value; const alarmLabel = alarmLabelInput.value || 'Alarm'; if (!alarmTime) { showNotification('Please select a time for the alarm.', 'danger'); return; } // Create alarm object const alarm = { id: Date.now(), time: alarmTime, label: alarmLabel, active: true }; alarms.push(alarm); saveAlarms(); renderAlarms(); // Show success notification showNotification(`Alarm set for ${alarmTime}`, 'success'); // Reset form alarmTimeInput.value = '07:30'; alarmLabelInput.value = ''; } // Toggle alarm active state function toggleAlarm(id) { const alarm = alarms.find(a => a.id === id); if (alarm) { alarm.active = !alarm.active; saveAlarms(); renderAlarms(); showNotification( `Alarm ${alarm.active ? 'enabled' : 'disabled'}`, alarm.active ? 'success' : 'warning' ); } } // Delete alarm function deleteAlarm(id) { alarms = alarms.filter(alarm => alarm.id !== id); saveAlarms(); renderAlarms(); showNotification('Alarm deleted', 'danger'); } // Save alarms to localStorage function saveAlarms() { localStorage.setItem('alarms', JSON.stringify(alarms)); } // Render alarms list function renderAlarms() { const alarmsContainer = document.getElementById('alarmsContainer'); if (alarms.length === 0) { alarmsContainer.innerHTML = ` No alarms set. Set your first alarm above. `; return; } // Sort alarms by time alarms.sort((a, b) => a.time.localeCompare(b.time)); let alarmsHTML = ''; alarms.forEach(alarm => { alarmsHTML += ` ${alarm.time} ${alarm.label} ${alarm.active ? 'Active' : 'Inactive'} `; }); alarmsContainer.innerHTML = alarmsHTML; } // Show notification function showNotification(message, type = 'success') { const notification = document.getElementById('notification'); notification.innerHTML = ` ${message}`; notification.style.background = { 'success': 'var(--success)', 'danger': 'var(--danger)', 'warning': 'var(--warning)' }[type]; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } // Initialize document.addEventListener('DOMContentLoaded', function() { // Start clock updateCurrentTime(); currentTimeInterval = setInterval(updateCurrentTime, 1000); // Render existing alarms renderAlarms(); // Allow setting alarm with Enter key document.getElementById('alarmLabel').addEventListener('keypress', function(e) { if (e.key === 'Enter') { setAlarm(); } }); }); // Make functions available globally window.toggleAlarm = toggleAlarm; window.deleteAlarm = deleteAlarm;

Alarrm Clock Tool

Alarm Clock

Set New Alarm

Active Alarms

Tools

Leave a Reply Cancel reply

One swallow does not make the spring

Persuasion is often more effectual than force

Spieth in danger of missing cut

Hibs and Ross County fans on final

Tip of the day: That man again

One swallow does not make the spring

After all is said and done, more is said than done

Knowledge is power

The Future Of Possible

Xbox boss talks Project Scorpio price

Hibs and Ross County fans on final

Alarm Clock

Set New Alarm

Active Alarms

Subscribe to our mailing list to get the new updates!

Online Calculator (CalC)

Related Articles

Leave a Reply Cancel reply

One swallow does not make the spring

After all is said and done, more is said than done

Knowledge is power

The Future Of Possible

Xbox boss talks Project Scorpio price

Hibs and Ross County fans on final