Misleading Example In Instruction In 'Build A Recipe Ingredient Converter'

by ADMIN 75 views

Describe the Issue

In step 17 of the instructions for the 'Build a Recipe Ingredient Converter' project on FreeCodeCamp, an example is provided that is misleading. The example, "Flour 5 grams," uses a capitalized ingredient name, an integer quantity, and a pluralized unit. However, formatting your output in this way will cause the test to fail. The correct output should include:

  • The ingredient name exactly as entered in the input (without automatic capitalization),
  • The quantity as a float with two decimal places,
  • And the unit exactly as written (not pluralized).

Affected Page

The affected page is located at https://www.freecodecamp.org/learn/full-stack-developer/workshop-recipe-ingredient-converter/step-17.

Your Code

The code provided in the instructions is as follows:

const updateResultsList = () => {
  resultList.innerHTML = "";
  const name = ingredientName.value;
  const capName = name.charAt(0).toUpperCase() + name.slice(1);
  
  units.forEach((unit) => {
    if (unit !== unitToConvert.value){
      const finalQuantity = processIngredient(ingredientQuantity.value, unitToConvert.value, unit, numberOfServings.value);
     
  
      const li = document.createElement('li');
      li.textContent = `${capName}: ${parseInt(finalQuantity)} ${unit}s`;

      resultList.appendChild(li);
    }
  })
}

recipeForm.addEventListener("submit", updateResultsList);

Expected Behavior

The expected behavior is that the code should pass the test, as the output is exactly the same as the example provided in the instructions.

Screenshots

A screenshot of the issue is provided below:

Image

System

The system used to experience this issue is as follows:

  • Device: Laptop
  • OS: Windows 10
  • Browser: Chrome
  • Version: Version 136.0.7103.48 (Official Build) (64-bit)

Additional Context

No additional context is provided.

Corrected Code

To fix the issue, the code should be modified to include the ingredient name exactly as entered in the input, the quantity as a float with two decimal places, and the unit exactly as written (not pluralized). The corrected code is as follows:

const updateResultsList = () => {
  resultList.innerHTML = "";
  const name = ingredientName.value;
  const quantity = parseFloat(ingredientQuantity.value);
  const unit = unitToConvert.value;
  
  units.forEach((unit) => {
    if (unit !== unitToConvert.value){
      const finalQuantity = processIngredient(ingredientQuantity.value, unitToConvert.value, unit, numberOfServings.value);
     
  
      const li = document.createElement('li');
      li.textContent = `${name}: ${finalQuantity.toFixed(2)} ${unit}`;

      resultList.appendChild(li);
    }
  })
}

recipeForm.addEventListener("submit", updateResultsList);

Explanation

The corrected code includes the following changes:

  • The ingredient name is now included exactly as entered in the input, without automatic capitalization.
  • The quantity is now included as a float with two decimal places using the toFixed(2) method.
  • The unit is now included exactly as written (not pluralized).

Conclusion

Q: What is the issue with the example in the instructions for the 'Build a Recipe Ingredient Converter' project on FreeCodeCamp?

A: The issue is that the example, "Flour 5 grams," uses a capitalized ingredient name, an integer quantity, and a pluralized unit. However, formatting your output in this way will cause the test to fail. The correct output should include the ingredient name exactly as entered in the input, the quantity as a float with two decimal places, and the unit exactly as written (not pluralized).

Q: Why is the example in the instructions misleading?

A: The example is misleading because it does not follow the correct format for the output. The correct format should include the ingredient name exactly as entered in the input, the quantity as a float with two decimal places, and the unit exactly as written (not pluralized).

Q: What is the correct format for the output?

A: The correct format for the output is as follows:

  • The ingredient name exactly as entered in the input (without automatic capitalization),
  • The quantity as a float with two decimal places,
  • And the unit exactly as written (not pluralized).

Q: How do I fix the issue with the example in the instructions?

A: To fix the issue, you should modify your code to include the ingredient name exactly as entered in the input, the quantity as a float with two decimal places, and the unit exactly as written (not pluralized). The corrected code is as follows:

const updateResultsList = () => {
  resultList.innerHTML = "";
  const name = ingredientName.value;
  const quantity = parseFloat(ingredientQuantity.value);
  const unit = unitToConvert.value;
  
  units.forEach((unit) => {
    if (unit !== unitToConvert.value){
      const finalQuantity = processIngredient(ingredientQuantity.value, unitToConvert.value, unit, numberOfServings.value);
     
  
      const li = document.createElement('li');
      li.textContent = `${name}: ${finalQuantity.toFixed(2)} ${unit}`;

      resultList.appendChild(li);
    }
  })
}

recipeForm.addEventListener("submit", updateResultsList);

Q: What are the key changes I need to make to my code to fix the issue?

A: The key changes you need to make to your code are as follows:

  • Include the ingredient name exactly as entered in the input (without automatic capitalization).
  • Include the quantity as a float with two decimal places using the toFixed(2) method.
  • Include the unit exactly as written (not pluralized).

Q: Why is it important to follow the correct format for the output?

A: It is important to follow the correct format for the output because the test will fail if you do not. The correct format is specified in the instructions, and it is essential to follow it to pass the test.

Q: Can I use the example in the instructions as a reference for my code?

A: No, you should not use the example in the instructions as a reference for your code. The example is misleading, and it will cause the test to fail. Instead, you should use the corrected code provided above as a reference.

Q: How do I ensure that my code is following the correct format for the output?

A: To ensure that your code is following the correct format for the output, you should:

  • Check that the ingredient name is included exactly as entered in the input (without automatic capitalization).
  • Check that the quantity is included as a float with two decimal places using the toFixed(2) method.
  • Check that the unit is included exactly as written (not pluralized).

By following these steps, you can ensure that your code is following the correct format for the output and passing the test.