I need help in this line of code

I need help in this line of code
0

no reassured css style

Thanks a lot for helping. it’s fixed

Hello good morning bros please i need help with this stuff “Create a DIV and give it a data-cart-info attribute. Inside the DIV, create a HEADING with mdc-typography--headline4" as its CSS class” anything will be much appreciated.

<body>
    <div data-cart-info>
      <heading class="mdc-typography--headline4">
      <span class="material-icons">
        shopping_cart
      </span>
      <span data-bill>
        
      </span>
      </heading>
    </div>

Hope this answers your question…

Thanks, but it is still given me error of YOUR CSS HAS ONE OR MORE SYNTAX ERROR’ please should i place the code?

Kindly share you full codes so that we can know why you’re getting the error

Mini App
  body
  {
   background-color:white;
    margin: 0;
    padding: 1em;
  }
  span
  {display: inline-block;
  vertical-align: middle;
  }
  span.material-icons{
    font-size: 150px;
  }
  [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);
  }

  .is-visa {
    background: linear-gradient(135deg, #622774 0%, #c53364 100%);
  }

  .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;
  }
  
</style>
shopping_cart
<script>
  const supportedCards = {
    visa, mastercard
  };
  
  const countries = [
    {
      code: "US",
      currency: "USD",
      country: 'United States'
    },
    {
      code: "NG",
      currency: "NGN",
      country: 'Nigeria'
    },
    {
      code: 'KE',
      currency: 'KES',
      country: 'Kenya'
    },
    {
      code: 'UG',
      currency: 'UGX',
      country: 'Uganda'
    },
    {
      code: 'RW',
      currency: 'RWF',
      country: 'Rwanda'
    },
    {
      code: 'TZ',
      currency: 'TZS',
      country: 'Tanzania'
    },
    {
      code: 'ZA',
      currency: 'ZAR',
      country: 'South Africa'
    },
    {
      code: 'CM',
      currency: 'XAF',
      country: 'Cameroon'
    },
    {
      code: 'GH',
      currency: 'GHS',
      country: 'Ghana'
    }
  ];
  
  const startApp = () => {
  };

  startApp();
</script>
this is the code thanks
input[data-cc-digits] {
        color:#fff;
        font-size:2em;
        line-height:2em;
        border:none;
        background:none;
        margin-right:0.5em;
      }

please i need some help here.
Here’s what i’m trying to implement

  • The data-cc-digits DIV should have a 2em top margin.
  • INPUT elements in the data-cc-digits DIV should have a white color, 2em font size and line height, no border or background, and a right margin of 0.5em ;

please who has scaled through?


div[data-cc-digits] {
        margin-top: 2em;
      }
      input[data-cc-digits] {
        color:white;
        font-size:2em;
        line-height:2em;
        background:none;
        border:none;
        margin-right:0.5em;
      }
      div[data-cc-info]{
        margin-top: 1em;
      }
      [data-cc-info]input{
        color: white;
        font-size: 1.2em;
        border: none;
        background: none;
      }
      [data-cc-info]input nth-child(2){
        padding-right: 10px;
        float: right;

where am i missing the point

what error did it give?

[data-cc-info]input nth-child(2) should be [data-cc-info] :nth-child(2)

pls i need help

  • 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 with mdc-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 of data-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 of data-credit-card and set its class to mdc-card and mdc-card--outlined Within the data-credit-card DIV, create 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!
  • Within the .mdc-card__primary-action DIV, create an IMAGE with an attribute of data-card-type and set its SRC to https://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 a size of 4 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 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 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 to mdc-button and give it a data-pay-btn attribute. It should have Pay & 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.

One or more of the INPUT elements in the “data-cc-digits” DIV does not have the specified CSS.

thanks for this. i hadnt noticed the missing collons

i am still having this error (Your SPAN elements within the “mdc-typography–headline4” HEADING are not as specified) someone please help

guys why have you stopped posting. We were progressing very well. I need help with the css code in challenge 1

I’m also having a problem. i keep getting an error saying “The “data-credit-card” DIV does not have the required CSS style”. I’ve rechecked my code but i can’t find the problem

 span{
        display: inline-block;
        vertical-align: middle;
        
      }
      span.material-icons{
        font-size: 150px;
        
      }
    
      body {
        margin: 0;
        padding: 1em;
        background-color: #fff;
      }
      
      [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);
      }

      .is-visa {
        background: linear-gradient(135deg, #622774 0%, #c53364 100%);
      }

      .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;
      }
    </style>
  </head>
  <body>
    
    <div data-cart-info>
      <header class="mdc-typography--headline4">
        <span class="material-icons">shopping_cart</span>
        <span data-bill></span>
      </header>
    </div>
    
    <div data-credit-card class="mdc-card" "mdc-card--outlined">
      <div class="mdc-card__primary-action">
        <img data-card-type src="http://placehold.it/120x60.png?text=card."></img>
      <div data-cc-digits>
        <input type="text" size="4" placeholder="----"></input>
      	<input type="text" size="4" placeholder="----"></input>
    	<input type="text" size="4" placeholder="----"></input>
  		<input type="text" size="4" placeholder="----"></input>
      </div>
      
      <div data-cc-info>
        <input type="text" size="20"placeholder="Name Surname"></input>
		<input type="text" size="6" placeholder="MM/YY" ></input>
      </div> 
        
      </div>
      
    </div>

