Shift Visualizer
by Tim Bachmann published on
Links
A client-side web application for visualizing daily work shifts with special handling for overnight shifts. Built with vanilla JavaScript, HTML, and CSS - no frameworks or build process required.
Features
- 📅 View shifts by date with easy navigation
- 🌙 Automatic overnight shift detection and display
- 💾 Local storage persistence (no backend required)
- 📱 Mobile-responsive design
- 🎨 Color-coded shifts by shift type
- ✅ JSON validation with detailed error messages
- 🔄 Merge capability to update existing shifts
The application is 100% client-side with no network calls, works completely offline once loaded, and stores all data in the browser's localStorage. It uses ES6 modules with native browser support, making it a lightweight solution for managing and visualizing work schedules.
Hi, my name is Tim Bachmann! I'm a software engineer at Coop Genossenschaft, swimmer and swim coach.
I am passionate about all things web development, swimming, personal knowledge management and much more. If you liked this or any of my posts, feel free to follow me.