SYST24444: Angular Assignment Help, Homework Help, Exam Help

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
    
    
• 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):

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
      
      
  • 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
        
        
• 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