https://github.com/ctoic/bread_tracker
Counting breads ate by students to avoid zaya of roti.
https://github.com/ctoic/bread_tracker
Last synced: 6 months ago
JSON representation
Counting breads ate by students to avoid zaya of roti.
- Host: GitHub
- URL: https://github.com/ctoic/bread_tracker
- Owner: Ctoic
- Created: 2024-12-26T06:57:14.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-26T07:45:48.000Z (about 1 year ago)
- Last Synced: 2025-05-17T08:11:18.558Z (8 months ago)
- Language: HTML
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍞 Weekly Bread Tracker
A simple yet powerful web application to track bread consumption across different days of the week. Built with HTML, CSS, and JavaScript, featuring a clean and modern interface with data persistence.
# ✨ Features
Daily Tracking: Separate bread count tracking for each day of the week
Persistent Storage: Data automatically saves to localStorage
Interactive UI: Modern, animated interface with real-time updates
Responsive Design: Works seamlessly on both desktop and mobile devices
History Tracking: Maintains detailed consumption history with timestamps
Visual Feedback: Animated alerts and transitions for user actions
# 🚀 Quick Start
Clone the repository:
bashCopygit clone https://github.com/yourusername/weekly-bread-tracker.git
Open index.html in your web browser
That's it! No build process or dependencies to install.
💻 Technologies Used
HTML5
CSS3
JavaScript (ES6+)
Bootstrap 5.2.3
Animate.css
📱 Usage
Select a Day: Click on any day of the week to view/edit that day's records
Add Entry:
Enter the person's name
Input number of breads eaten
Click Submit
View History: Click "View History" to see the consumption log
Track Different Days: Switch between days using the day selector buttons
🎯 Features in Detail
Daily Tracking
Each day starts with 80 breads
Independent tracking for each day of the week
Visual feedback for remaining bread count
History Management
Detailed history log for each day
Records include:
Name of person
Number of breads eaten
Timestamp
Day of the week
Data Persistence
All data automatically saves to browser's localStorage
Data persists across page refreshes and browser sessions
Separate storage for each day's records
🎨 UI Features
- Gradient background
- Modern card design with shadows
- Animated transitions and effects
- Responsive day selector
- Interactive buttons with hover effects
- Success/error notifications
- Clean and intuitive layout
🛠️ Technical Implementation
Uses Bootstrap for responsive grid and components
Implements localStorage for data persistence
Utilizes Animate.css for smooth animations
Modern JavaScript ES6+ features
No backend required - runs entirely in the browser
🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check issues page.
💡 Development Notes
This application was developed with the assistance of Anthropic's Claude AI, which helped in:
- Initial application structure
- UI/UX design recommendations
- Implementation of weekly tracking system
- Data persistence logic
- Animation and styling enhancements
# 📜 License
This project is licensed under the MIT License - see the LICENSE file for details.
# 🙏 Acknowledgments
Built with the assistance of Claude by Anthropic
Uses Bootstrap for styling
Uses Animate.css for animations