Learn Form Validation by Building a Calorie Counter - Step 43

JavaScript
1

Tell us what’s happening:

why we enclosed the whole thing in backticks. The backtick should be holding only the template literal part which was text enclosed in {}, why the class .input-container is also being enclosed in back tick quotations ?

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

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 43

2

because also .input-container is part of a string:

when writing a string you can use single quotes, '', double quotes, "" or backticks ``.
Single quotes and double quotes are the basic way, but when you use backticks you can use a special syntax inside it to interpolate variables and other code: ${}

querySelector takes a string as argument, if you don’t write .input-container inside the backticks than it is not part of a string and it will cause a syntax error

3

I got it. Thanks for explaining .