Angular Assignment Help, Angular Homework Help (100% Results)

• Create a new Angular App named A3yourusername (ex. A3doej)
  • See NewProject-DefaultSetup for a review of how to start a new project with class defaults
  • This mobile assignment will be formatted for landscape view only.
• Create a folder in the app folder to hold your Class definitions (ex. we used myClasses in class exercises)
• Create a new class definition (new file) in the new folder. Your choice of file name. Will include the following:
  • First name
  • Last name
  • Student number
  • Login name
• Include the Class import in the app component and create a new variable that is based on the Class and set the default values with your personal information.
• Create a header component:
  • Use the procedure for passing the data set in the app component (parent) to this component (child) and display the following.
  • Add a header line (I would suggest an <h3> for mobile): A3 / My name is {first name} {last name} where {first} and {last} use string interpolation based on the variable populated from the parent component.
  • Use interpolation binding to make both names uppercase
• Create a footer component:
  • Use the procedure for passing the data set in the app component (parent) to this component (child) and display the following.
  • Add a header line (I would suggest an <h3> for mobile):
    My ID: {student number} / My Login {Login name} / Current Date: {system date}
  • Data shown uses string interpolation based on the variable populated from the parent component.
  • Format date to show Mmm dd, yyyy format (ex. Nov 8, 2020). Look in Angular documentation for proper selection.
• Set CSS for both header and footer lines in the file for global styles.
  Set a text colour, a background colour, make the text italic and center header/footer lines.

• For the data between the header and footer, you will be creating 2 components. You can decide either to display the two components side-by-side on one page using a CSS Grid where you would setup the grid structure in the app.component.html and include the components in separate grid sections OR you can use Material setup to display each in a separate tab (your choice)
• Component #1: Create a component (your choice of component name) to hold 4 images based on the seasons of the year (Winter, Spring, Summer, Fall) with corresponding swatches of colour (see example below). Be sure to add a line at the top to direct the user to click on an image to process the CSS change (ex. Click an image to change formatting:).
  
  • You can use grid, flexbox or a table for side-by-side placement.
  • To create a colour swatch, you can look at the CSS examples at this site: CSS Colour Shapes
  • Use Event Binding to include an Angular click event for each image that will call a function that passes in which selection is being clicked (ex. changeView(1))
  • The function should change the formatting for each colour swatch when the corresponding image is clicked using JavaScript coding. Changes should include background-color to a darker colour of the initial colour; add a thick solid border (your choice of color); add a border radius to round edges (must be at least 25px or greater so the difference is visible)
• Component #2: Create a component (your choice of component name).
  • Use the procedure for passing the data set in the app component (parent) to this component (child).
  • Add 3 more variables. One for a loan amount, one for a fee amount for lesser amount loans and a fee amount for greater amount loans.
  • Include a descriptive label and an input box that uses 2-way binding to the loan amount variable.
  • Display Loan Amount: {loan amount that uses interpolation binding to display the amount shown in the input box to a currency format}
  • Create one paragraph output that will display IF (*ngIf) the loan amount is <= to 50,000 dollars and use the ng-template directive to create another paragraph if the loan amount is > 50,000 dollars.
  • NOTE: You cannot use <= in an ngIf directive. You must use an OR condition (< an amount || == to an amount)
  • Output should be similar to this: Based on your requested loan amount of {loan amount / currency format}, your fee will be {variable for the fee / formatted to currency format based on condition of ngIf}
  • Below the paragraph(s) include a signature line: Loan Officer: {first} {last} pulled from parent data passed to the child component
  • Below the signature line, include an image of you (or representation of you)
  • Use an [ngClass] directive to format each paragraph based on the same condition used in the ngIf. Each output paragraph will call a CSS class that must have a background colour, text colour, center alignment, some padding, and border radius set.
  • NOTE: You must use ngClass and not a regular CSS class for this formatting or points will be deducted.
• Some notes:
  • If some changes do not seem to work properly or an error occurs, stop the serve and re-serve. For example, if you get an error “Currency could not be found” then stop the serve and re-serve.
  • Angular concepts must be used where indicated even if the output can be accomplished using other means.

How I will be grading exercise…

• I will be using Chrome’s Toggle Device Bar for Galaxy S5 in Landscape mode using your submission URL
• Remember, this is a mobile site so formatting and layout should reflect this; too much scrolling or whitespace will reduce your mark.

What to submit…

• You will be submitting your cPanel URL to your published site AND a ZIP of your project’s src folder ONLY in the SLATE dropbox
• Remember: You have 3 days past the due date with 10% off per day to submit
• For help with publishing/deploying, see the Angular Deployment documentation
• Each assignment must be done individually.
      I will be checking for copying especially if the assignments look similar and will file an academic integrity breach if necessary
• This is not an assignment that should be started the day it is due.
      Since you have 2 weeks to complete the assignment, NO EXTENSIONS to the due date will be given.

Grading Rubric…