Tell us what’s happening:
The tutor prompt says your new element should have "Entry ${entryNumber} Calories.
but that has already been included with the code
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
// User Editable Region
function addEntry() {
const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
const HTMLString = `
<label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>
<input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />`;
<label for="${entryDropdown.value}-${entryNumber}-calories"> Entry ${entryNumber} Calories</label>;
}
// User Editable Region
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Learn Form Validation by Building a Calorie Counter - Step 50
Hi there!
You aren’t added that new line within the templete literals. Add it before last template literal.
Note: Template literals are back ticks.
Teller
December 4, 2024, 5:17am
3
Hi @booleanmethod9
Here is a comparison of the original code and your code.
The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.
As @hasanzaib1389 mentioned, the last back tick is in the wrong spot.
Also, please remove the single space before the word Entry
Happy coding
1 Like
But the tutor prompt asks to add a new line called label element…
Teller
December 4, 2024, 5:23am
5
You did that, however in the code you posted, the back tick was in the wrong spot so the new label
element was not recognised, and there was an extra space.
The tests are checking for exact code.
Because you didn’t added the new line of label element within the templete literals.
So a backtick to be added to the end like this?:
function addEntry() {
const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
const HTMLString = `
<label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>
<input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />`;
<label for="${entryDropdown.value}-${entryNumber}-calories"> Entry ${entryNumber} Calories</label>;`
}
Teller
December 4, 2024, 6:53am
8
Remove the white space before the word Entry
Also, remove the semi colon and back tick from the end of the input
element.
1 Like
Yes, didn’t do that before I posted that. But am done with that step now, thanks for all the help
1 Like