Validation by Building a Calorie Counter - Step 8

JavaScript
1

Tell us what’s happening:

I am not sure it says this because my div element is after my fieldset elements

<!-- file: index.html -->

<!-- User Editable Region -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Calorie Counter</title>
</head>
<body>
  <main>
    <h1>Calorie Counter</h1>
    <div class="container">
      <form id="calorie-counter">
        <label for="budget">Budget</label>
        <input
          type="number"
          min="0"
          id="budget"
          placeholder="Daily calorie budget"
          required
        />
        <fieldset id="breakfast">
          <legend>Breakfast</legend>
          <div class="input-container"></div>
        </fieldset>
        <fieldset id="lunch">
          <legend>Lunch</legend>
          <div class="input-container"></div>
        </fieldset>
        <fieldset id="dinner">
          <legend>Dinner</legend>
          <div class="input-container"></div>
        </fieldset>
        <fieldset id="snacks">
          <legend>Snacks</legend>
          <div class="input-container"></div>
        </fieldset>
        <fieldset id="exercise">
          <legend>Exercise</legend>
          <div class="input-container"></div>
        </fieldset>
        <div class="controls"></div>
        <span>This is a span nested within the controls div.</span>
      </form>
    </div>
  </main>
</body>
</html>




### Your browser information:

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

### Challenge Information:
Learn Form Validation by Building a Calorie Counter - Step 8
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-form-validation-by-building-a-calorie-counter/step-8
2

Not sure it says what?

3

Your div element should come after your fieldset elements. i dunno why it says this cause the div elemment is after all my fieldset elements

4

Start by creating a div element and assign it a class attribute with the value controls.

Your code:

 <div class="controls"></div>
        <span>This is a span nested within the controls div.</span>

Looks good, but you added something that the instructions did not ask for. That will cause a problem for the automatic test, when it encounters something unexpected.

You need to do only what the instructions ask for, no more.

Then, nest a span element inside this div.

Is the span inside the div though?

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.