Learn Form Validation by Building a Calorie Counter - Step 42

JavaScript
1

Tell us what’s happening:

not sure what im doing wrong here acorrding to the research i did i think i followed the instruction but i keep getting the hint You should use a template literal in your querySelector method.

Your code so far

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


/* file: styles.css */


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

function addEntry() {
  const targetId = '#' + entryDropdown.value;
  const targetInputContainer = document.querySelector('${targetId} + ' .input-container');
}

// 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 42

2

Hi @ryanstruckus

Notice how in the example the template literal code does not use quote marks.

Happy coding

3

i changed the quote marks to backtick and i got Your template literal should have the value {targetId} .input-container. not sure why

4

Please share your updated code.

5 
  const targetInputContainer = document.querySelector(`${targetId} + ` .input-container`);
6

Template literals remove the need to use the concatenation operator.
The back ticks come in pairs.

1 Like
7

so it should be $(targetId ) .input-container);

8

Hi there!

The templete literals embedded expression need ${} curly braces around the value.

9

this is what i got now but it still not passing

  const targetInputContainer = document.querySelector(`${targetId} + ` .input-container`);
10

You need to remove the concatenate + and an exta template literal string after that +.
Remember when you use template literals syntex, you didn’t need to add + for concatenate two values together.

11

const targetInputContainer = document.querySelector(`${targetId}`` .input-container);so like this

12

Example

You have added extra back ticks (template literals strings) between the id and class.

13

i think i got ride of all the extra backticks but i still keep getting the same hint message

const targetInputContainer = document.querySelector(`${targetId}   .input-container`);
14

Hi @ryanstruckus

Try removing the two extra spaces in the middle of the expression.

Happy coding

15

Final answer (pretend single quotes are backticks):
code removed by moderator

16

hi @pradyumnadumane

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.