Step 12 build a calorie counter fcc issue

JavaScript
1

Create a new Topic

​​​

​​​​​​​​​

hi, doing the calorie counter project. no help button on this step. using jaws for windows 2025 screen reader. so doing step 12 and did add the div output hide in the editor and on my local html file in vs code, but theres a bug with the fcc editor. so will paste the step, the code i have, the error message and the tests. so i do have the correct code, and no spaces outside the tag, unless theres invisable characters or hidden trailers, but as i cannot see, so cannot tell whether it is there. so pasting my code below.

marvin.

ps: pasting now.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calorie Counter</title>
  </head>
<body>
  <main>
    <h1>Calorie Counter</h1>
    <form id="calorie-counter">
      <label for="budget">Budget</label>
      <input type="number" id="budget" min="0" 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">
        <label for="entry-dropdown">Add food or exercise:</label>
        <select id="entry-dropdown" name="options">
          <option value="breakfast" selected>Breakfast</option>
          <option value="lunch">Lunch</option>
          <option value="dinner">Dinner</option>
          <option value="snacks">Snacks</option>
          <option value="exercise">Exercise</option>
        </select>
        <button type="button" id="add-entry">Add Entry</button>
      </div>
      <button type="submit" id="submit">Calculate Remaining Calories</button>
      <button type="button" id="clear">Clear</button>
    </form>
    <div id="output" class="output hide"></div>
  </main>
  <script src="script.js"></script>
</body>
</html>
step:

https://www.freecodecamp.org/learn/full-stack-developer/workshop-calorie-counter/step-12

Errors:
You should add a div element after your form.
1. You should add a div element after your form.
2. Your new div element should have an id set to output.
3. Your new div element should have the class values of output and hide.
4. Your new div should be empty.
// tests completed
ps::: i have reset the lesson multiple times, have tried on multiple browsers like chrome, firefox, edge. also tried with multiple screen readers, jaws, nvda, windows narrator. so theres a bug in the fcc cache, and no easy way to delete that, do you know of a tool to delete the cache from the fcc editor as a stadn alone tool. so will be doing the other steps and then come back to step 12, down the track or the end of the project. also will let quincy larson know of this issue if you cannot replicate it.
thank you.
marvin.

apachebashcppcsscoffeescriptdiffxmlhttpinijsonjavajavascriptmakefilemarkdownnginxobjectivecrubyperlphppythonsqlhandlebarstypescriptrustcmatlab

Create TopicDiscard

2

Please post a link to the Step

3

hi, heres the step 12 to the calorie countr project that fcc is having a fit.

marvin.

ps: heres the link to the step 12.

4

try adding only the requested div, and doing no other changes, there are other changes in your code

6

I see you opened a github issue to ask for help for this step. Please don’t.

In your code there are breaking changes, you must reset the step, then using the code you get after resetting the step, you can add the new empty div after the form element.

7

hi, okay well i then did type up the <div id=”output” class=”output hide”> but the fcc editor is not passing, so will paste my complete html and the error tests and the error. how do i get this to pass. is there hidden characters or hidden spacing. totally blind and using a screen reader. is the fcc editor at fault or left over cache or files. yes reset the lesson, delete the code, then did a hard refresh on firefox shift control r it reloaded with the code, deleted the whole code pasted my vs code, and it was passing the other parts of the page, except this div. i dont know why? can any one please be gentle and tell me or show me how to get this to pass. what stupid or simple thing am i not getting, have tried multiple times. and not passing. so will paste below.

marvin.

ps: pasting the code below.

so can any one help. and in firefox not telling me the tests or the steps. so wondering is the fcc editor broken? please help. totally frustrated.<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calorie Counter</title>
  </head>
<body>
  <main>
    <h1>Calorie Counter</h1>
    <form id="calorie-counter">
      <label for="budget">Budget</label>
      <input type="number" id="budget" min="0" 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">
        <label for="entry-dropdown">Add food or exercise:</label>
        <select id="entry-dropdown" name="options">
          <option value="breakfast" selected>Breakfast</option>
          <option value="lunch">Lunch</option>
          <option value="dinner">Dinner</option>
          <option value="snacks">Snacks</option>
          <option value="exercise">Exercise</option>
        </select>
        <button type="button" id="add-entry">Add Entry</button>
      </div>
      <button type="submit" id="submit">Calculate Remaining Calories</button>
      <button type="button" id="clear">Clear</button>
    </form>
<div id="output" class="output hide"></div>  </main>
  <script src="script.js"></script>
</body>
</html>

You should add a div element after your form.
8

please reset the step so you can get the right code to start, if you do not have the right code the tests rarely are able to pass

9

You really, really, really need to use the starting code you are given for each step. You cannot use your solution to the last step as your starting point. You should not paste all of your code from VSCode. You must only add the changes the step requests and paste in absolutely nothing else.

1 Like