example 1 and 2 are attached labeled tution fees

we are required to do a website with HTML code and javascript for the structure of the website regarding the tuition fees and everything mentioned in the pictures

these are the only papers given to us to do the project

SMS School Management System (SMS) App CMPS 350 Project Phase 1 - WebApp UI Design Implementation (15% of the course grade) The project phase 1 submission is due by midnight Sunday 21th March 2021. Demos during the same week. 1. Requirements You are requested to design a School Management System (SMS) Web App for managing various school processes including admission, registration, grading and absence. The application will allow the school staff and parents to follow-up the students' progress and help teachers engage parents and easily communicate with them. The main SMS modules to be designed and developed are described below. All modules include Login to allow the user (i.e., Principal, Teacher and Parent) to login to use the application. 13. Module Payment Management This module delivers the following use cases Use case Description Setup and maintain Setup and maintain the free structure per semester and per level exams the free structure and sample ) including Tuition fee, Registration Fee Transport Fee, et The principal should be able to add/update different types of fees per level. Get pending Get pending Registration, Tuition of Busfees of a student. payments Make payment Allow paying Registration, Tuition of Busfees of a student. The system should record the payment date, the amount paid and payment mode (cash, bank card, credit card, cheque, direct bank deposit Get payments Get past payments for a student within a date range by default the current History academic year! Pending payments Report of pending Registration, Tuition and Bus fees of a student or all report students. The report should allow filtering by fee Type. Also, should provide a summary of pending payments per ty Received payments Report of received Registration, Tuition and Bus fees of a student or all report students within a date range (by default the current month The report should low filtering by Fee Type Also, it should provide summary of received payments per ty Request bus Request a bus service registration for a student service Approve reject Get the stof pending bus service rests. Approve / reject a request with bus service request ability to add a comment Get status of bus Get status of bus service request for a particular student service request Generate de Generate due payments for all active students payments 2. Deliverables Seek further clarification about the requirements/deliverables during the initial progress meeting with the instructor. Note that further important clarifications maybe modified/added to your assigned module. During the weekly project meetings with the instructor, you are required to present and discuss your design with the instructor and get feedback 1) Design the App Web UI and Navigation 2) Implement the app Web UI and navigation using HTML, CSS and JavaScript. The pages should comply with Web user interface design best practices. Also remember that there is elegance in simplicity'. 3) Application design documentation including the Entities Class Diagram and the Repositories Class diagram. 4) Create test data JSON files for the entities of your module. 5) Implement the client-side data access repositories using JavaScript to read/write data stored in json files and IndexedDB/localStorage browser databases. 6) Document the app testing using screen shots illustrating the results of testing. Every team member should submit a description of their project contribution. Every team member should demo their work and answer questions during the demo. Push your implementation and documentation to your group GitHub repository as you make progress. Note that this phase will be focused only a fully working client-side implementation using data stored in json files and local browser databases. In phase 2 you will implement the server-side to move some of the computation and data management to the server-side. FEE STRUCTURE 2020-21 Class/Standard Tuition Admission Tran Fee Fee Insid Doha KG Classes Qrs. 4252/- Qrs. Qr: 2141- 3000 Qrs. 268/- Classes I to III Qrs. 47771- Classes IV to Qrs. VIII 5040/- Classes IX & X Qrs. 6090/- Qrs. 3757- Qrs. 428/- Class XI Qrs. 8295/- Qrs. 428/- Class XII Qrs. 8295/- Qrs. 428/- Insurance E-learning Fee Qrs. 536/- Qrs. 500/- Documentation Fee Qrs. 1071- Qrs. 100/- Level Determination Fee FEE STRUCTURE 2020-21 dard Tuition Admission Transportation Fee Fee fee Inside Outside Doha Doha 5 Qrs. 42521- Qrs. 214/- Qrs. Qrs. 3000/- 4000/- o III Qrs. 47771- Qrs. 268/- IV to Qrs. 5040/- Qrs. 375/- & X Qrs. 6090/- Qrs. 428/- Qrs. 8295/- Qrs. 428/- Qrs. 8295/- Qrs. 428/- Qrs. 536/- Fee Qrs. 500/- ation Qrs. 1071- Level tion Qrs. 100/- Registration If the application is successful and a place is available, then QIS will make a registration offer. A registration fee of QR3,213 is payable per student. Tuition fees Per Term Per Year (QAR) (QAR) Pre-School (FS1) 9,633 28,900 Early Years Reception (FS2) 9,633 28,900 Primary Year 1 to Year 6 10,050 30,150 Year 7 to Year 9 13,250 39,750 Secondary Year 10 to Year 11 15,900 47,700 Year 12 to Year 13 16,350 49,050 Consumable Levy A levy per term for classroom consumables is added to fee invoices. This covers Art / Science / DT consumables, photocopying and transport for school excursions. Per Term Per Year (QAR) (QAR) Pre-School (FS1) 214 643 Reception (FS2) to Year 6 428 1.285 Year 7 to 642 1,928 Year 13 SMS School Management System (SMS) App CMPS 350 Project Phase 1 - WebApp UI Design Implementation (15% of the course grade) The project phase 1 submission is due by midnight Sunday 21th March 2021. Demos during the same week. 1. Requirements You are requested to design a School Management System (SMS) Web App for managing various school processes including admission, registration, grading and absence. The application will allow the school staff and parents to follow-up the students' progress and help teachers engage parents and easily communicate with them. The main SMS modules to be designed and developed are described below. All modules include Login to allow the user (i.e., Principal, Teacher and Parent) to login to use the application. 13. Module Payment Management This module delivers the following use cases Use case Description Setup and maintain Setup and maintain the free structure per semester and per level exams the free structure and sample ) including Tuition fee, Registration Fee Transport Fee, et The principal should be able to add/update different types of fees per level. Get pending Get pending Registration, Tuition of Busfees of a student. payments Make payment Allow paying Registration, Tuition of Busfees of a student. The system should record the payment date, the amount paid and payment mode (cash, bank card, credit card, cheque, direct bank deposit Get payments Get past payments for a student within a date range by default the current History academic year! Pending payments Report of pending Registration, Tuition and Bus fees of a student or all report students. The report should allow filtering by fee Type. Also, should provide a summary of pending payments per ty Received payments Report of received Registration, Tuition and Bus fees of a student or all report students within a date range (by default the current month The report should low filtering by Fee Type Also, it should provide summary of received payments per ty Request bus Request a bus service registration for a student service Approve reject Get the stof pending bus service rests. Approve / reject a request with bus service request ability to add a comment Get status of bus Get status of bus service request for a particular student service request Generate de Generate due payments for all active students payments 2. Deliverables Seek further clarification about the requirements/deliverables during the initial progress meeting with the instructor. Note that further important clarifications maybe modified/added to your assigned module. During the weekly project meetings with the instructor, you are required to present and discuss your design with the instructor and get feedback 1) Design the App Web UI and Navigation 2) Implement the app Web UI and navigation using HTML, CSS and JavaScript. The pages should comply with Web user interface design best practices. Also remember that there is elegance in simplicity'. 3) Application design documentation including the Entities Class Diagram and the Repositories Class diagram. 4) Create test data JSON files for the entities of your module. 5) Implement the client-side data access repositories using JavaScript to read/write data stored in json files and IndexedDB/localStorage browser databases. 6) Document the app testing using screen shots illustrating the results of testing. Every team member should submit a description of their project contribution. Every team member should demo their work and answer questions during the demo. Push your implementation and documentation to your group GitHub repository as you make progress. Note that this phase will be focused only a fully working client-side implementation using data stored in json files and local browser databases. In phase 2 you will implement the server-side to move some of the computation and data management to the server-side. FEE STRUCTURE 2020-21 Class/Standard Tuition Admission Tran Fee Fee Insid Doha KG Classes Qrs. 4252/- Qrs. Qr: 2141- 3000 Qrs. 268/- Classes I to III Qrs. 47771- Classes IV to Qrs. VIII 5040/- Classes IX & X Qrs. 6090/- Qrs. 3757- Qrs. 428/- Class XI Qrs. 8295/- Qrs. 428/- Class XII Qrs. 8295/- Qrs. 428/- Insurance E-learning Fee Qrs. 536/- Qrs. 500/- Documentation Fee Qrs. 1071- Qrs. 100/- Level Determination Fee FEE STRUCTURE 2020-21 dard Tuition Admission Transportation Fee Fee fee Inside Outside Doha Doha 5 Qrs. 42521- Qrs. 214/- Qrs. Qrs. 3000/- 4000/- o III Qrs. 47771- Qrs. 268/- IV to Qrs. 5040/- Qrs. 375/- & X Qrs. 6090/- Qrs. 428/- Qrs. 8295/- Qrs. 428/- Qrs. 8295/- Qrs. 428/- Qrs. 536/- Fee Qrs. 500/- ation Qrs. 1071- Level tion Qrs. 100/- Registration If the application is successful and a place is available, then QIS will make a registration offer. A registration fee of QR3,213 is payable per student. Tuition fees Per Term Per Year (QAR) (QAR) Pre-School (FS1) 9,633 28,900 Early Years Reception (FS2) 9,633 28,900 Primary Year 1 to Year 6 10,050 30,150 Year 7 to Year 9 13,250 39,750 Secondary Year 10 to Year 11 15,900 47,700 Year 12 to Year 13 16,350 49,050 Consumable Levy A levy per term for classroom consumables is added to fee invoices. This covers Art / Science / DT consumables, photocopying and transport for school excursions. Per Term Per Year (QAR) (QAR) Pre-School (FS1) 214 643 Reception (FS2) to Year 6 428 1.285 Year 7 to 642 1,928 Year 13