Learn Form Validation by Building a Calorie Counter - Step 46

JavaScript
1

Tell us what’s happening:

Hello there. I am trying to get through this step and I cannot. I get the error: You should have a label element inside your template literal and I think I have done that. I even went through to the next step and finished the lesson but this will not go through.

Your code so far

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


/* file: script.js */
// User Editable Region

const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  const HTMLString = `
 <label>Entry ${entryNumber} Name</label>`;

// User Editable Region

/* file: styles.css */

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 46

3

Can you copy all the code from top to bottom and paste it here?
I am not sure I see anything wrong in the snippet you sent.

4

Here you Go!


const calorieCounter = document.getElementById('calorie-counter');

const budgetNumberInput = document.getElementById('budget');

const entryDropdown = document.getElementById('entry-dropdown');

const addEntryButton = document.getElementById('add-entry');

const clearButton = document.getElementById('clear');

const output = document.getElementById('output');

let isError = false;

function cleanInputString(str) {

const regex = /[+-\s]/g;

return str.replace(regex, '');

}

function isInvalidInput(str) {

const regex = /\d+e\d+/i;

return str.match(regex);

}

function addEntry() {

const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);

const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;

const HTMLString = `

<label>Entry ${entryNumber} Name</label>`;
5

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
6

It looks like you accidentally deleted the last closing brace }
(It should be on the last line of your code)

Please add it back and see if that helps.

7

Thank you but I just added it and the code will still not go through.

const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  const HTMLString = `
 <label>Entry ${entryNumber} Name</label>`
 };
8

The last brace should be after the semicolon, not before it. (Look at other functions in the file to see what i mean)

9

updated that as well and it will still not go through…

const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  const HTMLString = `
 <label>Entry ${entryNumber} Name</label>`
 ;}
10

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 if you’re on Windows then try to paste the code in again. On other systems, please follow the instructions here.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

11

I do not have a restart step button but a reset button right below my test code button. I was not sure if this is it or if this resets the whole lesson to step 1. is this what you are talking about?

12

yes the reset button will reset the current step.

1 Like
13

Oh that worked! Thank you!

1 Like