- 2

I need help to solve this challenge. ti a technical assessment fo me to join the facebook andela program

Build & Style The UI Step 1 Style the BODY element with a white background color. Within the BODY tag, create a DIV and give it a data-cart-info attribute. 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-icons and its content to shopping_cart. The second SPAN element should have a data-bill attribute 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-info DIV. Give this new DIV a data-credit-card attribute and set its class to mdc-card and mdc-card--outlined . Within the data-credit-card DIV 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-action DIV, create an IMAGE with an attribute of data-card-type and 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-action DIV, create a new DIV with an attribute of data-cc-digits. It should contain four INPUT text fields, each with a size of 4 and 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-info as a sibling to the data-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 a size of 20 and a placeholder of Name Surname. The expiry date field should have a size of 6 and a placeholder of 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

html css javascript html5

8th Aug 2019, 11:43 AM

Papah Jackson

3 Answers

+ 2

If you are sharing your own code please post it in codeplayground then share a link to it here, but just to be clear this site is for help with problems with your own code you have written yourself, not having it written for you. As someone that has been through a similar test, if you cannot write the code yourself you will not get the role and it may be seen as a bad faith effort if you want to reapply again in the future.

8th Aug 2019, 12:19 PM

Rincewind

what i have done so far <DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Mini App</title> <style> body { margin: 0; padding: 1em; background-color: white; } [data-cart-info], [data-credit-card] { transform: scale(0.78); margin-left: -3.4em; } [data-cc-info] input:focus, [data-cc-digits] input:focus { outline: none; } .mdc-card__primary-action, .mdc-card__primary-action:hover { cursor: auto; padding: 20px; min-height: inherit; } [data-credit-card] [data-card-type] { transition: width 1.5s; margin-left: calc(100% - 130px); } [data-credit-card].is-visa { background: linear-gradient(135deg, #622774 0%, #c53364 100%); } [data-credit-card].is-mastercard { background: linear-gradient(135deg, #65799b 0%, #5e2563 100%); } .is-visa [data-card-type], .is-mastercard [data-card-type] { width: auto; } input.is-invalid, .is-invalid input { text-decoration: line-through; } ::placeholder { color: #fff; } #data-credit-card { width:435; min-height: 240; background_color: #5d6874; border-radius: 10px; } #data-cc-digits { top-margin: 2em; color: white; font-size: 2em; line-height : 2em; background : none; border: none; right-margin: 0.5em; } #data-cc-info { color:white; font-size: 1.2em; border: none; background: none; top-margin: 1em; } .mdc-button{ position: fixed; width: 90%; border-solid: 1px; padding-top: 20px; } /* Add Your CSS From Here */ </style> </head> <body >  <div data-cart-info id="data-cart-info" > <h4 class="mdc-t

8th Aug 2019, 11:45 AM

Papah Jackson

Rincewind truly said!!!

9th Aug 2019, 12:09 PM

Elanon