Learn Form Validation by Building a Calorie Counter - Step 53

JavaScript
1

Tell us what’s happening:

For this challenge I know where I should do +1 but i don’t know why I should do +1. And I don’t know what’s going on this code . I just know that they are variables, functions, template literals but I don’t know what they doing there. Is it normal to have that? Or i am missing something should start learning again from the beginning? How to figure out what’s my weak point? Please Help and give me some suggestions . I will appreciate that very much.

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`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 2 ;
  const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>
  <input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />
  <label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
  <input
    type="number"
    min="0"
    id="${entryDropdown.value}-${entryNumber}-calories"
    placeholder="Calories"
  />`;
  targetInputContainer.innerHTML += HTMLString;
}

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 53

2

I think they explained why though? (because when you first query for the input[type="text"] there are none there? So this means the list of elements is length of 0 which will make the current code write out Entry 0 which is not desired as we want it to type Entry 1?

If you have a question about a specific line of code, please specify it.

3

Thank You for you explanation but I didn’t understood.

4

please take the time to read this article then come back and let us know how we can help you

5

Why have you put +2 when it asks for plus 1? Also you have a space before your semi colon.

const entryNumber = targetInputContainer.querySelectorAll(‘input[type=“text”]’).length + 2 ;

6

Though I can’t say this is common, it happens to most student developers more so if one is fresh from learning javascript or learning it as a beginner

I suggest you look things up, like Google stuff, ask Google “Why do we add a number after the length property” I am sure it’ll give you some meaningful responses. Though FCC explains concepts, look up what you do not understand.

In conclusion, I’d say it’s quite common for one to be following instructions for writing code and yet have no idea how things work.

7

Thank You . But wasn’t asking for the solution. I asked that I am not understanding what the code is doing that I have written till this step. Do I need to repeat that from the beginning again.

8

Ohh! thank you . But I think you also need to study how to give great answers and if you don’t know you shouldn’t rush to give answers.

1 Like
9

Thank You soo much for your feedback and valuable suggestions.

10

OK. If you know the answer, why not complete it as asked and then compare how the Calorie counter looks in the preview window in both steps 53 and 54? You will see that they now start from entry1 which makes much more sense to a user than Entry 0, which is the result of zero based numbering.

11

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