A3 ANGULAR – NJIT

Assignment #3 (10%)
This assignment will test your knowledge of Angular and the building block we
have covered so far.

 Create a new Angular app called A3yourusername (ex. A3doejohn)

o Use NewProject-Default Setup in the Angular References Module on starting a new project with defaults.
o This will be a mobile assignment formatted for landscape view only
o Create a folder in the app folder to hold your Class definitions (ex. we used myClasses in class exercises)
o Include an image or representative image of you in your images folder in the assets folder
 Create a new Class definition (new file) in the new folder. Your choice of file name. Will include the following:
o Student number
o Full Name (Last, First)
o Username
o Program name
o College Email Address
o Day of the week for this class (Wednesday, Thursday, or Friday)
o Your picture name (just a string)
 Include the Class import in the app component and create a new variable that is based on the Class and populate
the default values with your personal information.
o For the image/picture: You can include the path if you want (ex. assets/images/mypic.jpg) or just the
image/picture name and then add the path in the html
o REMEMBER: When accessing this image in your code, be sure to start from the SRC folder…see path example
above. DO NOT include ../../ in path name or image will NOT display when published)
 Create a header component:
o Use the Sharing procedure to pass your personal information from the app component to this header
component (your choice of variable name)
o Add a header line (I would suggest an <h3> tag since it is more mobile)
 A3 / My Name is <Full name> and I am in the <program name> program
 You MUST use string interpolation to populate your name and program
 Use interpolation binding to make BOTH uppercase
 Note: <> are included above just to distinguish which fields are being included and do not need to be
included in screen output.
 Create a footer component:
o Use the Sharing procedure to pass your personal information from the app component to this footer
component (your choice of variable name)
o Add a header line (I would suggest an <h3> tag since it is more mobile)
 Username: <username> / ID: <student number> / Email: <Email>
 Be sure to include labels specified before data
 You MUST use string interpolation to populate username, student number and email address
 Note: <> are included above just to distinguish which fields are being included and do not need to be
included in screen output
 Include CSS for both the header and footer lines in Global styles file
o Set a text colour, a background colour, make the text italic, and center both lines
1
A3 ANGULAR – NJIT

 Create a content component:

o Use the Sharing procedure to pass your personal information from the app component to this content
component (your choice of variable name)
o Create a layout (CSS Grid can be used or a layout formatting of your choice)
 NOTE: I have provided an A3.txt file with a grid-layout example that you can use (both HTML and
CSS). It only provides a basic grid layout. Any other CSS would have to be added.
o Include a different background colour for each area (example shown -gradient background explained below)

o Informational Area - Include individual data specified on a separate line

 Current Date: <System Date>
 Use Pipes to format the date to the format: Mmm dd, yyyy (ex. Mar 10, 2021)
 Look in Angular documentation for exact option needed
 <Your full name> / <Your Student Number>
 <Your image from your personal information shared from the app component>
 Be sure to set the width so the image is mobile (ex. width=”100”)
 REMEMBER: When accessing this image in your code, be sure to start from the SRC folder…
see path example above. DO NOT include ../../ in path name or image will NOT display when
published)
 Center all the data in this area and add other CSS of your choice

o Area #1
 Make sure a CSS class is used to make the background colour a gradient fill (at least 2 colours-radial
or linear); This will be the initial background setting that will correspond to the initial data in the
input box.
 Create a variable to hold a Day of the Week (will be referred to as DOW variable)
 Include the Day of the Week when you have this class using the data passed in from the app
component that includes your personal data
 Since you are importing your personal data, it must be loaded before you can use it so you
will have to initialize your DOW variable in the ngOnInit() function
 Ex. I created a variable called dow; the sharing variable I used was called cinfo
ngOnInit(): void { this.dow = this.cinfo.dow; }

 Include a header line (use a lower level header tag such as h4 or h5) to direct user to enter a day of
the week in the following input box (ex. "What day do you have SYST24444 class?")

