Build a Checkout Page - Build a Checkout Page

HTML-CSS
1

Tell us what’s happening:

I am still stuck on 11, 14, 15, 16, and 18 after hours of searching.

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 src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="Rubik cube">
  </section>
  <section>
      <h2>Payment Information</h2>
      <form id="card-name" name="card-name" type="text">
          <div>
          <label id="card-name" for="card-name">Cardholder Name *</label>
              <input
              id="card-name"
              name="card-name"
              type="text"
              required
              aria-required:"true"
              />
              </div>
              <label id="card-number" for="card-number">Card Number<span aria-hidden="true" class="mandatory">*</span></label>
              <input
              id="card-number"
              name="card-number"
              type="text"
              type="number"
              placeholder="card number"
              required
              aria-required:"true"
              />
<p id="card-number-help">Please enter your 16-digit card number without spaces or dashes.</p>
</form>
<div>
    <form id="expiry-date" name="expiry-date" type="text">
<label id="expiry-date" for="expiry-date">Expiry Date<span aria-hidden="true" class="mandatory">*</span></label>
<input
id="expiry-date"
name="expiry-date"
type="date"
aria-required:"true"
required
/>
</div>
<label id="cvv" for="cvv">CVV *</label>
<input
id="cvv"
name="cvv"
type="text"
required
/>
<div>
<button id="place-order" type="place-order">Place Order</button>
</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

you have multiple elements with the same id, please make sure that doesn’t happen

then some of your labels don’t have a span

your card number input does not have a aria-describedby attribute

1 Like
3

Thank you, the multiple elements was the big issue.

1 Like