Build a Recipe Ingredient Converter - Step 18

JavaScript
1

Tell us what’s happening:

I tried a lot of things for this one: // running tests

  1. When clicking the button your updateResultsList function should properly update the DOM.
    // tests completed . But it seems there’s something I’m missing. The tests looks good on the converter, same result and format as expected, but I just can’t find my mistake. I tried to use appendchild, capitalize the first letter, adding
      marks at he begining and end, etc. I’m really stuck

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

const updateResultsList = () => { 
  resultList.innerHTML = ""; 
  // resultList.innerHTML = `<ul id="result-list">`; 
  units.forEach((unit) => { 
    if (unit != unitToConvert.value) { 
      const qu = convertQuantity(unitToConvert.value)(unit)(ingredientQuantity.value).toFixed(2);
      // const cap = (str) => str.charAt(0).toUpperCase() + str.slice(1);
      resultList.innerHTML +=`<li>${ingredientName.value}: ${qu} ${unit}</li>`; 
      } 
      // resultList.innerHTML += `</ul>`;
    }) 
  }

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

Challenge Information:

Build a Recipe Ingredient Converter - Step 18

2

Using .toFixed() here is questionable. Try removing that.

3

Thanks for the tip! After removing toFixed(), same result.

4

Yes. You will need to format your li string so it looks like the example.

5

In what way is it different? I can’t see it.

By the way, isn’t the style controlled by the css?

flour: 0.02 cup
flour: 0.18 ounce
flour: 1.00 teaspoon
mine:
flour: 0.02 cup
flour: 0.18 ounce
flour: 1.00 teaspoon
6

Please post your updated code.

7 
const updateResultsList = () => {

resultList.innerHTML = “”;

units.forEach((unit) => {if (unit != unitToConvert.value) { 

  const qu = convertQuantity(unitToConvert.value)(unit)(ingredientQuantity.value);

  resultList.innerHTML +=\`<li>${ingredientName.value}: ${qu.toFixed(2)} ${unit}</li>\`; 

  } 

})

}

8

What about if I enter “Flour” in the ingredient name field?

9

You get Flour.
Flour: 0.02 cup
Flour: 0.18 ounce
Flour: 1.00 teaspoon

10

And does that output match the example? What more do you need to do to format the output correctly?

11

As I show you before, yes, the format matches the example. At least at what I can see. spaces, quantity format, etc.
The error states

When clicking the button your updateResultsList function should properly update the DOM"

So I guess maybe is the way I update de DOM, so I tried
const updateResultsList = () => {
resultList.innerHTML = “”;
units.forEach((unit) => {
if (unit != unitToConvert.value) {
const qu = convertQuantity(unitToConvert.value)(unit)(ingredientQuantity.value);
const newLi= document.createElement(“li”);
newLi.textContent =${ingredientName.value}: ${qu.toFixed(2)} ${unit};
resultList.appendChild(newLi)
}
})
}

but same result

12

The expected output and your output when “Flour” is entered do not match.

What can you do here to make sure user-entered “Flour” is displayed as “flour”?

BTW, I’m seeing backslashes in your code before the backticks. Those should be removed.

And, just for clarification, both methods of changing the contents of resultList are updating the DOM.

13

Where does it say such a thing? I don’t see anything that says I should decapitalize the first letter. I’d assume the output should match whatever is given as input. Besides, I don’t think the format is the issue here. As for the backslashes, I have no idea where they came from, probably from copying and pasting here. They’re not in any version of my code .

14

Ok. I found the solution. I was supposed to use the functions created during the past steps.

15

Hello, guys. I keep getting this error! 1. When clicking the button your

updateResultsList

function should properly update the DOM.

const updateResultsList = () => {
  resultList.innerHTML = "";
  let value;
  let ingredient= unitToConvert.value;
  units.forEach((unit)=>{if(unitToConvert.value!== unit)
  {value= convertQuantity(unitToConvert.value)(unit)(ingredientQuantity.value)
  console.log(value);
  const li= document.createElement("li");
  li.textContent=`${unitToConvert.value}: ${value} ${unit}`;
  resultList.appendChild(li)
  }
  })

}
16

hi @zakariaestics

please create your own topic

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.