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.

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