jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-19 13:00:51 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): use variable names not defined automatically by browser in Recipe Ingredient Converter (#57607)

Browse Source 
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Krzysztof G.
2024-12-23 09:39:40 +01:00
committed by GitHub
parent 43175cfd81
commit 4a2db6ee8d
5 changed files with 56 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
View File

@@ -7,58 +7,56 @@ dashedName: step-14
# --description--
You can finally start hooking your logic into the user interface. You'll need to query the DOM to get a few elements by ID. Get the elements with the `ingredient`, `quantity`, `unit`, `servings`, `recipe-form`, and `result-list` IDs, and assign each to a variable name that matches the ID.
Remember to use camelCase!
You can finally start hooking your logic into the user interface. You'll need to query the DOM to get a few elements by ID. Get the elements with the `ingredient`, `quantity`, `unit`, `servings`, `recipe-form`, and `result-list` IDs, and assign them to the variables `ingredientName`, `ingredientQuantity`, `unitToConvert`, `numberOfServings`, `recipeForm`, and `resultList`, respectively.
# --hints--
You should define an `ingredient` variable.
You should define an `ingredientName` variable.
```js
assert.isDefined(ingredient);
assert.isDefined(ingredientName);
```
Your `ingredient` variable should be the element returned from `.getElementById()` with the `ingredient` ID.
Your `ingredientName` variable should be the element returned from `.getElementById()` with the `ingredient` ID.
```js
assert.strictEqual(ingredient, document.getElementById("ingredient"));
assert.strictEqual(ingredientName, document.getElementById('ingredient'));
```
You should define a `quantity` variable.
You should define a `ingredientQuantity` variable.
```js
assert.isDefined(quantity);
assert.isDefined(ingredientQuantity);
```
Your `quantity` variable should be the element returned from `.getElementById()` with the `quantity` ID.
Your `ingredientQuantity` variable should be the element returned from `.getElementById()` with the `quantity` ID.
```js
assert.strictEqual(quantity, document.getElementById("quantity"));
assert.strictEqual(ingredientQuantity, document.getElementById('quantity'));
```
You should define a `unit` variable.
You should define a `unitToConvert` variable.
```js
assert.isDefined(unit);
assert.isDefined(unitToConvert);
```
Your `unit` variable should be the element returned from `.getElementById()` with the `unit` ID.
Your `unitToConvert` variable should be the element returned from `.getElementById()` with the `unit` ID.
```js
assert.strictEqual(unit, document.getElementById("unit"));
assert.strictEqual(unitToConvert, document.getElementById('unit'));
```
You should define a `servings` variable.
You should define a `numberOfServings` variable.
```js
assert.isDefined(servings);
assert.isDefined(numberOfServings);
```
Your `servings` variable should be the element returned from `.getElementById()` with the `servings` ID.
Your `numberOfServings` variable should be the element returned from `.getElementById()` with the `servings` ID.
```js
assert.strictEqual(servings, document.getElementById("servings"));
assert.strictEqual(numberOfServings, document.getElementById('servings'));
```
You should define a `recipeForm` variable.

8
curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
View File

@@ -218,10 +218,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
return convertedQuantity.toFixed(2);
};
const ingredient = document.getElementById("ingredient");
const quantity = document.getElementById("quantity");
const unit = document.getElementById("unit");
const servings = document.getElementById("servings");
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");

8
curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
View File

@@ -191,10 +191,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
return convertedQuantity.toFixed(2);
};
const ingredient = document.getElementById("ingredient");
const quantity = document.getElementById("quantity");
const unit = document.getElementById("unit");
const servings = document.getElementById("servings");
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");

18
curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
View File

@@ -7,7 +7,7 @@ dashedName: step-17
# --description--
Now you need to iterate through your `units` array. With each value in that array, check if the current value is **not** equal to the current unit (found in `unit.value`).
Now you need to iterate through your `units` array. With each value in that array, check if the current value is **not** equal to the current unit (found in `unitToConvert.value`).
If so, you will need to convert the existing unit to your current unit, and append a list item to `resultList` with the following format:
@@ -20,10 +20,10 @@ For example, a conversion result of five grams for flour should look like `Flour
Your `updateResultsList` function should properly update the DOM.
```js
ingredient.value = "Flour";
quantity.value = 5;
servings.value = 5;
unit.value = "gram";
ingredientName.value = "Flour";
ingredientQuantity.value = 5;
numberOfServings.value = 5;
unitToConvert.value = "gram";
updateResultsList();
assert.include(resultList.innerHTML, "<li>Flour: 0.10 cup</li>");
assert.include(resultList.innerHTML, "<li>Flour: 0.88 ounce</li>");
@@ -193,10 +193,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
return convertedQuantity.toFixed(2);
};
const ingredient = document.getElementById("ingredient");
const quantity = document.getElementById("quantity");
const unit = document.getElementById("unit");
const servings = document.getElementById("servings");
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");

44
curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
View File

@@ -18,10 +18,10 @@ Once that's done, take some time to experiment with different values in the form
Your `recipeForm` should call `updateResultsList` when submitted.
```js
ingredient.value = "Flour";
quantity.value = 5;
servings.value = 5;
unit.value = "gram";
ingredientName.value = "Flour";
ingredientQuantity.value = 5;
numberOfServings.value = 5;
unitToConvert.value = "gram";
const submit = new Event("submit");
recipeForm.dispatchEvent(submit);
assert.include(resultList.innerHTML, "<li>Flour: 0.10 cup</li>");
@@ -192,10 +192,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
return convertedQuantity.toFixed(2);
};
const ingredient = document.getElementById("ingredient");
const quantity = document.getElementById("quantity");
const unit = document.getElementById("unit");
const servings = document.getElementById("servings");
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");
@@ -205,15 +205,15 @@ const updateResultsList = () => {
resultList.innerHTML = "";
units.forEach((newUnit) => {
if (newUnit !== unit.value) {
if (newUnit !== unitToConvert.value) {
const convertedQuantity = processIngredient(
parseFloat(quantity.value),
unit.value,
parseFloat(ingredientQuantity.value),
unitToConvert.value,
newUnit,
parseFloat(servings.value)
parseFloat(numberOfServings.value)
);
resultList.innerHTML += `<li>${ingredient.value}: ${convertedQuantity} ${newUnit}</li>`;
resultList.innerHTML += `<li>${ingredientName.value}: ${convertedQuantity} ${newUnit}</li>`;
}
});
}
@@ -384,10 +384,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
return convertedQuantity.toFixed(2);
};
const ingredient = document.getElementById("ingredient");
const quantity = document.getElementById("quantity");
const unit = document.getElementById("unit");
const servings = document.getElementById("servings");
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");
@@ -397,15 +397,15 @@ const updateResultsList = () => {
resultList.innerHTML = "";
units.forEach((newUnit) => {
if (newUnit !== unit.value) {
if (newUnit !== unitToConvert.value) {
const convertedQuantity = processIngredient(
parseFloat(quantity.value),
unit.value,
parseFloat(ingredientQuantity.value),
unitToConvert.value,
newUnit,
parseFloat(servings.value)
parseFloat(numberOfServings.value)
);
resultList.innerHTML += `<li>${ingredient.value}: ${convertedQuantity} ${newUnit}</li>`;
resultList.innerHTML += `<li>${ingredientName.value}: ${convertedQuantity} ${newUnit}</li>`;
}
});
}