Learn Form Validation by Building a Calorie Counter - Step 41

JavaScript
1

Tell us what’s happening:

at this point i do not know what to do. do i remove the targetId completely before adding the template literals? i am so confused and at this point i can not understand anymore, i need help. this is so sad for me!

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/126.0.0.0 Safari/537.36

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 41

2

this bit here is trying to concatenate the value in the targetId variable with the string to its right-hand-side.

They want you now to replace this statement with a new template literal.
Template literals are a more seemless way of writing strings which include variables.
so they always replace strings in the code.

2 Likes
3

If this really is the first time template literals are introduced, it is a little rough asking for it to be used with querySelector.

querySelector takes a selector string.

document.querySelector("#someId .someNestedClass")

If we made the id a variable and did concatenation, it would look like this.

const id = "#someId";
document.querySelector(id + ' .someNestedClass')

If we turn that into a template string, it would look like this.

const id = "#someId";
document.querySelector(`${id} .someNestedClass`)
3 Likes
4

thank you it worked! i removed a line of code and also replaced targetId with entryDropdown.value and it passed!

1 Like
5

Thank you, good explanation, worked!

1 Like