2
A3 ANGULAR – NJIT

 Include an input box to capture a day of the week

 Use 2-way binding to bind the input box to your DOW variable that was populated with
your personal data; Your input box should include the day of the week for your class since
variable data should show initially if binding is done correctly (example shown below)

 Add an ngClass to Area #1 to change the background colour based on input box data compared to
your personal data (day of week comparison should not be hard-coded)
 If days of week are equal, use a CSS class to include a radial-gradient background (must
include at least 2 colours) for this area only
o NOTE: This can be the initial background CSS used when setting up the grid layout
 If days of week are not equal, use a different CSS class to include a different coloured radial-
gradient background for this area only (must include at least 2 colours)

 Include a horizontal line then a paragraph that includes an ngIf and ng-template (paragraph
included inside here also) to determine what text to include
 If your DOW variable is equal to your personal DOW information shared from the app
component, the text will be “My class is on <DOW variable>” else the paragraph text will be
“Your class is on <DOW variable>
 Make sure the check works not matter how the user enters the day of week (case
indifferent)
 Add an ngStyle to each paragraph; For equal paragraph, change the font to bold; for not
equal paragraph in ng-template, change the font style to italic.
o Area #2
 Add a heading line to let the user know to click a button to change the border of the image in the
informational area (your choice of wording)
 Add 4 buttons for "Thick Solid Square", "Thick Solid Round", "Thick Double Square", and "Thick
Double Round". You can use text as shown below or use images that depict the border.
 Add a click event to each button. You can create 4 separate functions or one function and pass in
arguments.
 MUST use attribute formatting (ngStyle) to make each button text a different colour
(example shown below) which will be the colour of the border displayed also.

 When each button is clicked, change the border options of the image in the Informational
area using JavaScript.
o NOTE: You may want to give your <img> tag a unique ID
o If you get the error (Object is possibly 'null'), include the ! after you search for your
element using document.getElementById("mypic")!
o (post-fix expression operator !)

See next page for Grading Rubric and Notes…

3
A3 ANGULAR – NJIT

Grading View:

 I will be using the Chrome Toggle Device Bar for Galaxy S5 in Landscape mode when grading your site
 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 SRC folder ONLY; name of zip should be yourLoginNameSRC.zip

oNOTE: If you send the entire application folder ZIP instead of only the SRC folder, I will not use it and
will automatically reduce your assignment by 5 marks
 Deploy your site to cPanel and include the URL DIRECTLY to your site in the Comment section of the Drop Box
 REMEMBER, deploying an Angular application is not the same as we did in the first half of the term
 See Angular Deployment document in the Angular References Module

 Some things to remember:

o DO NOT wait until the last minute to complete this assignment; debugging and formatting can take time
as can deployment
o DO NOT change the site on cPanel once you have submitted and the Drop Box closes. I will run a JS
Script to see when the last time the cPanel link was updated. If past the Due Date, late marks will apply
even if submitted on time in the College portal Drop Box
o You can submit as many times as you need to until the Drop Box closes. I will grade the last one
o 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
o NOT DEPLOYING your Angular App results in 5 marks off automatically
o Each assignment MUST be done individually. I will be checking the HTML and Script for copying

 Grading rubric:

Class creation with your personal data included in the app component and sharing and usage
1.5
of this data into all child components
Header and Footer components 2
Area #1 within the Content component 2.5
Area #2 within the Content component 2.5
Informational area within the Content component 1.5

If Angular site is not deployed to cPanel, 5 marks will be deducted automatically.

-5
Documentation is included in SLATE (see not above)
If the entire app is zipped and not just the SRC folder, 5 marks will be deducted automatically -5
If site is not mobile, 2 marks will be deducted automatically / Must fit in mobile space with
-2
minimal scrolling

4
A3 ANGULAR – NJIT

o Student number - 8866384

o Full Name (Last, First) Alan Thomas
o Username AlanT6443
o Program name Web Programming
o College Email Address [email protected]
o Day of the week for this class (Wednesday, Thursday, or Friday) === FRIDAY
o Your picture name (just a string) : xyz