1. Basic Usage

Step 1: Set Clock-In Time

1. Open the calculator in your web browser
2. Under “Clock In” section:
   • Select hour (1-12) from first dropdown
   • Select minutes (00-59) from second dropdown
   • Choose AM/PM from third dropdown

Step 2: Set Clock-Out Time

3. Under “Clock Out” section:
   • Select hour (1-12)
   • Select minutes (00-59)
   • Choose AM/PM

Step 3: Calculate Hours

4. Click the purple “Calculate Hours” button
5. View results in the “Total Hours” card

2. Advanced Features

History Tracking 📅

• All calculations are automatically saved below
• View timestamps and hours worked
• Delete individual entries: Click × on any history item
• History persists even after closing browser (saved locally)

Dark Mode 🌙

• Click the moon icon (🌓) in top-right corner
• Toggle between light/dark themes
• Preference not saved between sessions

Overnight Shifts 🌜→🌞

• Calculator automatically handles midnight crossings
• Example: 10 PM to 2 AM will correctly show 4 hours

3. Special Functions

Reset Calculator 🔄

• Refresh the page to clear all inputs
• Note: This preserves history until browser cache is cleared

Export History 📤

1. Right-click on history section
2. Select “Print” to save as PDF
3. Or manually copy-paste entries

Mobile Use 📱

• Fully responsive design
• Works offline after first load
• Optimized for touch input

4. Pro Tips

• Quick Entry: Use keyboard numbers to navigate dropdowns
• Decimal Hours: Results show in decimal format (e.g., 4.50 hours = 4h 30m)
• 24-hour Conversion: AM/PM automatically converts to military time
• Error Handling: Invalid times show 0.00 hours

5. Technical Notes

• Browser Support: Chrome/Firefox/Edge latest versions
• Data Storage: History saved in browser’s local storage
• Security: No data leaves your device
• Accessibility: Keyboard-navigable interface

Troubleshooting 🔧

Issue	Solution
No history showing	Check browser’s local storage permissions
Negative hours	Ensure AM/PM selections are correct
Stuck at 0.00 hours	Verify both time periods are set
Theme not changing	Hard refresh page (Ctrl+F5)

Example Workflow:

markdown

Copy

1. Clock In: 9:00 AM
2. Clock Out: 5:30 PM
3. Click Calculate → Shows 8.50 hours
4. Repeat for next day
5. View cumulative total in history

This calculator is ideal for freelancers, hourly workers, and project time tracking. All calculations comply with standard labor hour regulations. ⏱️💼