SYST24444 Mobile Web-Based Application Development Assignment This assignment will be used to test your knowledge of Angular Modules, Angular Materia

SYST24444 Mobile Web-Based Application Development Assignment

This assignment will be used to test your knowledge of Angular Modules, Angular Material, and using external JSON Files. Follow all details carefully and be sure to follow instructions for submitting your work.

Create a mobile web site (Note: Create a new folder to hold all your files/folders). You will need to include:

Follow all the steps performed to create a new angular project.

CONTENT:

Create a web application to create a website for a movie theatre having multiple movie screens(rooms).

1. Create a module that consists of header and footer components. The header component to show:
   1. Winter 2023 Assignment #4 for Your Full Name from Your Home Country (Fetch this information from a json object either by creating a Class in order to declare data which we can make available to the header component ).
   1. In the header component itself. Please show the name of the movie theatre, location and contact number (make use of json objects).
   1. Create a Footer Component to show your email address, College Name, Campus (Fetch this information from a json object either by creating a Class in order to declare data which we can make available to the header component ) and Today’s date formatted as ‘MMM D, Y’. (google Angular Pipes)
2. Create a component called list of movies that consists of a table which fetches details from a json file.
   1. The table should represent the name of the movie, genre, running time, date of release, Ratings and age restrictions( G, PG, R, etc)
   1. Make sure you have a list of at least 6 movies.
3. Create another component with 4 buttons to show the 4 different movie screens(rooms):

1. It should represent all the movies and show timings in a particular movie screen(room).
   1. Once a user clicks on the movie screen(room) number, it should show us the list of movies along with their show timing (in the form of table).
2. In the app.component.html, there should be two tabs.
   1. First tab should be showing the information on the list of movies component. All the json information should be sent from app.component to all the other components (binding).
   1. Second tab should show the information about the movie screens(rooms) component. All the json information should be sent from app.component to all the other components (binding).
3. Try to make as much use of Material library to make sure that your website is appealing.

Rules:

1. Please make use of Classes and Interfaces to create a structure for your typescript data.

2.      Please make sure that this exercise involves making your page mobile friendly.

• Please use CSS styling to make your application more appealing.

4.      NO KIND OF PLAGIARISM WOULD BE TOLERATED.

Grading View:

• I will be using the Chrome Toggle Device Bar for PIXEL 6 Ultra in Landscape mode when viewing your site, Desktop view as well as Tablet view.
  • REMEMBER, this must be in a mobile layout; too much scrolling or whitespace will reduce your mark

Submission Details for SLATE Drop Box:

• ZIP your entire site folder; name of zip should be yourLoginName.zip
  • No need to Publish your site to cPanel as it has some internal issues.

o    Some things to remember:

• DO NOT wait until the last minute to complete this assignment; debugging and publishing can take time
  • You can submit as many times as you need to until the Drop Box closes. I will grade the last one
  • You have 3 days after the Due Date to submit with 10% off per day. After 3 days, the assignment will no longer be accepted
  • NOT PUBLISHING results in 5 marks off automatically
  • NOT MOBILE results in 2 marks off automatically (minimal scrolling)
  • Each assignment MUST be done individually. I will be checking the HTML and Script for copying; see the Academic Procedure for Evaluations in SLATE / Module 01

Grading Rubic