$1$

SYST$24444$ Mobile Web$-$Based Application Development

Assignment #$1$

Page $1$ of $2$

Requirements:

To develop a Mobile Web Site using Angular framework.

Create a new Angular project called A$1$ that includes three

components $$ Header, Content, and Footer.

$$ External Data

o Create a class using your login as name and store it in a file called

myclasses.ts in the app folder. This class will include the following

properties $($your choice of names and data types$)$:

$$ Your name, student number, login$,$ Sheridan email, campus, and

assignment title

o Create another class called Car in the same file as the login class. This class

will include the properties $($your choice of names and data types$)$:

$$ Car Make, Car Model, Body Type $($sedan$,$ suv, etc.$),$ Color

$$ The Header and Footer components

o Import the login class to the header and footer components.

o In the header component html file, use the login class to define data and use

string interpolation to display an H$2$ with assignment title $/$ your student

number $/$ your name.

o In the footer component html file, use the login class to define data and use

string interpolation to display an H$3$ with your login $/$ your Sheridan email

$/$ your campus.

$$ The Content component

o Import the Car class and use it to define an array of at least $4$ objects.

o In the content.component.html$,$ create a layout with two sections $($A & B$)$:

$$ The two sections will be side by side with section A on the left and section

B on the right.

$$ Section A will list the car models using the $*$ngFor directive $($do not

hardcode$).$ When a car is selected with a "click event", display the details

of the selected car in section B$.$

Other Requirements:

$$ Formatting, layout, colors, background, and labeling are considered in grading.

$$ I will be using Chrome's Toggle Device Bar for iPhone $12$ in landscape

mode to grade your site.

$$ Remember, this is a mobile site so formatting and layout should reflect this; too

much scrolling or whitespace will reduce your mark.

SYST$24444$ Mobile Web$-$Based Application Development

Assignment #$1$

Page $2$ of $2$

Grading Rubric

Items Marks

Classes and Data $2$

Header and Footer Components $2$

Content Component $6$

Site NOT published to cPanel $-5$

Submission:

$$ Publish your project to cPanel $.$ Deployment can be up to $3$ days late without

penalty.

$$ Submit to "Assignment $1"$ Dropbox on SLATE $($e$-$mail submissions will NOT

be accepted$)$:

o A zip copy of the src folder of your Angular Project Folder

o Include your cPanel URL to your published site in the comment section of the

Dropbox

o Include the password for the username "prof" for me to access your cPanel site

ONLY IF PASSWORD PROTECTED

$$ For help with publishing$/$deploying$,$ see Angular$-$Deployment in the References

section.

$$ Assignment can be submitted up to $3$ days after the due date with $10\%$ penalty per

day. After $3$ days the assignment will no longer be accepted.

$$ Only the last submission is accepted and marked, all others are ignored.

$$ Assignment must be completed individually.