- 👩💻 Violet Engefu
- 👨💻 Moses Mutinda
- 👨💻 Jacob Mwambwa
- 👨💻 Clement Oladokun
A web-based Price Tracker application that allows users to record, visualize, and manage product prices from various suppliers over time.
-
🆕 Add New Price Entry
Easily input product name, supplier, price, date, and quantity/unit using a sleek form. -
📋 View & Manage Records
Displayed in a responsive, user-friendly table with options to:- ✏️ Edit (via modal)
- 🗑️ Delete (with confirmation)
-
🔍 Filter Records
Narrow down data by product name, supplier, or custom date range. -
📈 Price Trends Chart
Dynamic price tracking over time per product-supplier combo using Chart.js. -
📄 Export Data as PDF
With the help of jsPDF and jsPDF-AutoTable. -
🌗 Theme Toggle
Switch between light and dark modes seamlessly. -
❓ Help & Contact
- 🆘 Help Modal: Step-by-step guide
- 📬 Contact Us Modal: Demo contact form (no backend)
-
📱 Responsive Design
Fully mobile-friendly and desktop compatible.
| File | Description |
|---|---|
index.html |
Main HTML structure with UI layout, modals, and linked scripts |
style.css |
Custom styles including responsive design and dark mode support |
script.js |
App logic: theming, localStorage, rendering, filters, modals, and exports |
README.md |
📖 Project documentation (this file) |
- 🔓 Open
index.htmlin your browser. - 📝 Add a new price entry using the form on the left.
- 👁️ View, filter, edit, or delete records in the table.
- 📊 See price trends in the chart above the table.
- 📤 Export your data as a PDF using the Export button.
- 🌞🌙 Switch themes using the moon/sun icon.
- 🆘 Get help or contact us via the Help and Contact Us modals.
- 🧱 Bootstrap 5 – For layout and UI components
- 📊 Chart.js – For data visualization
- 🧾 jsPDF + AutoTable Plugin – For PDF export
- 🎨 Font Awesome – For icons
- 🧠 Custom CSS and JavaScript – For dynamic interactions and styling
⚠️ Note: All data is stored in your browser’s localStorage. No backend or server is used.