Close the css body style

The “data-pay-btn” BUTTON element does not have the specified CSS.

  [data-pay-btn]{
        position: fixed;
        width: 90%;
        border: 1px solid;
        bottom: 20px; 
      }

What am I missing? Kindly assist.
Thank you

Please I need help with this css styling sheet, it keeps saying: The “data-cc-digits” DIV does not have the specified CSS for margin.

<style>
      body {
        margin: 0;
        padding: 1em;
        background-color: white;
      }
      
      span {
        display:inline-block;
        vertical-align: middle;
      }
      
      span.material-icons{
        font-size:150px;
      }
      
      
      [data-cart-info],
      [data-credit-card] {
        transform: scale(0.78);
    	margin-left: -3.4em;
      }
      
      [data-card-type]{
        display: block;
        width: 120px;
        height: 60px;
      }
      
      [data-cc-digits]{
        margin-top: 2em;
      }

      [data-cc-digits]:nth-child(2){
        color: white;
        font-size: 2em;
        line-height: 2em;
        background: none;
        border:none;
        margin-right: 0.5em;
      }
      
      [data-cc-info]{
        margin-top: 1em;
      }
      
      [data-cc-info] input{
        color: white;
        font-size: 1.2em;
      }
      
      [data-cc-info]:nth-child(2){
        padding-right: 10px;
        float: right;
      }
      
      [data-pay-btn]{
        position: fixed;
        width: 90%;
        border: solid 1px;
        bottom: 20px;
      }
      
      [data-credit-card]{
        width: 435px;
        min-height: 240px;
        border-radius: 10px;
        background-color: #5d6874;
      }
      
      [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);
      }

      .is-visa {
        background: linear-gradient(135deg, #622774 0%, #c53364 100%);
      }

      .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;
      }
    </style>
  </head>
  <body>
    
    <div data-cart-info="">
      <header class="mdc-typography--headline4">
        <span class="material-icons">shopping_cart</span>
        <span data-bill></span>
      </header>
    </div>
    
    <div data-credit-card="" class="mdc-card mdc-card--outlined">
      <div class="mdc-card__primary-action">
        <img data-card-type="" src="http://placehold.it/120x60.png?text=Card">
        <div data-cc-digits="">
          <input type="text" size="4" placeholder="----">
          <input type="text" size="4" placeholder="----">
          <input type="text" size="4" placeholder="----">
          <input type="text" size="4" placeholder="----">
        </div>
        <div data-cc-info="">
          <input type="text" size="20" placeholder="Name Surname">
          <input type="text" size="6" placeholder="MM/YY">
        </div>
      </div>
      
      <button class="mdc-button" data-pay-btn="">Pay & Checkout Now</button>
      
    </div>
    ```