SYST24444 Assignment #2 Detail

SYST 24444 Assignment #2 (10%)

Note you can get SYST24444 Assignment Help From ProgrammingAssignmentHelp.com

●​ Create a new Angular app called A2yourloginname (ex. A2doejane) - NOTE: Marks off if not named as specified​

o​ Use New Angular Application With Material in the Angular References Module on starting a new project
with defaults.
▪​ This will be a mobile assignment formatted for landscape view only
●​ Note: Styling included is mostly for testing Angular concepts and mobile layout​

o​ Include a data folder in the assets folder

o​ Download Assignment02.zip that will include the JSON file and a .txt file ​

●​ Copy the Assignment02.json file into the assets/data folder and open the A2Info.txt file
●​ Include the code in the A2Info.txt file to update the tsconfig.json file​

●​ Update the Assignment02.json file to include your personal/Sheridan information where indicated AND update the
myBooks array with your own data (Note: published field is a number data type)
o​ NOTE: You may want to validate the file after making changes (jsonlint.com)​

●​ Create a file called yourusenameInterface.ts in the app folder and include interfaces for the following:
o​ a2Personal information​ ​ myBooks array structure​ ​ campusData array structure​

●​ In app.component.ts (parent), import ALL your interfaces AND the JSON file
o​ Include a variable called yourloginnamePersonal to hold your personal data from the JSON file​

o​ Include a variable called yourloginnameBooks to hold the book data from the JSON file (remember, this will
be an array variable)​

o​ Include a variable called yourloginnameCampus to hold the campus data from the JSON file (remember, this
will be an array variable)​

●​ Create a header component called header-yourloginname and a footer component called footer-yourloginname
and include in app.component.html:
o​ Use the Sharing procedure to pass your personal information only included in the JSON file from the app
component to both header and footer components. The variable in both components to accept shared data
must be called yourloginnameMyData​

o​ Header: Add a header element (I would suggest an <h3> tag since it is more mobile)
▪​ A2 – Winter 2024 for <YOUR full name from JSON - uppercase> / <YOUR Sheridan ID from JSON>
o​ Footer: Add a header element (I would suggest an <h3> tag since it is more mobile)
▪​ Email: <YOUR Sheridan Email from JSON > / Program: <YOUR Sheridan Program from JSON>​

1
 SYST24444 Assignment #2 Detail
o​ Update global stye sheet to format both components:
▪​ Minimum: background colour, text colour, center align​

●​ In app.component.html
o​ Between the header and footer components, include an Angular Material tab grouping structure from
Common_Angular_Material_Structures_And_Options document in SLATE​

●​ Include the following tabs within the <mat-tab-group> structure using text AND an icon (your choice) for each
o​ My Book List – YOUR name ICON
o​ Campus Info – YOUR name ICON​

●​ Create the following components:

o​ books-yourloginname
o​ campus-yourloginname

●​ Include the corresponding component in EACH mat-tab​

●​ books-yourloginname
o​ Use the Sharing procedure to pass the myBooks array information only included in the JSON file from the
app component to this component. The variable in component to accept shared data must be called
myBooksyourstudentnumber (ex. myBooks991123456)​

o​ Create a mat-table layout and include all book data from JSON file (there will be some scrolling)​

●​ campus-yourloginname
o​ Use the Sharing procedure to pass the campusData array information only included in the JSON file from
the app component to this component. The variable in component to accept shared data must be called
campusDatayourstudentnumber (ex. campusData991123456)​

o​ Inset a header element and include “Sheridan College – Select a Campus to View Address”​

o​ Create a mat-select dropdown box that includes all campus names

o​ HINTS:
▪​ Declare an empty variable to hold campus name
▪​ Build options in the drop-down by using *ngFor on mat-option element and set value property and
output to {{x.campus}}​

o​ Create an output area under drop-down

▪​ Use property binding to bind the innerHTML to a variable (declare the variable in TypeScript)​

o​ When a user selects a campus, fill in the address area of the page by including an event call from the select
dropdown sending in the campus chosen and coding the function to build an output in the declared variable
(must use template literals to build output); Will need to do a for/of loop and if to check for correct campus​

2
 SYST24444 Assignment #2 Detail
o​ Include formatting so output fits within mobile layout without scrolling and without too much whitespace

Sample views for reference on last page

See next page for Grading Rubric and Notes…

3
 SYST24444 Assignment #2 Detail
Grading View:

€​ I will be using the Chrome Toggle Device Bar for Samsung Galaxy S20 Ultra in Landscape mode only 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

o​ NOTE: 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

€​ 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 SLATE 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
especially for all personal data used in declarations and values ​

€​ Grading rubric:

JSON updated, interfaces and retrieval in parent component using variables specified 2.5
Mat Grouping with tab label contents and icons and correctly named components included 2
Header and Footer components with styling and sharing setup 1.5
Tab #1 component including sharing setup 2
Tab #2 component including sharing setup 2

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
YOUR personal info in declarations not included where specified AND/OR
Personal data from any other student in data or declarations (i.e. If you use yourloginname -10
text and not your ACTUAL login name where specified, marks will be deducted)

4
 SYST24444 Assignment #2 Detail
Example outputs for reference ONLY

5
SYST24444 Assignment #2 Detail