Challenge 1 of 4
Build & Style The UI
- Style the BODY element with a white background color.
- Within the BODY tag, create a DIV and give it a
data-cart-infoattribute. Inside this DIV, create a HEADING element with
mdc-typography--headline4"as its CSS class.
- The HEADING element should have 2 SPAN children elements. The First SPAN element displays a shopping cart by setting it’s CSS class to
material-iconsand its content to
shopping_cart. The second SPAN element should have a
data-billattribute and will be used to display the total figure the user is trying to pay on the app.
- Create another DIV just after the
data-cart-infoDIV. Give this new DIV a
data-credit-cardattribute and set its class to
mdc-card--outlined. Within the
data-credit-cardDIV you just created, add a new DIV with a class of
mdc-card__primary-action. These elements will be styled with the look and feel of an actual credit card. Brace yourself!
- Within the
.mdc-card__primary-actionDIV, create an IMAGE with an attribute of
data-card-typeand set its source to https://placehold.it/120x60.png?text=Card. This IMAGE will be used to display the credit card type (Visa or MasterCard), based on the series of numbers entered by the user.
- Right after the IMAGE and still within the
mdc-card__primary-actionDIV, create a new DIV with an attribute of
data-cc-digits. It should contain four INPUT text fields, each with a
4and a placeholder of
----(4 dashes). These fields will be used to collect the credit card numbers from the user.
- Create a DIV with an attribute of
data-cc-infoas a sibling to the
data-cc-digitsDIV. 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 a
Name Surname. The expiry date field should have a
MM/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-cardDIV. Set the BUTTON’s class to
mdc-buttonand give it a
data-pay-btnattribute. It should have
Pay Nowas its display text. After the user enters details of the card and clicks on this button, the app will strike-though the card details that are in-valid, if any.
While we might have the right structure in place, the app visually tells a different story. Time to make the app look good and usable.
- The SPAN elements within the
data-cart-infoDIV should be displayed as inline block elements and their
.material-iconsSPAN should have a
150pixels size of font.
- Give the
10pxrounded borders, and a
- Display the
data-card-typeIMAGE as a block element. Give it a
120pxwidth and a
data-cc-digitsDIV should have a
- INPUT elements in the
data-cc-digitsDIV should have a white color,
2emfont size and line height, no border or background, and a right margin of
data-cc-infoDIV should have a
- INPUT elements in the
data-cc-infoDIV should have a white color,
1.2emfont size, no border and no background. The second input should also have a right padding of
10pxand be floated to the right of the viewport.
data-pay-btnBUTTON should have a fixed position,
90%width, a solid border of
bottomof the viewport.
Your app should look better at this point. Ideally, the 4 input fields within the
data-cc-digitsDIV should all be on a single horzontal line