- 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…
Class creation with your personal data and inclusion in specified components | 2 |
---|---|
Header and Footer Components | 2 |
Component #1 setup and working output | 3 |
Component #2 setup and working output | 3 |
2 points will automatically be deducted if assignment is not mobile | |
5 points will automatically be deducted if assignment is not published in cPanel | |
5 points will automatically be deducted if correct ZIP (src folder only) is not included in submission |