Build a Checkout Page - Build a Checkout Page

HTML-CSS
1

Tell us what’s happening:

You should have a p element with an id of card-number-help immediately after the card number input.
i dont know how to go about this.
i need help

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Checkout Page</title>
</head>

<body>
    <h1>Checkout</h1>
    <section>
        <h2>Your Cart</h2>
        <img alt="spoon" src=" https://cdn.freecodecamp.org/curriculum/labs/cube.jpg">
  </section>

 <section>
  <h2>Payment Information</h2>
  <form> 
  <label for="card-name">Insert your name</label>
  <input type="text"id="card-name" name="card-name" placeholder="Ex. John Davis">
            
  <label for="card-number">Insert card number<span aria-hidden="true" class="mandatory">*</span></label>
  <input  type="text" id="card-number" name="card-number" type="number" aria-required="true" placeholder="Ex. 12405836" required="">  

  <label for="expiration-date">Insert Expiration Date<span aria-hidden="true" class="mandatory">*</span>
  </label>
  <input id="expiration-date" name="expiration-date" type="date" aria-required="true" required="">
  </form>

  </section>
    </div>
    </form>
</section>
</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Checkout Page - Build a Checkout Page

2

I do not see any p element in your code, can you point out which line has it?

3

Tell us what’s happening:

am stuck at number 11
please help me out
i should have a p element with a help text that explain the required card number format

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Checkout Page</title>
</head>

<body>
    <h1>Checkout</h1>
    <section>
        <h2>Your Cart</h2>
        <img alt="spoon" src=" https://cdn.freecodecamp.org/curriculum/labs/cube.jpg">
  </section>

 <section>
  <h2>Payment Information</h2>
  <form> 
  <label for="card-name">Insert your name</label>
  <input type="text"id="card-name" name="card-name" placeholder="Ex. John Davis">
            
  <label for="card-number">Insert card number<span aria-hidden="true" class="mandatory">*</span></label>
  <input  type="text" id="card-number" name="card-number" type="number" aria-required="true" placeholder="Ex. 12405836" required="">  

  <label for="expiration-date">Insert Expiration Date<span aria-hidden="true" class="mandatory">*</span>
  </label>
  <input id="expiration-date" name="expiration-date" type="date" aria-required="true" required="">
  </form>

  </section>
    </div>
    </form>
</section>
</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Checkout Page - Build a Checkout Page

4

Tell us what’s happening:

am stuck at the last part number 11
you should have a p element with the text that explain the required card number
please help me out

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Checkout Page</title>
</head>

<body>
    <h1>Checkout</h1>
    <section>
        <h2>Your Cart</h2>
        <img alt="spoon" src=" https://cdn.freecodecamp.org/curriculum/labs/cube.jpg">
  </section>

 <section>
  <h2>Payment Information</h2>
  <form> 
  <label for="card-name">Insert your name</label>
  <input type="text"id="card-name" name="card-name" placeholder="Ex. John Davis">
            
  <label for="card-number">Insert card number<span aria-hidden="true" class="mandatory">*</span></label>
  <input  type="text" id="card-number" name="card-number" type="number" aria-required="true" placeholder="Ex. 12405836" required="">  

  <label for="expiration-date">Insert Expiration Date<span aria-hidden="true" class="mandatory">*</span>
  </label>
  <input id="expiration-date" name="expiration-date" type="date" aria-required="true" required="">
  <button aria-describedby="card-number-help">
  </button>
  <p id="card-number-help"> 
      <p/>
  </form>

  </section>
    </div>
    </form>
</section>
</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Checkout Page - Build a Checkout Page

5

that p element is not immediately after the card number input

you are also not asked to create a button