A comprehensive, mobile-optimized timer application specifically designed for IELTS practice sessions. Features include customizable timers for all four IELTS skills, audio notifications, and a beautiful responsive interface.
- Multi-skill Support: Dedicated timers for Reading, Writing, Speaking, and Break sessions
- Preset Timers: Quick-start buttons for common IELTS practice durations
- Custom Timers: Set any duration within reasonable limits
- Visual Progress: Beautiful circular progress indicator with color transitions
- Audio Notifications: Sound alerts for timer completion and warnings
- Responsive Design: Optimized for both desktop and mobile devices
- Touch-friendly Interface: Large buttons and intuitive gestures
- Mobile Menu: Slide-out control panel for mobile devices
- Zoom Prevention: Prevents unwanted zooming on mobile input fields
- Cross-browser Compatibility: Works on iOS Safari, Android Chrome, and WeChat browser
- Click Controls: Click timer circle to pause/resume, double-click to stop
- Keyboard Shortcuts: Space to pause/resume, ESC to close modals
- Day/Night Mode: Toggle between light and dark themes
- Sound Settings Guide: Helpful instructions for audio setup
- Completion Celebrations: Animated completion notifications
Visit the live application: https://noahs-ielts-timer.vercel.app/
IELTSTimer/
├── public/
│ ├── src/
│ │ ├── css/
│ │ │ └── styles.css # Custom CSS styles
│ │ └── js/
│ │ └── timer.js # JavaScript functionality
│ └── index.html # Main HTML file (for deployment)
├── archive/
│ └── index-legacy.html # Original single-file version
├── package.json # Project configuration
├── .gitignore # Git ignore rules
└── README.md # Project documentation
- HTML5: Semantic markup and modern web standards
- CSS3: Custom styles with Flexbox and Grid layouts
- JavaScript (ES6+): Modern JavaScript with modules and classes
- Tailwind CSS: Utility-first CSS framework
- Font Awesome: Icon library
- Web Audio API: For cross-platform audio notifications
- Python 3.x (for local development server)
- Modern web browser (Chrome, Firefox, Safari, Edge)
-
Clone the repository
git clone https://github.com/XujunNoahWang/IELTSTimer.git cd IELTSTimer -
Start the development server
npm start # or python -m http.server 8000 -
Open in browser Navigate to
http://localhost:8000
For a simple setup without a server, you can open public/index.html directly in your browser, though some features may require a server environment.
- Select a timer category (Reading, Writing, Speaking, Break)
- Click a preset time or enter a custom duration
- Click the circular timer to pause/resume
- Use keyboard shortcuts for quick control
- Tap the hamburger menu (☰) to open the control panel
- Select your desired timer
- The panel will automatically close when a timer starts
- Tap the timer circle to pause/resume
- Start: Click any timer button
- Pause/Resume: Click the timer circle or press Space
- Stop: Double-click the timer circle or press ESC
- Sound Settings: Click the orange notification button (!)
Edit the timer buttons in public/index.html:
<button onclick="startTimer(25, 'Reading')">25 min</button>Modify public/src/css/styles.css to customize:
- Colors and themes
- Layout and spacing
- Animations and transitions
- Mobile responsiveness
Extend functionality in public/src/js/timer.js:
- New timer types
- Additional audio notifications
- Enhanced mobile features
- Data persistence
- Modular Design: Separated HTML, CSS, and JavaScript
- Clean Architecture: Well-organized functions and modules
- Responsive First: Mobile-first design approach
- Cross-browser: Tested on major browsers and platforms
- Semantic HTML markup
- CSS custom properties for theming
- Modern JavaScript features
- Accessibility considerations
- Performance optimization
| Browser | Version | Status |
|---|---|---|
| Chrome | 70+ | ✅ Full Support |
| Firefox | 65+ | ✅ Full Support |
| Safari | 12+ | ✅ Full Support |
| Edge | 79+ | ✅ Full Support |
| iOS Safari | 10+ | ✅ Full Support |
| Android Chrome | 70+ | ✅ Full Support |
| WeChat Browser | Latest | ✅ Full Support |
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow the existing code style
- Test on multiple devices and browsers
- Update documentation as needed
- Ensure mobile compatibility
This project is licensed under the MIT License - see the LICENSE file for details.
- Tailwind CSS for the utility-first CSS framework
- Font Awesome for the beautiful icons
- The IELTS community for inspiration and feedback
- Vercel for hosting the live demo
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue if your problem isn't already reported
- Provide detailed information about your browser and device
Happy IELTS practicing! 🎯