Plan your eating windows easily with this free intermittent fasting tracker. Generate hourly schedules for 16:8, 18:6, and custom fasting plans instantly.
AI Generation Prompt
Intermittent Fasting Window Tracker & Hourly Schedule Tool
Technical Overview
A single-file, browser-based utility designed for users to plan and visualize their intermittent fasting lifestyle. The application is built using pure Vanilla JS, HTML5, and CSS3, ensuring high performance without external dependencies.
Core Features
- Dynamic Protocol Selector: Switch between 16:8, 18:6, 20:4, and Custom modes.
- Real-Time Visualizer: A circular or linear progress bar showing the current state (Fasting vs. Eating).
- Hourly Timeline Generator: A calculated list of the day showing status (e.g., "08:00 - Fasting", "12:00 - Eating Window Opens").
- Countdown Timer: Live countdown to the next phase change.
- Responsive Design: Mobile-first layout that works on smartphones, tablets, and desktops.
- No-Storage Policy: Everything is handled in-memory. State resets on refresh for complete privacy.
UI/UX Specification
- Color Palette: Professional light-mode aesthetic.
- Primary: #2563eb (Blue - Trust/Health)
- Secondary: #f3f4f6 (Light Gray - Backgrounds)
- Accent: #10b981 (Green - Eating/Success)
- Warning: #f59e0b (Amber - Fasting/Caution)
- Text: #1f2937 (Dark Gray - Readability)
- Layout Structure:
- Header: Title and brief instruction sub-heading.
- Main Tool Area: Input fields (Start Time, Window Duration), followed by a high-visibility countdown display.
- Dashboard: A prominent visual progress bar indicating current status.
- Schedule View: A scrollable table or list showing the hourly status breakdown for a 24-hour cycle.
- Animations: Subtle CSS transitions (ease-in-out) for progress bar filling and smooth opacity shifts when swapping between modes.
Implementation Directives
- Frameworks: No React, Vue, or Angular. Use raw DOM manipulation (
document.getElementById,addEventListener). - Iframe Compatibility: The app must be fully functional in a null-origin iframe. Avoid
localStorageorcookies. Pass state via variables. - Styling: Use Tailwind CSS via CDN for rapid, consistent styling. Ensure high contrast and professional typography (Inter or System UI fonts).
- Interactivity: Use
setIntervalfor the live clock and countdown update. Ensure no popups oralert()calls—use custom CSS modals if interaction requires attention. - SEO: Every element should be semantically marked up (e.g.,
<main>,<section>,<h1>) for optimal search engine indexing.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I use this intermittent fasting window tracker?
To use this tool, simply select your preferred fasting protocol from the available presets or define your own custom eating and fasting window hours. Once you input your desired start time, the application will automatically calculate your daily schedule, identifying the exact hours for your eating period and your fasting period. The dashboard provides a real-time visual progress bar indicating exactly where you are in your current fasting or eating cycle. Simply view the generated hourly schedule table to see your day mapped out, ensuring you stay consistent with your health goals without the need for complex account setups or tracking.
What fasting protocols are supported in this tool?
This application supports the most popular intermittent fasting protocols out of the box, including the 16:8 method, 18:6 method, and the 20:4 (Warrior Diet) schedule. These presets are designed to instantly configure the calculation engine for standard cycles, but you are not limited to these options alone. You can easily toggle to the custom mode to define any combination of fasting and eating hours that suit your specific lifestyle or medical needs. The tool dynamically updates the visual timeline and hourly breakdown immediately upon changing these parameters, allowing for maximum flexibility in your health journey.
Is my fasting data saved in this application?
This application is designed with a strict privacy-first approach and does not store any of your data. Because this tool runs entirely within your browser's memory, no information is saved to your local storage, cookies, or any external database. This ensures your fasting schedule and configuration remain completely private to your specific session. Since no persistence mechanisms like localStorage or IndexedDB are used, refreshing the page will reset the application to its default state. This architecture is intentional to provide a zero-footprint utility that you can use securely on any device without leaving a digital trail of your health routines.
Can I customize my fasting start time?
Yes, you can completely customize the fasting start time to align with your personal daily rhythm. The application includes an interactive time selector that allows you to set the exact hour when your fasting or eating window begins. Once updated, the app recalculates the entire hourly timeline dynamically. This feature is particularly useful if your schedule changes day-to-day, such as shifting your eating window earlier on weekends or later during workdays. The visual interface will immediately adjust the progress countdown, providing accurate feedback on how many hours remain until your next fasting or eating phase begins.
