Build a recipe Ingredient converter

JavaScript
1

Not sure why this isn’t passing? Error says im not updating the dom.

2

can you share more details on your issue?

3

ok. Are you able to see my code in the link?
I keep getting the following error.

  1. Your updateResultsList
    function should properly update the DOM.

[TypeError: conversionTable[fromUnit] is undefined]

4

no, you can’t share your code like that

you should use the HELP button to share your code

5 
const conversionTable = {
  cup: { gram: 240, ounce: 8.0, teaspoon: 48 },
  gram: { cup: 1 / 240, ounce: 0.0353, teaspoon: 0.2 },
  ounce: { cup: 0.125, gram: 28.35, teaspoon: 6 },
  teaspoon: { cup: 1 / 48, gram: 5, ounce: 0.167 },
}

const convertQuantity = (fromUnit) => (toUnit) => (quantity) => {
  const conversionRate = conversionTable[fromUnit][toUnit];
  return quantity * conversionRate;
}

const gramsResult = convertQuantity("cup")("gram")(2);
console.log(gramsResult);

const adjustForServings = (baseQuantity) => (newServings) =>
  (baseQuantity / 1) * newServings;

const servingsResult = adjustForServings(4)(6);
console.log(servingsResult);

const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
  const adjustedQuantity = adjustForServings(baseQuantity)(newServings);
  const convertedQuantity =
    convertQuantity(baseUnit)(newUnit)(adjustedQuantity);
  return convertedQuantity.toFixed(2);
};

const ingredientName = document.getElementById("ingredient");
const ingredientQuantity = document.getElementById("quantity");
const unitToConvert = document.getElementById("unit");
const numberOfServings = document.getElementById("servings");
const recipeForm = document.getElementById("recipe-form");
const resultList = document.getElementById("result-list");

const units = ["cup", "gram", "ounce", "teaspoon"];

const updateResultsList = () => {
  resultList.innerHTML = "";
units.forEach(item => {
  if(item !== unitToConvert.value){
    const convertedQuantity = processIngredient(ingredientQuantity.value)(unitToConvert.value)(item)(numberOfServings.value)
    const newListItem = document.createElement('li')
    resultList.appendChild(newListItem)
    newListItem.textContent += `${ingredientName.value}: ${convertedQuantity} ${item}s`
   }
  })

}

its this bottom part that isn’t passing

const updateResultsList = () => {
  resultList.innerHTML = "";
units.forEach(item => {
  if(item !== unitToConvert.value){
    const convertedQuantity = processIngredient(ingredientQuantity.value)(unitToConvert.value)(item)(numberOfServings.value)
    const newListItem = document.createElement('li')
    resultList.appendChild(newListItem)
    newListItem.textContent += `${ingredientName.value}: ${convertedQuantity} ${item}s`
   }
  })

}
6

whoops didn’t include you in reply

7

oh it’s this bug: Misleading example in instruction in 'Build a Recipe Ingredient Converter' · Issue #60148 · freeCodeCamp/freeCodeCamp · GitHub

do not pluralize the units

1 Like
8

still not passing

const updateResultsList = () => {
  resultList.innerHTML = "";
units.forEach(item => {
  if(item !== unitToConvert.value){
    const convertedQuantity = processIngredient(ingredientQuantity.value)(unitToConvert.value)(item)(numberOfServings.value)
    const newListItem = document.createElement('li')
    newListItem.textContent = `${ingredientName.value}: ${parseFloat(convertedQuantity.toFixed(2))} ${item}`
    resultList.appendChild(newListItem)
   }
  })

}

I even tried it using innerHTML

9

I am trying to test your app in the preview and nothing happens,it says that there is something undefined, you may want to double check all the things are in the right place

10

ok. Everything was passing up until this step. I think its step 17

11

didn;t tag you. My bad

12

you do not need to tag me

I am trying to put your code, and use the app, and it says there is something undefined, or you shared the code in a way that something is missing or you need to look deeply into it

1 Like