Build a Checkout Page - Build a Checkout Page

HTML-CSS
1

Tell us what’s happening:

im stuck like 3 hrs in fighting with thisim running and am bugged on 16/18 and the forum answers are very vague as to what the problem is and what it is those with the same problem are doing wrong
// running tests
16. You should have a p element with an id of card-number-help immediately after the card number input.
18. Your card number input should have aria-describedby set to card-number-help.
// tests completed

Your code so far

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

<head>
    <meta charset="UTF-8" />
    <title>Checkout Page</title>
</head>
    <h1>
     Checkout   
    </h1>
    <section>
        <img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="Rubix Cube">
        <h2>
            Your Cart    
        </h2>
    </section>
    <section>
        <h2>Payment Information</h2>    
        <form>
            <label for="card-name"><span aria-hidden="true">*</span>
                <input type="text" id="card-name" name="card-name" required>
            <label for="card-number"><span aria-hidden="true">*</span>
            <input type="text" id="card-number" name="card-number" required>
            <p id="card-number-help"> Help </p>    
        </form>
    </section>

<body>
    <h2>
        Your Cart    
    </h2>

</body>

</html>

Your browser information:

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

Challenge Information:

Build a Checkout Page - Build a Checkout Page

2

Welcome to the forum @jeremy1

Why is the opening bodytag appearing below a section element?

Why are there two Your Cart headings.

Make sure all elements with an opening tag, have a closing tag.

For the last user story, are you using that attribute in your code?

Happy coding

3

i let it get a bit sloppy from rewriting it so much but that last point is a thinker would i need another label to include that as a for= element or should i have a label and an input?

4

Then you need to clean it up

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

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

<body>
    <h1>
        Checkout
    </h1>
    <section>
        <img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="A rubix cube">
        <h2>
            Your Cart
        </h2>
        
    </section>
    
    <section>
        <h2>
            Payment Information
        </h2>
        <form>
            <label><span aria-hidden="true">*</span>
                <input type="text" id="card-name" name="card-name" required>
            <label><span aria-hidden="true">*</span>
                <input type="text" id="card-number" name="card-number" required>
        </form>
    </section>
</body>

</html>
1 Like
6

i hope this is a bit more readable, but im still struggling with the next step to take. do i add an extra label and input, or am i missing by miles alltogether. sorry im still very new to all this

7

Go to User Story 7 and 8.

  1. You should have an input with an id and name of card-name, and a type of text within your form and a label associated with it.

Your label element is not complete.

Search the web for “How to associate label with an input”

8

OMG i got it ty so much for pointing out it was the label. my dumb self forgot to close it pk your awsome

1 Like