From 4a2db6ee8d6263f0fdfcd9c29843dd4dba99ecae Mon Sep 17 00:00:00 2001
From: "Krzysztof G." <60067306+gikf@users.noreply.github.com>
Date: Mon, 23 Dec 2024 09:39:40 +0100
Subject: [PATCH] fix(curriculum): use variable names not defined automatically
by browser in Recipe Ingredient Converter (#57607)
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
---
.../67353fb237ffbd01af3be1cc.md | 36 +++++++--------
.../673540f6e49ae33d6a235c20.md | 8 ++--
.../673542088e459b6def5d6e56.md | 8 ++--
.../6735424ecfeb557d81dcc9d1.md | 18 ++++----
.../673543d867b44ac7580610a2.md | 44 +++++++++----------
5 files changed, 56 insertions(+), 58 deletions(-)
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
index aea603952ce..4d432e095c7 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
@@ -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.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
index 1e10d076adc..58b5cc772d6 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
@@ -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");
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
index 3f30a8427b2..4094f64a669 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
@@ -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");
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
index 80e0fd7f684..9f06d4a43ed 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
@@ -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, "Flour: 0.10 cup");
assert.include(resultList.innerHTML, "Flour: 0.88 ounce");
@@ -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");
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
index be34a7dd13e..233026de48c 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
@@ -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, "Flour: 0.10 cup");
@@ -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 += `${ingredient.value}: ${convertedQuantity} ${newUnit}`;
+ resultList.innerHTML += `${ingredientName.value}: ${convertedQuantity} ${newUnit}`;
}
});
}
@@ -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 += `${ingredient.value}: ${convertedQuantity} ${newUnit}`;
+ resultList.innerHTML += `${ingredientName.value}: ${convertedQuantity} ${newUnit}`;
}
});
}