diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index c134609eda9..79281f06724 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2222,7 +2222,12 @@ "intro": ["Test what you've learned in this quiz on JavaScript Arrays."] }, "dvnt": { "title": "164", "intro": [] }, - "ekdb": { "title": "165", "intro": [] }, + "workshop-recipe-tracker": { + "title": "Build a Recipe Tracker", + "intro": [ + "In this workshop, you will review working with JavaScript objects by building a recipe tracker." + ] + }, "lab-quiz-game": { "title": "Build a Quiz Game", "intro": ["For this lab, you will build a quiz game."] diff --git a/client/src/pages/learn/front-end-development/workshop-recipe-tracker/index.md b/client/src/pages/learn/front-end-development/workshop-recipe-tracker/index.md new file mode 100644 index 00000000000..2a31ce28c72 --- /dev/null +++ b/client/src/pages/learn/front-end-development/workshop-recipe-tracker/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Build a Recipe Tracker +block: workshop-recipe-tracker +superBlock: front-end-development +--- + +## Introduction to the Build a Recipe Tracker + +This is a test for the new project-based curriculum. diff --git a/curriculum/challenges/_meta/workshop-recipe-tracker/meta.json b/curriculum/challenges/_meta/workshop-recipe-tracker/meta.json new file mode 100644 index 00000000000..0b7400a0a37 --- /dev/null +++ b/curriculum/challenges/_meta/workshop-recipe-tracker/meta.json @@ -0,0 +1,65 @@ +{ + "name": "Build a Recipe Tracker", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "hasEditableBoundaries": true, + "dashedName": "workshop-recipe-tracker", + "order": 165, + "superBlock": "front-end-development", + "challengeOrder": [ + { + "id": "66fbcdfed6848e48947dbbc9", + "title": "Step 1" + }, + { + "id": "66fbcf750a62784cf11f562d", + "title": "Step 2" + }, + { + "id": "66ff02792b3042a2b811f475", + "title": "Step 3" + }, + { + "id": "66fbcf750a62784cf11f562e", + "title": "Step 4" + }, + { + "id": "670e4f45f7116c0f216a5177", + "title": "Step 5" + }, + { + "id": "66fbcf750a62784cf11f5630", + "title": "Step 6" + }, + { + "id": "66fbcf750a62784cf11f5631", + "title": "Step 7" + }, + { + "id": "66fbcf750a62784cf11f5632", + "title": "Step 8" + }, + { + "id": "66fbcf750a62784cf11f5633", + "title": "Step 9" + }, + { + "id": "66fbcf750a62784cf11f5634", + "title": "Step 10" + }, + { + "id": "66fbcf750a62784cf11f5635", + "title": "Step 11" + }, + { + "id": "66fbcf750a62784cf11f5636", + "title": "Step 12" + }, + { + "id": "66fbcf750a62784cf11f5637", + "title": "Step 13" + } + ], + "helpCategory": "JavaScript", + "blockType": "workshop" +} \ No newline at end of file diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md new file mode 100644 index 00000000000..9d986165f59 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md @@ -0,0 +1,36 @@ +--- +id: 66fbcdfed6848e48947dbbc9 +title: Step 1 +challengeType: 1 +dashedName: step-1 +--- + +# --description-- + +In this workshop, you will create a recipe tracker using JavaScript objects. + +Start by creating an empty array named `recipes`. This is the array you'll push the recipe objects into later. + +# --hints-- + +You should create an array named `recipes`. + +```js +assert.isArray(recipes) +``` + +Your `recipes` array should be empty. + +```js +assert.isEmpty(recipes) +``` + +# --seed-- + +## --seed-contents-- + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md new file mode 100644 index 00000000000..0186623c8b1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md @@ -0,0 +1,81 @@ +--- +id: 66fbcf750a62784cf11f562d +title: Step 2 +challengeType: 1 +dashedName: step-2 +--- + +# --description-- + +Create an object named `recipe1`. Inside the `recipe1` object, create a `name` property with the value `"Spaghetti Carbonara"`. + +Also inside the `recipe1` object, create an `ingredients` property with an array as the value. The array should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` inside it. + +Create another `ratings` property with array value. The array should have `4`, `5`, `4`, and `5` inside it. + +# --hints-- + +You should create an object named `recipe1`. + +```js +assert.isObject(recipe1) +``` + +Your `recipe1` object should have a `name` property. + +```js +assert.property(recipe1, 'name'); +``` + +Your `name` property should be set to `Spaghetti Carbonara`. + +```js +assert.equal(recipe1.name, 'Spaghetti Carbonara'); +``` + +Your `recipe1` object should have an `ingredients` property. + +```js +assert.property(recipe1, 'ingredients'); +``` + +Your `ingredients` property should have an array value. + +```js +assert.isArray(recipe1.ingredients) +``` + +The array value of your `ingredients` property should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` in it. + +```js +assert.deepEqual(recipe1.ingredients, ["spaghetti", "Parmesan cheese", "pancetta", "black pepper"]); +``` + +Your `recipe1` object should have a `ratings` property. + +```js +assert.property(recipe1, "ratings"); +``` + +Your `ratings` property should have an array value. + +```js +assert.isArray(recipe1.ratings) +``` + +The array value of your `ratings` property should have `4`, `5`, `4`, and `5` in it. + +```js +assert.deepEqual(recipe1.ratings, [4, 5, 4, 5]); +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md new file mode 100644 index 00000000000..f85d78cae38 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md @@ -0,0 +1,152 @@ +--- +id: 66fbcf750a62784cf11f562e +title: Step 4 +challengeType: 1 +dashedName: step-4 +--- + +# --description-- + +Create another `recipe2` object with the following properties and values: + +| Key | Value | +| ----------- | ------- | +| `name` | `Chicken Curry` | +| `ingredients` | `["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]` | +| `ratings` | `[4, 5, 5, 5]` | +| `cookingTime` | `42` | +| `totalIngredients` | `null` | +| `difficultyLevel` | `''` | +| `averageRating` | `null` | + +# --hints-- + +You should create an object named `recipe2`. + +```js +assert.isObject(recipe2) +``` + +Your `recipe2` object should have a `name` property. + +```js +assert.property(recipe2, "name"); +``` + +Your `name` property should be set to `Chicken Curry`. + +```js +assert.equal(recipe2.name, "Chicken Curry"); +``` + +Your `recipe2` object should have an `ingredients` property. + +```js +assert.property(recipe2, "ingredients"); +``` + +Your `ingredients` property should have an array value. + +```js +assert.isArray(recipe2.ingredients) +``` + +The array value of your `ingredients` property should have `chicken breast`, `coconut milk`, `curry powder`, `onion` and `garlic` in it. + +```js +assert.deepEqual(recipe2.ingredients, ["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]); +``` + +Your `recipe2` object should have a `ratings` property. + +```js +assert.property(recipe2, "ratings"); +``` + +Your `ratings` property should have an array value. + +```js +assert.isArray(recipe2.ratings) +``` + +The array value of your `ratings` property should have `4`, `5`, `5`, and `5` in it. + +```js +assert.deepEqual(recipe2.ratings, [4, 5, 5, 5]); +``` + +Your `recipe2` object should have a `cookingTime` property. + +```js +assert.property(recipe2, "cookingTime"); +``` + +Your `cookingTime` property value should be a number. + +```js +assert.isNumber(recipe2.cookingTime); +``` + +Your `cookingTime` property should be set to `42`. + +```js +assert.equal(recipe2.cookingTime, 42); +``` + +Your `recipe2` object should have a `totalIngredients` property. + +```js +assert.property(recipe2, "totalIngredients"); +``` + +Your `totalIngredients` property should be set to `null`. + +```js +assert.isNull(recipe2.totalIngredients); +``` + +Your `recipe2` object should have a `difficultyLevel` property. + +```js +assert.property(recipe2, "difficultyLevel"); +``` + +Your `difficultyLevel` property should be set to an empty string. + +```js +assert.deepEqual(recipe2.difficultyLevel, ""); +``` + +Your `recipe2` object should have an `averageRating` property. + +```js +assert.property(recipe2, "averageRating"); +``` + +Your `averageRating` property should be set to `null`. + +```js +assert.isNull(recipe2.averageRating); +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md new file mode 100644 index 00000000000..a010c6c140c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md @@ -0,0 +1,98 @@ +--- +id: 66fbcf750a62784cf11f5630 +title: Step 6 +challengeType: 1 +dashedName: step-6 +--- + +# --description-- + +A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`. + +You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method. + +Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order. + +# --hints-- + +You should remove `recipe1Name` and its console log. + +```js +assert.notMatch(code, /const\s*recipe1Name\s*=\s*recipe1\.name;?\s*console\.log\(recipe1Name\);?/) +``` + +You should remove `recipe2Name` and its console log. + +```js +assert.notMatch(code, /const\s*recipe2Name\s*=\s*recipe2\.name;?\s*console\.log\(recipe2Name\);?/) +``` + +You should remove `recipe1CookingTime` and its console log. + +```js +assert.notMatch(code, /const\s*recipe1CookingTime\s*=\s*recipe1\.cookingTime;?\s*console\.log\(recipe1CookingTime\);?/) +``` + +You should remove `recipe2CookingTime` and its console log. + +```js +assert.notMatch(code, /const\s*recipe2CookingTime\s*=\s*recipe2\.cookingTime;?\s*console\.log\(recipe2CookingTime\);?/) +``` + +You should push all the recipes objects into the `recipes` array. Make sure to push them in the order they are declared. + +```js +assert.deepEqual(recipes, [recipe1, recipe2, recipe3]); +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +const recipe3 = { + name: 'Vegetable Stir Fry', + ingredients: ['broccoli', 'carrot', 'bell pepper'], + cookingTime: 15, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 3, 4, 5], + averageRating: null, +}; + +--fcc-editable-region-- +const recipe1Name = recipe1.name; +console.log(recipe1Name); + +const recipe2Name = recipe2.name; +console.log(recipe2Name); + +const recipe1CookingTime = recipe1.cookingTime; +console.log(recipe1CookingTime); + +const recipe2CookingTime = recipe2.cookingTime; +console.log(recipe2CookingTime); +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md new file mode 100644 index 00000000000..292feedbae0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md @@ -0,0 +1,104 @@ +--- +id: 66fbcf750a62784cf11f5631 +title: Step 7 +challengeType: 1 +dashedName: step-7 +--- + +# --description-- + +Now, you should work on calculating the `averageRating`, `totalIngredients`, and the `difficultyLevel` for each recipe in the `recipes` array. + +Start by creating a `getAverageRating` function that takes a `ratings` parameter. Inside the function, calculate the average rating using the items in the `ratings` property of each recipe. + +Your `getAverageRating` function must return a number. + +# --hints-- + +You should create a `getAverageRating` function. + +```js +assert.isFunction(getAverageRating) +``` + +Your `getAverageRating` function should have a `ratings` parameter. + +```js +assert.match(getAverageRating.toString(), /ratings/); +``` + +Your `getAverageRating` function should return a number. + +```js +assert.isNumber(getAverageRating(recipe1.ratings)) +``` + +You `getAverageRating` function should return a number when the average rating is `4.00`. + +```js +assert.isNumber(getAverageRating(recipe2.ratings)) +``` + +You `getAverageRating` function should return a number when the average rating is `4.75`. + +```js +assert.isNumber(getAverageRating(recipe2.ratings)) +``` + +You `getAverageRating` function should return a number when the average rating is `4.50`. + +```js +assert.isNumber(getAverageRating(recipe1.ratings)) +``` + +Your `getAverageRating` function should return the correct rating. + +```js +assert.equal(getAverageRating(recipe1.ratings), 4.50) +assert.equal(getAverageRating(recipe2.ratings), 4.75) +assert.equal(getAverageRating(recipe3.ratings), 4.00) +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +const recipe3 = { + name: 'Vegetable Stir Fry', + ingredients: ['broccoli', 'carrot', 'bell pepper'], + cookingTime: 15, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 3, 4, 5], + averageRating: null, +}; + +recipes.push(recipe1, recipe2, recipe3); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md new file mode 100644 index 00000000000..ace358ab7f5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md @@ -0,0 +1,105 @@ +--- +id: 66fbcf750a62784cf11f5632 +title: Step 8 +challengeType: 1 +dashedName: step-8 +--- + +# --description-- + +Create a `getTotalIngredients` function that takes an `ingredients` parameter. This function should return the number of ingredients for each recipe by returning the length of the `ingredients` array. + +# --hints-- + +You should create a `getTotalIngredients` function. + +```js +assert.isFunction(getTotalIngredients) +``` + +You `getTotalIngredients` function should have an `ingredients` parameter. + +```js +assert.match(getTotalIngredients.toString(), /ingredients/); +``` + +Your `getTotalIngredients` function should return a number. + +```js +assert.isNumber(getTotalIngredients(recipe1.ingredients)) +``` + +Your `getTotalIngredients` function should return a number when the total ingrendients is `5`. + +```js +assert.isNumber(getTotalIngredients(recipe2.ingredients)) +``` + +Your `getTotalIngredients` function should return a number when the total ingrendients is `3`. + +```js +assert.isNumber(getTotalIngredients(recipe3.ingredients)) +``` + +Your `getTotalIngredients` function should return a number when the total ingrendients is `4`. + +```js +assert.isNumber(getTotalIngredients(recipe1.ingredients)) +``` + +Your `getTotalIngredients` function should return the correct number of ingredients. + +```js +assert.equal(getTotalIngredients(recipe1.ingredients), 4) +assert.equal(getTotalIngredients(recipe2.ingredients), 5) +assert.equal(getTotalIngredients(recipe3.ingredients), 3) +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +const recipe3 = { + name: 'Vegetable Stir Fry', + ingredients: ['broccoli', 'carrot', 'bell pepper'], + cookingTime: 15, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 3, 4, 5], + averageRating: null, +}; + +recipes.push(recipe1, recipe2, recipe3); + +function getAverageRating(ratings) { + const total = ratings[0] + ratings[1] + ratings[2] + ratings[3]; + return total / ratings.length.toFixed(2); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md new file mode 100644 index 00000000000..c686ff0e9ab --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md @@ -0,0 +1,106 @@ +--- +id: 66fbcf750a62784cf11f5633 +title: Step 9 +challengeType: 1 +dashedName: step-9 +--- + +# --description-- + +Create a `getDifficultyLevel` function that takes `cookingTime` as a parameter. + +If `cookingTime` is less than `30`, the function should return `"easy"`. If it is less than or equal to `60`, the function should return `"medium"`. Otherwise, the function should return `"hard"`. + +# --hints-- + +You should create a `getDifficultyLevel` function. + +```js +assert.isFunction(getDifficultyLevel) +``` + +You `getDifficultyLevel` function should have a `cookingTime` parameter. + +```js +assert.match(getDifficultyLevel.toString(), /cookingTime/); +``` + +Your `getDifficultyLevel` function should return `"easy"` when the `cookingTime` is less than or equal to `30`. + +```js +assert.strictEqual(getDifficultyLevel(10), "easy") +assert.strictEqual(getDifficultyLevel(20), "easy") +assert.strictEqual(getDifficultyLevel(29), "easy") +assert.strictEqual(getDifficultyLevel(30), "easy") +``` + +Your `getDifficultyLevel` function should return `"medium"` when the `cookingTime` is greater than `31` and less than `60`. + +```js +assert.strictEqual(getDifficultyLevel(31), "medium") +assert.strictEqual(getDifficultyLevel(40), "medium") +assert.strictEqual(getDifficultyLevel(50), "medium") +assert.strictEqual(getDifficultyLevel(60), "medium") +``` + +Your `getDifficultyLevel` function should return `"hard"` when the `cookingTime` is greater than `60`. + +```js +assert.strictEqual(getDifficultyLevel(61), "hard") +assert.strictEqual(getDifficultyLevel(65), "hard") +assert.strictEqual(getDifficultyLevel(70), "hard") +assert.strictEqual(getDifficultyLevel(75), "hard") +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +const recipe3 = { + name: 'Vegetable Stir Fry', + ingredients: ['broccoli', 'carrot', 'bell pepper'], + cookingTime: 15, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 3, 4, 5], + averageRating: null, +}; + +recipes.push(recipe1, recipe2, recipe3); + +function getAverageRating(ratings) { + const total = ratings[0] + ratings[1] + ratings[2] + ratings[3]; + return total / ratings.length.toFixed(2); +} + +function getTotalIngredients(ingredients) { + return ingredients.length; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md new file mode 100644 index 00000000000..38ec100fd5a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md @@ -0,0 +1,133 @@ +--- +id: 66fbcf750a62784cf11f5634 +title: Step 10 +challengeType: 1 +dashedName: step-10 +--- + +# --description-- + +It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`. + +Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property. + +Finally, log each variable to the console to see the results. + +# --hints-- + +You should create a `recipe1AverageRating` variable. + +```js +assert.isNotNull(recipe1AverageRating) +``` + +Your `recipe1AverageRating` variable should be set to `getAverageRating(recipe1.ratings)`. + +```js +assert.equal(recipe1AverageRating, getAverageRating(recipe1.ratings)); +``` + +You should log `recipe1AverageRating` to the console. + +```js +assert.match(code, /console\.log\(recipe1AverageRating\);?/) +``` + +You should create a `recipe1TotalIngredients` variable. + +```js +assert.isNotNull(recipe1TotalIngredients) +``` + +Your `recipe1TotalIngredients` variable should be set to `getTotalIngredients(recipe1.ingredients)`. + +```js +assert.equal(recipe1TotalIngredients, getTotalIngredients(recipe1.ingredients)); +``` + +You should log `recipe1TotalIngredients` to the console. + +```js +assert.match(code, /console\.log\(recipe1TotalIngredients\);?/) +``` + +You should create a `recipe1DifficultyLevel` variable. + +```js +assert.isNotNull(recipe1DifficultyLevel) +``` + +Your `recipe1DifficultyLevel` variable should be set to `getDifficultyLevel(recipe1.cookingTime)`. + +```js +assert.equal(recipe1DifficultyLevel, getDifficultyLevel(recipe1.cookingTime)); +``` + +You should log `recipe1DifficultyLevel` to the console. + +```js +assert.match(code, /console\.log\(recipe1DifficultyLevel\);?/) +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +const recipe3 = { + name: 'Vegetable Stir Fry', + ingredients: ['broccoli', 'carrot', 'bell pepper'], + cookingTime: 15, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 3, 4, 5], + averageRating: null, +}; + +recipes.push(recipe1, recipe2, recipe3); + +function getAverageRating(ratings) { + const total = ratings[0] + ratings[1] + ratings[2] + ratings[3]; + return total / ratings.length.toFixed(2); +} + +function getTotalIngredients(ingredients) { + return ingredients.length; +} + +function getDifficultyLevel(cookingTime) { + if (cookingTime <= 30) { + return 'easy'; + } else if (cookingTime <= 60) { + return 'medium'; + } else { + return 'hard'; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md new file mode 100644 index 00000000000..3a34c4658f5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md @@ -0,0 +1,124 @@ +--- +id: 66fbcf750a62784cf11f5635 +title: Step 11 +challengeType: 1 +dashedName: step-11 +--- + +# --description-- + +You can now fill in each item of the `recipes` array with values for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties. + +To do this, access the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of each recipe object and assign them the results of the corresponding function calls with the appropriate arguments. + +For now, access the `averageRating`, `totalIngredients`, and `difficultyLevel` of `recipe1` and set them to the appropriate function calls and arguments. + +# --hints-- + +You should access the `averageRating` property of `recipe1`. + +```js +assert.match(code, /recipe1\.averageRating/) +``` + +You should set the `averageRating` of `recipe1` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter. + +```js +assert.match(code, /recipe1\.averageRating\s*=\s*getAverageRating\(recipe1\.ratings\);?/) +``` + +You should access the `totalIngredients` property of `recipe1`. + +```js +assert.match(code, /recipe1\.totalIngredients/) +``` + +You should set the `totalIngredients` of `recipe1` you accessed to the calling of `getTotalIngredients` with `recipe1.ingredients` as its parameter. + +```js +assert.match(code, /recipe1\.totalIngredients\s*=\s*getTotalIngredients\(recipe1\.ingredients\);?/) +``` + +You should access the `difficultyLevel` property of `recipe1`. + +```js +assert.match(code, /recipe1\.difficultyLevel/) +``` + +You should set the `difficultyLevel` of `recipe1` you accessed to the calling of `getDifficultyLevel` with `recipe1.cookingTime` as its parameter. + +```js +assert.match(code, /recipe1\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe1\.cookingTime\);?/) +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +const recipe3 = { + name: 'Vegetable Stir Fry', + ingredients: ['broccoli', 'carrot', 'bell pepper'], + cookingTime: 15, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 3, 4, 5], + averageRating: null, +}; + +recipes.push(recipe1, recipe2, recipe3); + +function getAverageRating(ratings) { + const total = ratings[0] + ratings[1] + ratings[2] + ratings[3]; + return total / ratings.length.toFixed(2); +} + +function getTotalIngredients(ingredients) { + return ingredients.length; +} + +function getDifficultyLevel(cookingTime) { + if (cookingTime <= 30) { + return 'easy'; + } else if (cookingTime <= 60) { + return 'medium'; + } else { + return 'hard'; + } +} + +const recipe1AverageRating = getAverageRating(recipe1.ratings); +console.log(recipe1AverageRating); + +const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients); +console.log(recipe1TotalIngredients); + +const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime); +console.log(recipe1DifficultyLevel); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md new file mode 100644 index 00000000000..bd9aceddf5f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md @@ -0,0 +1,124 @@ +--- +id: 66fbcf750a62784cf11f5636 +title: Step 12 +challengeType: 1 +dashedName: step-12 +--- + +# --description-- + +Repeat the process for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe2`. + +# --hints-- + +You should access the `averageRating` property of `recipe2`. + +```js +assert.match(code, /recipe2\.averageRating/) +``` + +You should set the `averageRating` of `recipe2` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter. + +```js +assert.match(code, /recipe2\.averageRating\s*=\s*getAverageRating\(recipe2\.ratings\);?/) +``` + +You should access the `totalIngredients` property of `recipe2`. + +```js +assert.match(code, /recipe2\.totalIngredients/) +``` + +You should set the `totalIngredients` of `recipe2` you accessed to the calling of `getTotalIngredients` with `recipe2.ingredients` as its parameter. + +```js +assert.match(code, /recipe2\.totalIngredients\s*=\s*getTotalIngredients\(recipe2\.ingredients\);?/) +``` + +You should access the `difficultyLevel` property of `recipe2`. + +```js +assert.match(code, /recipe2\.difficultyLevel/) +``` + +You should set the `difficultyLevel` of `recipe2` you accessed to the calling of `getDifficultyLevel` with `recipe2.cookingTime` as its parameter. + +```js +assert.match(code, /recipe2\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe2\.cookingTime\);?/) +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +const recipe3 = { + name: 'Vegetable Stir Fry', + ingredients: ['broccoli', 'carrot', 'bell pepper'], + cookingTime: 15, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 3, 4, 5], + averageRating: null, +}; + +recipes.push(recipe1, recipe2, recipe3); + +function getAverageRating(ratings) { + const total = ratings[0] + ratings[1] + ratings[2] + ratings[3]; + return total / ratings.length.toFixed(2); +} + +function getTotalIngredients(ingredients) { + return ingredients.length; +} + +function getDifficultyLevel(cookingTime) { + if (cookingTime <= 30) { + return 'easy'; + } else if (cookingTime <= 60) { + return 'medium'; + } else { + return 'hard'; + } +} + +const recipe1AverageRating = getAverageRating(recipe1.ratings); +console.log(recipe1AverageRating); + +const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients); +console.log(recipe1TotalIngredients); + +const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime); +console.log(recipe1DifficultyLevel); + +recipe1.averageRating = getAverageRating(recipe1.ratings); +recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients) +recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime) + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md new file mode 100644 index 00000000000..032cb8cd781 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md @@ -0,0 +1,186 @@ +--- +id: 66fbcf750a62784cf11f5637 +title: Step 13 +challengeType: 1 +dashedName: step-13 +--- + +# --description-- + +The `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe3` have been filled in for you. + +Now, log the `recipes` array to the console to see all its items filled with the updated values. + +With that, your recipes tracker project is complete. + +# --hints-- + +You should log the `recipes` array to the console. + +```js +assert.match(code, /console\.log\(recipes\);?/) +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +const recipe3 = { + name: 'Vegetable Stir Fry', + ingredients: ['broccoli', 'carrot', 'bell pepper'], + cookingTime: 15, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 3, 4, 5], + averageRating: null, +}; + +recipes.push(recipe1, recipe2, recipe3); + +function getAverageRating(ratings) { + const total = ratings[0] + ratings[1] + ratings[2] + ratings[3]; + return total / ratings.length.toFixed(2); +} + +function getTotalIngredients(ingredients) { + return ingredients.length; +} + +function getDifficultyLevel(cookingTime) { + if (cookingTime <= 30) { + return 'easy'; + } else if (cookingTime <= 60) { + return 'medium'; + } else { + return 'hard'; + } +} + +const recipe1AverageRating = getAverageRating(recipe1.ratings); +console.log(recipe1AverageRating); + +const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients); +console.log(recipe1TotalIngredients); + +const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime); +console.log(recipe1DifficultyLevel); + +recipe1.averageRating = getAverageRating(recipe1.ratings); +recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients) +recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime) + +recipe2.averageRating = getAverageRating(recipe2.ratings); +recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients); +recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime); + +recipe3.averageRating = getAverageRating(recipe3.ratings); +recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients) +recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime) + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +# --solutions-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +const recipe3 = { + name: 'Vegetable Stir Fry', + ingredients: ['broccoli', 'carrot', 'bell pepper'], + cookingTime: 15, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 3, 4, 5], + averageRating: null, +}; + +recipes.push(recipe1, recipe2, recipe3); + +function getAverageRating(ratings) { + const total = ratings[0] + ratings[1] + ratings[2] + ratings[3]; + return (total / ratings.length).toFixed(2); +} + +function getTotalIngredients(ingredients) { + return ingredients.length; +} + +function getDifficultyLevel(cookingTime) { + if (cookingTime <= 30) { + return 'easy'; + } else if (cookingTime <= 60) { + return 'medium'; + } else { + return 'hard'; + } +} + +const recipe1AverageRating = getAverageRating(recipe1.ratings); +console.log(`Recipe 1 Average Rating ${recipe1AverageRating}`); + +const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients); +console.log(`Recipe 1 Total Ingredients: ${recipe1TotalIngredients}`); + +const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime); +console.log(`Recipe 1 Difficulty: ${recipe1DifficultyLevel}`); + +recipe1.averageRating = getAverageRating(recipe1.ratings); +recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients) +recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime) + +recipe2.averageRating = getAverageRating(recipe2.ratings); +recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients); +recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime); + +recipe3.averageRating = getAverageRating(recipe3.ratings); +recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients) +recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime) + +console.log(recipes); +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md new file mode 100644 index 00000000000..2c7c35c4048 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md @@ -0,0 +1,86 @@ +--- +id: 66ff02792b3042a2b811f475 +title: Step 3 +challengeType: 1 +dashedName: step-3 +--- + +# --description-- + +Add the following properties to the `recipe1` object: + +| Key | Value | +| ----------- | ------- | +|`cookingTime`|`22`| +|`totalIngredients`|`null`| +|`difficultyLevel`|`""`| +|`averageRating`|`null`| + +The properties with `null` and empty string values will be updated later after you calculate them. + +# --hints-- + +Your `recipe1` object should have a `cookingTime` property. + +```js +assert.property(recipe1, "cookingTime"); +``` + +Your `cookingTime` property should be set to `22`. + +```js +assert.equal(recipe1.cookingTime, 22); +``` + +Your `recipe1` object should have a `totalIngredients` property. + +```js +assert.property(recipe1, "totalIngredients"); +``` + +Your `totalIngredients` property should be set to `null`. + +```js +assert.isNull(recipe1.totalIngredients); +``` + +Your `recipe1` object should have a `difficultyLevel` property. + +```js +assert.property(recipe1, "difficultyLevel"); +``` + +Your `difficultyLevel` property should be set to an empty string. + +```js +assert.deepEqual(recipe1.difficultyLevel, ""); +``` + +Your `recipe1` object should have a `averageRating` property. + +```js +assert.property(recipe1, "averageRating"); +``` + +Your `averageRating` property should be set to `null`. + +```js +assert.isNull(recipe1.averageRating); +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + ratings: [4, 5, 4, 5], +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md new file mode 100644 index 00000000000..6e051af223e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md @@ -0,0 +1,135 @@ +--- +id: 670e4f45f7116c0f216a5177 +title: Step 5 +challengeType: 1 +dashedName: step-5 +--- + +# --description-- + +Before we move on, you should practice how to access properties from an object. + +You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example: + +```js +const person = { + name: 'John', + age: 30, + job: 'Software Engineer' +}; + +console.log(person.name); // John +console.log(person['age']); // 30 +``` + +Access the `name` properties of both `recipe1` and `recipe2`, and assign them to the variables `recipe1Name` and `recipe2Name`, respectively. + +Next, access the `cookingTime` properties of both recipes and assign them to the variables `recipe1CookingTime` and `recipe2CookingTime`, respectively. + +Make sure all the variables you created are logged to the console. + +# --hints-- + +You should create a `recipe1Name` variable. + +```js +assert.isNotNull(recipe1Name) +``` + +You should set your `recipe1Name` variable to the accessment of the `name` property of `recipe1`. + +```js +assert.match(code, /recipe1\.name|recipe1\[("|'|`)name("|'|`)\]/) +``` + +You should log `recipe1Name` to the console. + +```js +assert.match(code, /console\.log\(recipe1Name\)/) +``` + +You should create a `recipe2Name` variable. + +```js +assert.isNotNull(recipe2Name) +``` + +You should set your `recipe2Name` variable to the accessment of the `name` property of `recipe2`. + +```js +assert.match(code, /recipe2\.name|recipe2\[("|'|`)name("|'|`)\]/) +``` + +You should log `recipe2Name` to the console. + +```js +assert.match(code, /console\.log\(recipe2Name\)/) +``` + +You should create a `recipe1CookingTime` variable. + +```js +assert.isNotNull(recipe1CookingTime) +``` + +You should set your `recipe1CookingTime` variable to the accessment of the `cookingTime` property of `recipe1`. + +```js +assert.match(code, /recipe1\.cookingTime|recipe1\[("|'|`)cookingTime("|'|`)\]/) +``` + +You should log `recipe1CookingTime` to the console. + +```js +assert.match(code, /console\.log\(recipe1CookingTime\)/) +``` + +You should create a `recipe2CookingTime` variable. + +```js +assert.isNotNull(recipe2CookingTime) +``` + +You should set your `recipe2CookingTime` variable to the accessment of the `cookingTime` property of `recipe2`. + +```js +assert.match(code, /recipe2\.cookingTime|recipe2\[("|'|`)cookingTime("|'|`)\]/) +``` + +You should log `recipe2CookingTime` to the console. + +```js +assert.match(code, /console\.log\(recipe2CookingTime\)/) +``` + +# --seed-- + +## --seed-contents-- + +```js +const recipes = []; + +const recipe1 = { + name: 'Spaghetti Carbonara', + ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'], + cookingTime: 22, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 4, 5], + averageRating: null, +}; + +const recipe2 = { + name: 'Chicken Curry', + ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'], + cookingTime: 42, + totalIngredients: null, + difficultyLevel: '', + ratings: [4, 5, 5, 5], + averageRating: null, +}; + +--fcc-editable-region-- + +--fcc-editable-region-- +```