Learn Form Validation by Building a Calorie Counter - Step 42

Tell us what’s happening:

I don’t have a problem writing the correct code to move on to the next step, but I don’t quite understand what’s going on here. What is the purpose of the code inside the querySelector?

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`);

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 42

The querySelector method is designed to use a CSS selector to find an html element on the page. Right now the query selector you have written for is looking for an element on the page with an id of breakfast and other drop down values and then looking for an descendant element with an class of input-container.

Meanwhile the proper way to solve the challenge, with the hashtag finds an element with the id of breakfast and looks for a descendant element with a class of input-container.

Here’s some additional reading.

Happy coding


were you wondering why the challenge wants you to use template literals or were you wondering why you need to use querySelector? If you can clarify the question, we can maybe give you the answer you need.


Oh! Thank you for that explanation! I think I understand now. It’s looking for what will be there once the user starts adding data. I was confused because I couldn’t imagine that. Thank you so much!

1 Like