Build a Checkout Page - Build a Checkout Page

HTML-CSS
1

Tell us what’s happening:

Struggling with steps 12,14,15 and 16. I have no clue on how to nest the span element inside of a label. I’ve tried everything I can think of, but it isn’t working. I don’t get 12 either, since all of my inputs are labelled and with 16, the p element is right underneath the input element.

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="Unsolved Rubix's Cube">
    </section>
    <section>
        <h2>Payment Information</h2>
        <form>
            <label id="card-name" type="text">Card name</label>
            <input type="text" id="card-name" name="card-name" required>
            <label id="card-number" type="text" aria-describedby="card-number-help">Card Number </label>
            <input type="text" id="card-number" name="card-number" aria-describedby="card-number-help" required>
            <p id="card-number-help">Insert here</p>
            </form>
            </section>


</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15

Challenge Information:

Build a Checkout Page - Build a Checkout Page

2

Hi,

The label element takes a for attribute to be able to connect to an input.

Here’s an example of nested elements:

<div>
    <h1>Hi</h1>
</div>

In this example, h1 with the text “hi“ is nested inside the div element.

1 Like
3

Hi.

Here is a guide.

step 12 talks of ….element associated with them., check how to associate a label element to an input .
step 14, your span element should be nested inside each label element and the necessary text applied.
step 15, add this attribute plus the provided value to each span element.

Just take your time, do not rush.

Also, use this boilerplate, it’s the standard way to structure your code.


<!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>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>
4

Here’s how to nest a span element inside a label

```

<label id="card-name" type="text">

Card name

</label>

```

5

there’s no span element in that

7

Look in the middle that place where the words are written in between the opening and closing tag of the label element that’s where u put the span element, then in between the span is the word like ‘Name: ’, ‘Email: ’

8

I understand what I need to do, I just don’t understand how to do it.

1 Like
9

I’ve been trying that and still can’t seem to get it to work, can you show me an example please?

10

Learn from this

code removed by moderator

1 Like
11

hi @bened

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

12

My apologies, got to carried away🙏

13

Thanks, I was putting the span between the wrong brackets. Thanks for your help

1 Like