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
Team Member
Jhaersn
Team Member
Jubiler
Team Member
Reinard
Team Member
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
- 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