A professional, interactive web application for tracking student payments. Built with vanilla HTML, CSS, and JavaScript with no external dependencies.
Professional dashboard with real-time statistics and payment tracking.
Intuitive form with validation and helpful user feedback.
Searchable, sortable table with all transaction records.
- ✅ Add New Payment: Record student payments with comprehensive details
- 📊 Payment History: View all payments in an organized table format
- 💾 Data Persistence: Automatic saving using browser localStorage
- 📈 Real-time Statistics: Track total payments, amounts, and monthly totals
- 🔔 Notification System: Visual feedback for user actions
- 📤 Export to CSV: Download payment records for external use
- 🔍 Search Functionality: Find payments instantly across all fields
⚠️ Confirmation Dialogs: Prevent accidental data deletion
- 🎯 Loading Screen: Professional animated loading on page load
- 💡 Quick Stats Widget: Average payment, highest payment, recent students
- 🎨 Modern UI/UX: Gradient design with smooth animations
- 📱 Fully Responsive: Works seamlessly on mobile, tablet, desktop
- ⚡ Fast Performance: Optimized rendering and data management
- 🔐 Secure: XSS protection and input validation
- ♿ Accessible: Semantic HTML and ARIA labels
- Download all files to your computer
- Open
index.htmlin any modern web browser - Start tracking payments immediately
# Using Python
python -m http.server 8000
# Using Node.js
npx http-server
# Then open: http://localhost:8000CAMANDA-Academy/
│
├── index.html # Main HTML structure
├── styles.css # All styling and animations
├── script.js # Application logic and functionality
└── README.md # Project documentation
- Fill in the required fields (marked with *)
- Student Name
- Amount (USD)
- Payment Date (defaults to today)
- Payment Method
- Optionally add:
- Student ID
- Course information
- Additional notes
- Click "Submit Payment"
- Confirmation appears in the notification panel
- Payment appears instantly in history
- Type in the search box at the top of Payment History
- Search works across:
- Student names
- Student IDs
- Course names
- Payment methods
- Amounts
- Results update instantly as you type
- Clear search to see all payments
- All payments display in the history table
- Most recent payments appear first
- Includes: Date, Student, ID, Course, Amount, Method, Status
- Hover over rows for visual feedback
- Sticky headers stay visible while scrolling
Located in the sidebar, showing:
- Average Payment: Mean of all payments
- Highest Payment: Largest single transaction
- Recent Students: Unique students in last 30 days
- Click the "Export" button in the Payment History section
- CSV file downloads automatically
- Opens in Excel, Google Sheets, or any spreadsheet software
- Includes all payment details and notes
- Clear Form: Resets the input form only
- Clear All: Deletes all payment records
- Shows confirmation dialog
- Prevents accidental deletion
- Action cannot be undone
- HTML5: Semantic structure
- CSS3: Modern styling with CSS Grid and Flexbox
- JavaScript (ES6+): Client-side functionality
- LocalStorage API: Data persistence
- ✅ Chrome/Edge (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Opera (latest)
- All data stored locally in browser
- No server or database required
- Data persists across browser sessions
- Automatic saving on every action
| Field | Type | Required | Description |
|---|---|---|---|
| Student Name | Text | Yes | Full name of the student |
| Student ID | Text | No | Unique student identifier |
| Amount | Number | Yes | Payment amount in USD |
| Payment Date | Date | Yes | Date of transaction |
| Payment Method | Select | Yes | Cash, Card, Transfer, etc. |
| Course | Text | No | Course name or program |
| Notes | Textarea | No | Additional information |
- Total Payments: Count of all recorded payments
- Total Amount: Sum of all payment amounts
- This Month: Total payments for current month
- Primary: Purple gradient (#667eea to #764ba2)
- Success: Green (#10b981)
- Warning: Orange (#f59e0b)
- Danger: Red (#ef4444)
- Desktop: > 1200px
- Tablet: 768px - 1200px
- Mobile: < 768px
- All data stored locally on user's device
- No external API calls or data transmission
- No personal data collection
- GDPR compliant (no tracking)
- Data limited to browser's localStorage capacity (~5-10MB)
- Data not synchronized across devices
- No user authentication system
- No backend database integration
- Student management system
- Payment reminders and due dates
- Multiple payment status options
- Receipt generation (PDF)
- Advanced filtering and search
- Data visualization charts
- Multi-user support
- Cloud backup integration
This project is open source and available for educational purposes.
Created for CAMANDA Academy Entry-Level Assessment
For issues or questions:
- Check the README documentation
- Review the code comments
- Test in different browsers
- Clear browser cache if experiencing issues
Built using:
- Modern web standards (HTML5, CSS3, ES6+)
- No external libraries or frameworks
- Clean, maintainable code structure
- Best practices for accessibility
Version: 1.0.0
Last Updated: November 26, 2025
Status: Production Ready ✅