Build & Style The UI
- Style the BODY element with a white background color
- Create a DIV and give it a
data-cart-info
attribute. Inside the DIV, create a HEADING withmdc-typography--headline4"
as its CSS class - The HEADING should have 2 SPAN elements. The First displays a shopping cart by setting its class to
material-icons
and setting its content to shopping_cart. The second SPAN has an attribute ofdata-bill
and will be used to display the total figure the user is trying to pay on the app - After the
data-cart-info
DIV, create another DIV, give it an attribute ofdata-credit-card
and set its class tomdc-card
andmdc-card--outlined
Within thedata-credit-card
DIV, create a new DIV with a class ofmdc-card__primary-action
These elements will be styled with the look and feel of an actual credit card! - Within the
.mdc-card__primary-action
DIV, create an IMAGE with an attribute ofdata-card-type
and set its SRC to http://placehold.it/120x60.png?text=Card. This IMAGE will be used to display the credit card type, based on the series of numbers entered by the user - Right after the IMAGE, create a DIV with an attribute of
data-cc-digits
. It should contain four INPUT text fields, each with asize
of4
and a placeholder of ---- (4 dashes). These fields will be used to collect the credit numbers - Create a DIV with an attribute of
data-cc-info
as a sibling to thedata-cc-digits
DIV. This new DIV should have two INPUT text fields, one for entering the card holder’s name while the other will be for the card’s expiry date. The first field should have asize
of20
and aplaceholder
ofName Surname
. The expiry date field should have asize
of6
and aplaceholder
ofMM/YY
- indicating the expiry date format.
We are now done with the structure of the credit card component. Let’s make a button to allow the user make payment with the card details
- Create a BUTTON as a sibling to the
data-credit-card
DIV. Set the BUTTON’s class tomdc-button
and give it adata-pay-btn
attribute. It should havePay & Checkout Now
as its display text. After the user enters details of the card and clicks on this button, the app will strike-though the card numbers to indicate that they are in-valid.