Learn Form Validation by Building a Calorie Counter - Step 2

JavaScript
1

Tell us what’s happening:

I am not sure why this is not working I have followed every instructon so far for the first step


<!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="food">Food Item:</label>
          <input type="text" id="food" name="food" required>

          <label for="calories">Calories:</label>
          <input type="number" id="calories" name="calories" required>
          
          <label for="budget">Budget:</label>
          <input type="number" id="budget" name="budget" required>

          <input type="submit" value="Add">
        </form>
      </div>
    </main>
  </body>
</html>

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 2

2

Hello!

Please do not add additional elements and attributes in. Either remove the unnecessary code or reset the challenge and do as the instruction says.

3 
<!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" id="budget" name="budget" required>

        </form>
      </div>
    </main>
  </body>
</html>
4

Compare your text to the instructed text and see if you can spot your error

5 
      <div class="container">
        <form id="calorie-counter">
          
          <label for="budget">Budget:</label>
          <input type="number" id="Budget" name="Budget" required>

        </form>
      </div>
    </main>
  </body>
</html>
6

did you compare with the instructions?

7

yes I did and it is still not working

8

the text Budget

please check what you wrote against the given text, punctuation counts

9

Notice that in the instruction there is no : while you have one in your text. It is simply Budget

10 
<h1>Calorie Counter</h1>
      <div class="container">
        <form id="calorie-counter">
          
          <label for="budget">Budget</label>
          <input type="number" id="Budget" name="Budget" required>

        </form>
      </div>
    </main>
  </body>
</html>
11

you posted some code, do you have something to say or ask about it?

12

I removed the colon from Budget but it is not working still

13

what test is failing now?

14

then create an input element with the id set to budget
Compare your id and the instructed id

15

Your label element should have the text Budget . This is what it says

16

interesting, on my side it’s not failing that one. You could have changed things you should not change outside the editable region, consider resetting the step

17

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