create a New Angular App

cName: ourloginname $.$

Ensure it is a modular application using Angular Modules $($NOT Standalone$).$

Include Angular Material during the setup process.

Download and Setup

Download Assignment$03.$zip.

Extract and place the images from the ZIP into the assets$/$images folder.

Application Structure

Global Styling

Ensure the application is formatted for landscape view only.

Set a global style to apply a minimum background color, text color, and center alignment for header and footer.

Create a Class

File: classYourloginname.ts $($e$.$g$.,$ classDoeJane.ts$).$

Class: A$3$ClassYourloginname $($e$.$g$.,$ A$3$ClassDoeJane$).$

Fields:

fullNameYOURID $($e$.$g$.,$ fullName$991123456).$

idYOURID $($e$.$g$.,$ id$991123456).$

emailYOUREmail $($e$.$g$.,$ email$991123456).$

loginYOURLogin $($e$.$g$.,$ login$991123456).$

App Component

Import the class created.

Create a new variable profileYourloginname $($e$.$g$.,$ profileDoeJane$)$ and populate it with your personal information.

Components

Header and Footer Components

Header Component

Name: header$-$yourloginname $($e$.$g$.,$ header$-$doejane$).$

Display: A$3$ Summer $2024$ for $/.$

Style: Use global styles for background color, text color, and center alignment.

Footer Component

Name: footer$-$yourloginname $($e$.$g$.,$ footer$-$doejane$).$

Display: Email: $/$ Login: $.$

Style: Use global styles for background color, text color, and center alignment.

Card Components

Create $4$ components:

ace$-$yourloginname $($e$.$g$.,$ ace$-$doejane$).$

king$-$yourloginname $($e$.$g$.,$ king$-$doejane$).$

queen$-$yourloginname $($e$.$g$.,$ queen$-$doejane$).$

jack$-$yourloginname $($e$.$g$.,$ jack$-$doejane$).$

Each component should:

Include a header styled using ngClass based on card type.

Display an image of the card.

Have two buttons:

Rotate Button: Calls a service to rotate the card by a specific degree.

Zero Button: Resets the card rotation to $0$ degrees.

Services

Card Service

Name: card$-$yourloginname $($e$.$g$.,$ card$-$doejane$).$

Function: yourloginnameChanges

Parameters:

any type variable for the ID of the card.

number type variable for the degrees to rotate.

Functionality:

Rotate the card to the specified degrees with a $3-$second transition.

Ensure cumulative rotation with each button click.

Routing

Setup Routing

Configure routing for all $4$ card components.

Set ace$-$yourloginname as the default view.

Include navigation to call each component.

Example Variables and Functionality

Each card component should have:

Title, Suit, Image, Degree, Zero variables.

Use ngClass for card title styling.

Rotate and Zero buttons to interact with the card servic