Project Description
This project is a web application designed for MO-IT120 - Web Systems and Technology course. Its primary goal is to help Filipino students compare the monthly expenses of a traditional, on-campus learning setup versus an online learning setup, like the one at MMDC.
The application provides a simple calculator where students can input their income and typical expenses for both scenarios to see a direct comparison of their remaining balance.
This tool aims to help students make more informed financial decisions about their education path.
Features
💰 Expense Calculator
Compare monthly costs between traditional and online learning with customizable expense categories.
📊 Real-time Comparison
See instant calculations and balance comparisons as you input your data.
📱 Responsive Design
Access the calculator on any device - desktop, tablet, or mobile.
✨ Interactive Features
Enhanced with JavaScript for better user experience and interactivity.
Meet the Team
This project was developed by Group 13 as part of our coursework:
John Paul P.
Project Lead & Frontend Development
Jhaersn C.
UI/UX Design & Bootstrap Integration
Jubiler P.
JavaScript Development & Interactive Features
Reinard R.
Documentation & Quality Assurance
Technologies Used
- HTML5 - Structure and semantic markup
- CSS3 - Styling, layout, and responsive design
- JavaScript - Interactive features and DOM manipulation
- Bootstrap 5.3.2 - Responsive framework with grid system, components, and utilities
- BEM Methodology - CSS naming convention for maintainability
Privacy & Data Protection
🔒 Your Privacy Matters
We respect your privacy. This website is designed as an educational project and does NOT collect, store, or transmit any personal information from its users.
All calculations are performed locally in your browser. No data is sent to any server or third party. Your financial information remains private and secure on your device.
📋 Data Privacy Act of 2012 (Republic Act No. 10173)
This website is developed in compliance with the Philippine Data Privacy Act of 2012, which protects the fundamental human right to privacy while ensuring the free flow of information for innovation and growth. As this is a purely educational, client-side application, no personal data processing occurs that would require data privacy registration or user consent mechanisms.
Project Milestones
✅ Milestone 1 - Static Website
- Created static HTML structure
- Implemented custom CSS styling with BEM methodology
- Added responsive design for mobile, tablet, and desktop
- Deployed to GitHub Pages
🚀 Milestone 2 - Interactive Website (Current)
- Integrated Bootstrap 5.3.2 framework via CDN
- Responsive Navbar: Mobile-friendly navigation with hamburger menu
- Bootstrap Grid System: Responsive layouts across all pages
- Form Enhancements: Bootstrap form controls and validation styling
- Button Components: Primary, secondary, and outline button styles
- JavaScript Interactivity: Dynamic expense calculator with real-time calculations
- Local Storage Integration: Automatic data persistence; inputs are saved and restored on refresh
- Study Mode Selection: Choose between Traditional and Online student data
- Utility Classes: Spacing, flexbox, and text alignment throughout
Course: MO-IT120 - Web Systems and Technology
Group: Group 13
Year: 2025
Mentor Feedback & Continuous Improvement
📝 Mentor Review & Our Response
Our mentor provided valuable feedback on our project, highlighting both our strengths and areas for improvement. We've taken this feedback seriously and implemented comprehensive enhancements to achieve higher marks.
✅ What Went Well
- Clean, modern design with good UI/UX
- Real-time calculator functionality
- Bootstrap integration and responsive design
- Privacy compliance and data protection
- Interactive features and smooth animations
🔧 Areas for Improvement
- Project planning tools needed
- Enhanced input validation required
- Better accessibility features
- Improved code structure and comments
- Stronger error handling
Implemented Improvements
📊 Project Management Enhancements
Added Gantt chart showing project phases and milestones
Detailed individual roles and accomplishments
Risk management strategies and QA processes
💻 Technical Improvements
Prevents NaN values and invalid inputs with real-time feedback
ARIA labels, keyboard navigation, and screen reader support
Modular architecture with comprehensive documentation
Comprehensive error management and user feedback
🎯 Key Achievements
All mentor feedback has been addressed: We've transformed our project from a good foundation into a professional-grade web application that meets industry standards for accessibility, error handling, and code quality.
✨ The application now features enterprise-level input validation, comprehensive accessibility support, modular code architecture, and robust error handling - ready for production deployment.