SYST24444: Final Exam / Coding (10%)
- Startup:
- Open your final exam application created using the FinalExam_StartUpInstructions in VSC
- If not completed before class, you will have to complete the FinalExam_StartUpInstructions before continuing – Located in SLATE: Final Exam Files
- Download the FinalExamFiles.zip and unzip into a new folder
- Test in the browser after each step to help you with debugging
- ANGULAR CONCEPTS MUST BE USED FOR THIS EXAM
- Open your final exam application created using the FinalExam_StartUpInstructions in VSC
- In the headyourloginname component (2 marks)
- Create 2 variables – your choice of variable name
- In one variable, include your full name (first last)
- In the second variable, include your student number
- Display the following in the output for the header component in an <h3> tag (< are only included to show where variable data should be located…should not be included in output):
- Create 2 variables – your choice of variable name
Student Number: <your student number from variable>/ My name: <include your full name from variable> /
- Use Angular styling (attribute directive) to change the colour of the text in the header component to green and the background colour to wheat.
- Use Angular piping to uppercase your full name
- In the comp1yourloginname component (5 marks)
- Include a variable to hold a country name (your choice of variable name-referred to as country variable below-you would use your variable name); set the variable to you home country (ex. Canada, India, …)
- Include an input box with a label that includes “Name Of Country: ” that allows the user to change the country variable value by binding this input box to the country variable so the initial value is displayed in the input box
- Add 2 blank lines (<br>)
- Include a section and use an *ngIf that will display “Country Home” if the country name in the country variable is equal to the starting (default) value; if not, display “Not My Country Home”
- Be sure it works no matter how the values are entered (case):
- Hint: Use *ngIf along with ng-template
- Add a horizontal line (<hr>)
- Declare a string variable called myLogin and include your login name
- Declare a string variable called myHandle and include your last name, your first name
- Declare a variable called current that holds the current date
- Include a section and bind the innerHTML property of the section to the variable called myHandle
- Add a blank line (<br>)
- Add a button that includes a click event that calls a function named functionChange() with button text of “Update Message“
- Create the functionChange() function that will on click change the contents of the myHandle variable to:
- ” Last Day of Term – current date for Your login name, “
- using the myLogin and current variables to display login and date data (MUST use template literal “ to build output)
- Go to next page…
- In the comp2yourloginname component (3 marks)
- Stop serving at this time (Ctrl+C in the node windows in VSC Terminal)
- Create a data folder in the assets folder
- Include the JSON file included in the FinalExam.zip in the assets/data folder
- Update the Name and ID fields in the JSON file and include your personal data
- Create a new file in the app folder: yourusrenameInterface.ts (ex. doejInterface.ts)
- Create an interface for the exam2020 data and an interface for the examApp data (an array setup)
- Import the interfaces and import the JSON data into a variable
- (Note: You can include the imports in this component and DO NOT have to include in the app component and share the data)
- Create 2 variables of the interface types
- Remember, exam2020 is an object for pulling individual fields and examApp is an array so create the variables accordingly
- Reserve your app (ng serve)
- Create a header line that pulls the classTitle from the JSON data (your choice of html tag)
- Use Angular styling (attribute directive) to align the text to the center
- Add a horizontal line underneath (<hr>)
- Create a footer line (your choice of html tag) that pulls your Name and ID from the JSON file; placement and order are your choice within the footer
- Use Angular styling (attribute directive) to align the text to the center
- Add a horizontal line ABOVE the footer line
- Between header and footer, include a header line (hard coded):
- Final Exam App Completion Steps
- Final Exam App Completion Steps
- Use the Angular repeater to create group of section tags
- Include labeling before each data field but output is your choice
- Example output for first section. Step: One (1) – Action: Create startup app
- Example output for first section. Step: One (1) – Action: Create startup app
- Include labeling before each data field but output is your choice
- Make sure your app is working before submission. Comment out any data that is causing an error.
- Submit a zip of your SRC folder with the name srcYourLoginName to the Final Exam dropbox in SLATE / You do not have to publish