Electron Countdown Timer

A modern, feature-rich countdown timer built with Electron, HTML, CSS, and JavaScript.

Features

• ⏰ Countdown Timer: Set and run countdown timers with hours, minutes, and seconds
• 💾 Save & Load: Save frequently used countdowns and load them with one click
• 🌙 Theme Switching: Toggle between light and dark themes
• ⌨️ Keyboard Shortcuts:
  • Spacebar: Start/Pause timer
  • Escape: Reset timer
• 🔔 Notifications: Audio notification when timer completes
• 📱 Responsive Design: Works on different screen sizes
• 💾 Data Persistence: Your saved countdowns and theme preference are remembered

Installation

1. Install dependencies:

npm install

2. Start the application:

npm start

For development mode (with DevTools):

npm run dev

Usage

Setting a Timer

1. Enter hours, minutes, and seconds in the input fields
2. Click "Set Timer" to configure the countdown
3. Click "Start" to begin the countdown

Saving Countdowns

1. Set up your desired timer
2. Enter a name for the countdown
3. Click "Save Current" to save it
4. Saved countdowns appear in the "Saved Countdowns" section

Loading Saved Countdowns

1. Find your saved countdown in the list
2. Click "Load" to set it as the current timer
3. Click "Start" to begin

Theme Switching

• Click the theme toggle button (🌙/☀️) in the top-right corner
• Your theme preference is automatically saved

Keyboard Shortcuts

• Spacebar: Start or pause the timer
• Escape: Reset the timer

File Structure

electron-timer/
├── main.js          # Main Electron process
├── preload.js       # Preload script for secure API exposure
├── index.html       # Main UI structure
├── styles.css       # CSS styling with theme support
├── script.js        # Timer logic and functionality
├── package.json     # Project configuration
└── data.json        # Saved data (created automatically)

Technical Details

• Electron: Cross-platform desktop app framework
• Security: Uses context isolation and preload scripts for secure API exposure
• Data Storage: JSON file-based persistence for saved countdowns and preferences
• Styling: CSS custom properties for easy theme management
• Accessibility: Proper ARIA labels and keyboard navigation

Building for Distribution

To build the application for distribution:

npm run build

This will create distributable packages for your platform.

License

ISC License