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

Give a Comment