I finished the Learn Form Validation by Building a Calorie Counter lesson activity on FreeCodeCamp. I’m trying to read it so I can absorb it better.
In the provided HTML, there’s a submit button with the id calculate-calories:
<button type="submit" id="calculate-calories">Calculate Remaining Calories</button>)
But it doesn’t seem to be explicitly used in the JavaScript code. Instead, the form with the id calorie-counter was used for the event listener for the ‘submit’ event .
<form id="calorie-counter">
const calorieCounter = document.getElementById('calorie-counter'); calorieCounter.addEventListener("submit", calculateCalories);
I’m curious about the purpose of having the button’s id in the first place. Is there a specific reason for it? It wasn’t use in CSS either?
Looks like you’re right, that id isn’t being used anywhere. I’m guessing it’s just an oversight. Originally it was going to be used for something, and then after who know how many revisions to the project, it ended up not being used but no one removed it.
I have created an issue open for contribution to remove the unused id
opened 07:20PM - 09 Jan 24 UTC
type: bug
help wanted
scope: curriculum
new javascript course
### Describe the Issue
In [step 11](https://www.freecodecamp.org/learn/javascri… pt-algorithms-and-data-structures-v8/learn-form-validation-by-building-a-calorie-counter/step-11), we have campers create a `button` with the `id` of `calculate-calories`. However, as was pointed out in this forum [post](https://forum.freecodecamp.org/t/learn-form-validation-by-building-a-calorie-counter/662633), that `id` is not referenced anywhere in the CSS or JavaScript code. So we should remove it.
## Note for contributors
This has been opened for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors.
If you would like to contribute and have not read the contributors docs, please do so here: https://contribute.freecodecamp.org/#/
If you have any issues with contributing, be sure to join us on the [contributors channel](https://discord.com/channels/692816967895220344/715074489422970962), or on the [contributors sub-forum](https://forum.freecodecamp.org/c/contributors/3)
## Files that need to be changed
You will need to first update the instructions for step 11. here is the file for that
https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md
Here is the updated text
```md
# --description--
Create another `div` element. Within it, nest a `button` to `submit` the form. This button should have the text `Calculate Remaining Calories`.
Then add a `button` with the `id` set to `clear` to clear the form (don't forget to give it a `type` attribute that prevents it from submitting the form). This button needs the text `Clear`.
```
Also remove the test and hint text below for the `id` of `calculate-calories`
Your `button` element should have an `id` attribute set to `calculate-calories`.
```js
assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelector('button')?.getAttribute('id'), 'calculate-calories');
```
For all of the HTML files for steps 12 through the end, remove the `id="calculate-calories"` from this button here
```html
<button type="submit" id="calculate-calories">
Calculate Remaining Calories
</button>
```
make sure to also remove the `id="calculate-calories"` from the final solution code found in the `# --solutions--` section.
### Affected Page
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-form-validation-by-building-a-calorie-counter/step-11
### Your code
see explanation above
### Expected behavior
see explanation above
### Screenshots
_No response_
### System
- Device: [e.g. iPhone 6, Laptop]
- OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
- Browser: [e.g. Chrome, Safari]
- Version: [e.g. 22]
### Additional context
_No response_