Calorie Counter step 38

JavaScript
1

I have done the step, but I do not understand why I am doing it.
What is the variable targetInputContainer good for?

2

Can you please link to the step?

3

Learn Form Validation by Building a Calorie Counter: Step 38 | freeCodeCamp.org

4

To understand what the targetInputContainer is you first have to look at the HTML.

Here is the relevant HTML

     <fieldset id="breakfast">
            <legend>Breakfast</legend>
            <div class="input-container"></div>
          </fieldset>
          <fieldset id="lunch">
            <legend>Lunch</legend>
            <div class="input-container"></div>
          </fieldset>
          <fieldset id="dinner">
            <legend>Dinner</legend>
            <div class="input-container"></div>
          </fieldset>
          <fieldset id="snacks">
            <legend>Snacks</legend>
            <div class="input-container"></div>
          </fieldset>
          <fieldset id="exercise">
            <legend>Exercise</legend>
            <div class="input-container"></div>
          </fieldset>

The targetId variable represents the dropdown value that the user made here

Screenshot 2024-02-10 at 4.44.39 PM

If the user selects breakfast for example, then targetId will be #breakfast.

The goal of this step is to select the input container div

<div class="input-container"></div>

if the user selects, breakfast then targetInputContainer will be this input container div inside this fieldset element with the id of breakfast

    <fieldset id="breakfast">
            <legend>Breakfast</legend>
            <div class="input-container"></div>
          </fieldset>

if the user selects lunch, then the targetInputContainer will select this input container div inside this fieldset element with the id of lunch

  <fieldset id="lunch">
            <legend>Lunch</legend>
            <div class="input-container"></div>
          </fieldset>

In future steps, you will use the targetInputContainer variable to get all of the inputs inside that input container.

To start with, the input container div is empty.
But eventually your app will have the ability to add more inputs into that div which represent the number entries the user has made in each category in the app.

Screenshot 2024-02-10 at 4.53.12 PM
Screenshot 2024-02-10 at 4.53.12 PM1622×1258 122 KB

Hope that helps

5

Hello:)

Thanks for your detailed and clear answer.
I think I understand it.
One more thing. This is the way that you use queryselector method
to choose fieldset with a specific id and the div within it.

const targetInputContainer = document.querySelector(targetId + ' .input-container');

I have tried to find on web similar examples with concatenation but I failed. Can you recommend an article or sth else?

(Sorry for the late answer but I work in a factory and the last two weeks was extremely busy because of Valentines day.
Again thanks:) )

6

I haven’t found any articles with that specific example of concatenation.

But you can try looking into MDN docs for more examples of querySelector

7

Thanks for the help again:) :grinning:

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.