mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): create Wildlife Tracker workshop (#65980)
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com> Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: Ilenia M <nethleen@gmail.com>
This commit is contained in:
@@ -4799,6 +4799,13 @@
|
||||
"In these lectures, you will learn the fundamentals of JavaScript objects, including how to create them, access their properties, and understand the difference between primitive and non-primitive data types."
|
||||
]
|
||||
},
|
||||
"workshop-wildlife-tracker": {
|
||||
"title": "Build a Wildlife Tracker",
|
||||
"intro": [
|
||||
"In this workshop, you will build a simple Wildlife Tracker using JavaScript objects.",
|
||||
"You will practice creating objects, accessing and updating properties, removing properties, checking for property existence, and working with bracket notation."
|
||||
]
|
||||
},
|
||||
"lab-cargo-manifest-validator": {
|
||||
"title": "Build a Cargo Manifest Validator",
|
||||
"intro": [
|
||||
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
---
|
||||
id: 6998b99a8e195cd0c1f211df
|
||||
title: Step 1
|
||||
challengeType: 1
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you will build a simple wildlife tracker using JavaScript objects.
|
||||
|
||||
Here is an example of an object:
|
||||
|
||||
```js
|
||||
const animal = {}; // empty object
|
||||
```
|
||||
|
||||
This creates an empty object.
|
||||
|
||||
Now create a variable named `tiger` and assign it an empty object.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a variable named `tiger`.
|
||||
|
||||
```js
|
||||
assert.exists(tiger);
|
||||
```
|
||||
|
||||
The `tiger` variable should be assigned an empty object.
|
||||
|
||||
```js
|
||||
assert.deepEqual(tiger, {});
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
---
|
||||
id: 69999ff7f7862fdfb885ea5d
|
||||
title: Step 3
|
||||
challengeType: 1
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update your `tiger` object by adding a new property called `age`.
|
||||
|
||||
Set the `age` property to the value `5`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`tiger` should have an `age` property.
|
||||
|
||||
```js
|
||||
assert.property(tiger, "age");
|
||||
```
|
||||
|
||||
`tiger.age` should be equal to `5`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(tiger, "age", 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
```
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
---
|
||||
id: 6999a0c1698b93d5d41156ed
|
||||
title: Step 4
|
||||
challengeType: 1
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now add another property to the `tiger` object called `isEndangered`.
|
||||
|
||||
Set the `isEndangered` property to `true`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`tiger` should have an `isEndangered` property.
|
||||
|
||||
```js
|
||||
assert.property(tiger, "isEndangered");
|
||||
```
|
||||
|
||||
`tiger.isEndangered` should be equal to `true`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(tiger, "isEndangered", true);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
```
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 6999ac171928136168654774
|
||||
title: Step 6
|
||||
challengeType: 1
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this step, you will create a function to access the `species` property of an object.
|
||||
|
||||
Here is a small example of accessing a property from an object:
|
||||
|
||||
```js
|
||||
const dog = {
|
||||
species: "Dog"
|
||||
};
|
||||
const getAnimalSpecies = (pet) => {
|
||||
return pet.species; // access species using dot notation
|
||||
};
|
||||
console.log(getAnimalSpecies(dog)); // Dog
|
||||
```
|
||||
|
||||
In this example, the function takes an object as a parameter and returns its `species` property.
|
||||
|
||||
Now create a function called `getSpecies`.
|
||||
|
||||
The function should take one parameter named `animal`.
|
||||
|
||||
Return the `species` property of the `animal` using dot notation.
|
||||
|
||||
After creating the function, use `console.log` to call `getSpecies(tiger)` so you can see the result in the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `getSpecies`.
|
||||
|
||||
```js
|
||||
assert.isFunction(getSpecies);
|
||||
```
|
||||
|
||||
The `getSpecies` function should have a single parameter, `animal`.
|
||||
|
||||
```js
|
||||
const regex = __helpers.functionRegex('getSpecies', ['animal']);
|
||||
assert.match(__helpers.removeJSComments(code), regex);
|
||||
```
|
||||
|
||||
You should log `getSpecies(tiger)` to the console.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\s*\.\s*log\s*\(\s*getSpecies\s*\(\s*tiger\s*\)\s*\)/);
|
||||
```
|
||||
|
||||
`getSpecies` should access the species property using dot notation.
|
||||
|
||||
```js
|
||||
assert.match(code, /animal\.species/);
|
||||
```
|
||||
|
||||
Calling `getSpecies(tiger)` should return `"Tiger"`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(getSpecies(tiger), "Tiger");
|
||||
```
|
||||
|
||||
`getSpecies` should use the function parameter and work with any object.
|
||||
|
||||
```js
|
||||
const lion = { species: "Lion" };
|
||||
assert.strictEqual(getSpecies(lion), "Lion");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const elephant = {
|
||||
species: "Elephant",
|
||||
age: 10,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+133
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 6999ad1cdc249e185aaeedbd
|
||||
title: Step 8
|
||||
challengeType: 1
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this step, you will create a function that adds a new property to an object.
|
||||
|
||||
Here is an example of adding a property inside a function:
|
||||
|
||||
```js
|
||||
const cat = {
|
||||
species: "Cat"
|
||||
};
|
||||
|
||||
const addColor = (pet, color) => {
|
||||
pet.color = color; // add new property using dot notation
|
||||
return pet; // return the updated object
|
||||
}
|
||||
|
||||
console.log(addColor(cat, "White"));
|
||||
// {
|
||||
// species: 'Cat',
|
||||
// color: 'White'
|
||||
// }
|
||||
```
|
||||
|
||||
In this example, the `color` property is added to the `cat` object.
|
||||
|
||||
Now create a function called `addHabitat`. The function should take two parameters: `animal` and `habitat`.
|
||||
|
||||
Inside the function, add a new property called `habitat` to the `animal` object. Set its value equal to the `habitat` parameter.
|
||||
|
||||
Return the updated `animal` object.
|
||||
|
||||
After creating the function, use `console.log` to call `addHabitat(tiger, "Rainforest")` so you can see the updated `tiger` object in the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `addHabitat`.
|
||||
|
||||
```js
|
||||
assert.isFunction(addHabitat);
|
||||
```
|
||||
|
||||
The `addHabitat` function should have two parameters: `animal` and `habitat`.
|
||||
|
||||
```js
|
||||
const regex = __helpers.functionRegex('addHabitat', ['animal', 'habitat']);
|
||||
assert.match(__helpers.removeJSComments(code), regex);
|
||||
```
|
||||
|
||||
`addHabitat` should use dot notation to add the `habitat` property.
|
||||
|
||||
```js
|
||||
assert.match(code, /animal\.habitat\s*=\s*habitat/);
|
||||
```
|
||||
|
||||
The `addHabitat` function should return the updated `animal` object.
|
||||
|
||||
```js
|
||||
const testAnimal = { species: "Cat" };
|
||||
const result = addHabitat(testAnimal, "Forest");
|
||||
assert.strictEqual(result, testAnimal);
|
||||
```
|
||||
|
||||
You should log `addHabitat(tiger, "Rainforest")` to the console.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/console\s*\.\s*log\s*\(\s*addHabitat\s*\(\s*tiger\s*,\s*["']Rainforest["']\s*\)\s*\)/
|
||||
);
|
||||
```
|
||||
|
||||
Calling `addHabitat(tiger, "Rainforest")` should add a habitat property to tiger.
|
||||
|
||||
```js
|
||||
const updatedTiger = addHabitat(tiger, "Rainforest");
|
||||
|
||||
assert.deepEqual(updatedTiger, {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true,
|
||||
habitat: "Rainforest"
|
||||
});
|
||||
```
|
||||
|
||||
`addHabitat` should use the function parameters and work with any object.
|
||||
|
||||
```js
|
||||
const lion = { species: "Lion" };
|
||||
const updatedLion = addHabitat(lion, "Savanna");
|
||||
|
||||
assert.strictEqual(updatedLion.habitat, "Savanna");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const elephant = {
|
||||
species: "Elephant",
|
||||
age: 10,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const getSpecies = (animal) => {
|
||||
return animal.species;
|
||||
};
|
||||
|
||||
console.log(getSpecies(tiger));
|
||||
|
||||
const getAge = (animal) => {
|
||||
return animal.age;
|
||||
};
|
||||
|
||||
console.log(getAge(tiger));
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
---
|
||||
id: 6999adc72c02812a28c01e31
|
||||
title: Step 9
|
||||
challengeType: 1
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this step, you will create a function that updates a property of an object.
|
||||
|
||||
Here is an example of updating a property inside a function:
|
||||
|
||||
```js
|
||||
const dog = {
|
||||
age: 4
|
||||
};
|
||||
|
||||
const changeAge = (pet, updatedAge) => {
|
||||
pet.age = updatedAge; // update existing property using dot notation
|
||||
return pet; // return the updated object
|
||||
}
|
||||
|
||||
console.log(changeAge(dog, 6)); // { age: 6 }
|
||||
```
|
||||
|
||||
In this example, the `age` property is updated to a new value.
|
||||
|
||||
Now create a function called `updateAge`. The function should take two parameters: `animal` and `newAge`.
|
||||
|
||||
Inside the function, update the `age` property of the `animal` object to `newAge`. Return the updated `animal` object.
|
||||
|
||||
After creating the function, use `console.log` to call `updateAge(elephant, 12)` so you can see the updated `elephant` object in the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `updateAge`.
|
||||
|
||||
```js
|
||||
assert.isFunction(updateAge);
|
||||
```
|
||||
|
||||
The `updateAge` function should have two parameters: `animal` and `newAge`.
|
||||
|
||||
```js
|
||||
const regex = __helpers.functionRegex('updateAge', ['animal', 'newAge']);
|
||||
assert.match(__helpers.removeJSComments(code), regex);
|
||||
```
|
||||
|
||||
`updateAge` should use dot notation to update the `age` property.
|
||||
|
||||
```js
|
||||
assert.match(code, /animal\.age\s*=\s*newAge/);
|
||||
```
|
||||
|
||||
The `updateAge` function should return the updated `animal` object.
|
||||
|
||||
```js
|
||||
const testAnimal = { species: "Dog", age: 4 };
|
||||
const result = updateAge(testAnimal, 6);
|
||||
assert.strictEqual(result, testAnimal);
|
||||
```
|
||||
|
||||
You should log `updateAge(elephant, 12)` to the console.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/console\s*\.\s*log\s*\(\s*updateAge\s*\(\s*elephant\s*,\s*12\s*\)\s*\)/
|
||||
);
|
||||
```
|
||||
|
||||
Calling `updateAge(elephant, 12)` should update the age property.
|
||||
|
||||
```js
|
||||
const updatedElephant = updateAge(elephant, 12);
|
||||
|
||||
assert.propertyVal(updatedElephant, "age", 12);
|
||||
```
|
||||
|
||||
`updateAge` should use the function parameters and work with any object.
|
||||
|
||||
```js
|
||||
const lion = { species: "Lion", age: 4 };
|
||||
const updatedLion = updateAge(lion, 9);
|
||||
|
||||
assert.propertyVal(updatedLion, "age", 9);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const elephant = {
|
||||
species: "Elephant",
|
||||
age: 10,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const getSpecies = (animal) => {
|
||||
return animal.species;
|
||||
};
|
||||
|
||||
console.log(getSpecies(tiger));
|
||||
|
||||
const getAge = (animal) => {
|
||||
return animal.age;
|
||||
};
|
||||
|
||||
console.log(getAge(tiger));
|
||||
|
||||
const addHabitat = (animal, habitat) => {
|
||||
animal.habitat = habitat;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(addHabitat(tiger, "Rainforest"));
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 6999b0198d18d402c36cc5fe
|
||||
title: Step 10
|
||||
challengeType: 1
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this step, you will create a function that removes a property from an object.
|
||||
|
||||
Here is an example of removing a property using `delete`:
|
||||
|
||||
```js
|
||||
const bird = {
|
||||
species: "Parrot",
|
||||
canFly: true
|
||||
};
|
||||
|
||||
const removeFlight = (pet) => {
|
||||
delete pet.canFly; // remove property using delete keyword
|
||||
return pet; // return the updated object
|
||||
};
|
||||
|
||||
console.log(removeFlight(bird));
|
||||
// { species: "Parrot" }
|
||||
```
|
||||
|
||||
In this example, the `canFly` property is removed from the `bird` object.
|
||||
|
||||
Now create a function called `removeEndangeredStatus`. The function should take one parameter named `animal`.
|
||||
|
||||
Inside the function, remove the `isEndangered` property from the `animal` object using the `delete` keyword. Return the updated `animal` object.
|
||||
|
||||
After creating the function, use `console.log` to call `removeEndangeredStatus(tiger)` so you can see the updated object in the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `removeEndangeredStatus`.
|
||||
|
||||
```js
|
||||
assert.isFunction(removeEndangeredStatus);
|
||||
```
|
||||
|
||||
The `removeEndangeredStatus` function should have a single parameter, `animal`.
|
||||
|
||||
```js
|
||||
const regex = __helpers.functionRegex('removeEndangeredStatus', ['animal']);
|
||||
assert.match(__helpers.removeJSComments(code), regex);
|
||||
```
|
||||
|
||||
The `removeEndangeredStatus` function should return the updated `animal` object.
|
||||
|
||||
```js
|
||||
const testAnimal = { species: "Cat", isEndangered: true };
|
||||
const result = removeEndangeredStatus(testAnimal);
|
||||
assert.strictEqual(result, testAnimal);
|
||||
```
|
||||
|
||||
`removeEndangeredStatus` should use the `delete` keyword to remove the `isEndangered` property.
|
||||
|
||||
```js
|
||||
assert.match(code, /delete\s+animal\.isEndangered/);
|
||||
```
|
||||
|
||||
You should log `removeEndangeredStatus(tiger)` to the console.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\s*\.\s*log\s*\(\s*removeEndangeredStatus\s*\(\s*tiger\s*\)\s*\)/);
|
||||
```
|
||||
|
||||
Calling `removeEndangeredStatus(tiger)` should remove the `isEndangered` property.
|
||||
|
||||
```js
|
||||
const updatedTiger = removeEndangeredStatus(tiger);
|
||||
|
||||
assert.notProperty(updatedTiger, "isEndangered");
|
||||
```
|
||||
|
||||
`removeEndangeredStatus` should use the function parameters and work with any object.
|
||||
|
||||
```js
|
||||
const lion = {
|
||||
species: "Lion",
|
||||
age: 4,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const updatedLion = removeEndangeredStatus(lion);
|
||||
|
||||
assert.notProperty(updatedLion, "isEndangered");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const elephant = {
|
||||
species: "Elephant",
|
||||
age: 10,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const getSpecies = (animal) => {
|
||||
return animal.species;
|
||||
};
|
||||
|
||||
console.log(getSpecies(tiger));
|
||||
|
||||
const getAge = (animal) => {
|
||||
return animal.age;
|
||||
};
|
||||
|
||||
console.log(getAge(tiger));
|
||||
|
||||
const addHabitat = (animal, habitat) => {
|
||||
animal.habitat = habitat;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(addHabitat(tiger, "Rainforest"));
|
||||
|
||||
const updateAge = (animal, newAge) => {
|
||||
animal.age = newAge;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(updateAge(elephant, 12));
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 6999b07c34c2cde21ee6e1d8
|
||||
title: Step 11
|
||||
challengeType: 1
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this step, you will create a function that checks whether an object has a specific property.
|
||||
|
||||
Here is an example of using `hasOwnProperty`:
|
||||
|
||||
```js
|
||||
const cat = {
|
||||
species: "Cat",
|
||||
color: "White"
|
||||
};
|
||||
|
||||
const dog = {
|
||||
species: "Dog",
|
||||
weight: 50
|
||||
};
|
||||
|
||||
const hasColor = (pet) => {
|
||||
return pet.hasOwnProperty("color"); // check if "color" property exists
|
||||
};
|
||||
|
||||
console.log(hasColor(cat)); // true
|
||||
console.log(hasColor(dog)); // false
|
||||
```
|
||||
|
||||
In this example, the `hasColor` function uses `hasOwnProperty` to check whether the `color` property exists on an object.
|
||||
|
||||
Now create a function called `hasHabitat`. The function should take one parameter named `animal`.
|
||||
|
||||
Use the `hasOwnProperty` method to return `true` if the `animal` object has a property called `"habitat"` and `false` otherwise.
|
||||
|
||||
After creating the function, use `console.log` to call `hasHabitat(tiger)` and `hasHabitat(elephant)` so you can see both results in the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `hasHabitat`.
|
||||
|
||||
```js
|
||||
assert.isFunction(hasHabitat);
|
||||
```
|
||||
|
||||
The `hasHabitat` function should have a single parameter, `animal`.
|
||||
|
||||
```js
|
||||
const regex = __helpers.functionRegex('hasHabitat', ['animal']);
|
||||
assert.match(__helpers.removeJSComments(code), regex);
|
||||
```
|
||||
|
||||
`hasHabitat` should use the `hasOwnProperty` method to check for the `habitat` property.
|
||||
|
||||
```js
|
||||
assert.match(code, /animal\.hasOwnProperty\s*\(\s*["']habitat["']\s*\)/);
|
||||
```
|
||||
|
||||
You should log `hasHabitat(tiger)` to the console.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\s*\.\s*log\s*\(\s*hasHabitat\s*\(\s*tiger\s*\)\s*\)/);
|
||||
```
|
||||
|
||||
You should log `hasHabitat(elephant)` to the console.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\s*\.\s*log\s*\(\s*hasHabitat\s*\(\s*elephant\s*\)\s*\)/);
|
||||
```
|
||||
|
||||
Calling `hasHabitat(tiger)` should return `true` after adding a habitat.
|
||||
|
||||
```js
|
||||
addHabitat(tiger, "Rainforest");
|
||||
assert.strictEqual(hasHabitat(tiger), true);
|
||||
```
|
||||
|
||||
Calling `hasHabitat(elephant)` should return `false` if no habitat exists.
|
||||
|
||||
```js
|
||||
const elephant = {
|
||||
species: "Elephant",
|
||||
age: 10,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
assert.strictEqual(hasHabitat(elephant), false);
|
||||
```
|
||||
|
||||
`hasHabitat` should use the function parameters and work with any object.
|
||||
|
||||
```js
|
||||
const lion = { species: "Lion", habitat: "Savanna" };
|
||||
assert.strictEqual(hasHabitat(lion), true);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const elephant = {
|
||||
species: "Elephant",
|
||||
age: 10,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const getSpecies = (animal) => {
|
||||
return animal.species;
|
||||
};
|
||||
|
||||
console.log(getSpecies(tiger));
|
||||
|
||||
const getAge = (animal) => {
|
||||
return animal.age;
|
||||
};
|
||||
|
||||
console.log(getAge(tiger));
|
||||
|
||||
const addHabitat = (animal, habitat) => {
|
||||
animal.habitat = habitat;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(addHabitat(tiger, "Rainforest"));
|
||||
|
||||
const updateAge = (animal, newAge) => {
|
||||
animal.age = newAge;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(updateAge(elephant, 12));
|
||||
|
||||
const removeEndangeredStatus = (animal) => {
|
||||
delete animal.isEndangered;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(removeEndangeredStatus(tiger));
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+222
@@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 6999b0d79ea938edcb032237
|
||||
title: Step 12
|
||||
challengeType: 1
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this final step of the Wildlife Tracker workshop, you will create a function that accesses a property of an object using bracket notation.
|
||||
|
||||
Here is an example of accessing a property using bracket notation:
|
||||
|
||||
```js
|
||||
const cat = {
|
||||
species: "Cat",
|
||||
age: 3
|
||||
};
|
||||
|
||||
const property = "species";
|
||||
|
||||
console.log(cat[property]); // "Cat"
|
||||
```
|
||||
|
||||
In this example, bracket notation allows you to access a property using a variable.
|
||||
|
||||
Now create a function called `getProperty`.
|
||||
|
||||
The function should take two parameters: `animal` and `propertyName`.
|
||||
|
||||
Return the value of the property using bracket notation.
|
||||
|
||||
After creating the function, use `console.log` to call `getProperty(tiger, "species")` and `getProperty(elephant, "age")` so you can see the returned values in the console.
|
||||
|
||||
With that, the Wildlife Tracker workshop is complete!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `getProperty`.
|
||||
|
||||
```js
|
||||
assert.isFunction(getProperty);
|
||||
```
|
||||
|
||||
The `getProperty` function should have two parameters: `animal` and `propertyName`.
|
||||
|
||||
```js
|
||||
const regex = __helpers.functionRegex('getProperty', ['animal', 'propertyName']);
|
||||
assert.match(__helpers.removeJSComments(code), regex);
|
||||
```
|
||||
|
||||
`getProperty` should use bracket notation to access the property.
|
||||
|
||||
```js
|
||||
assert.match(code, /animal\s*\[\s*propertyName\s*\]/);
|
||||
```
|
||||
|
||||
You should log `getProperty(tiger, "species")` to the console.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/console\s*\.\s*log\s*\(\s*getProperty\s*\(\s*tiger\s*,\s*["']species["']\s*\)\s*\)/
|
||||
);
|
||||
```
|
||||
|
||||
You should log `getProperty(elephant, "age")` to the console.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/console\s*\.\s*log\s*\(\s*getProperty\s*\(\s*elephant\s*,\s*["']age["']\s*\)\s*\)/
|
||||
);
|
||||
```
|
||||
|
||||
Calling `getProperty(tiger, "species")` should return `"Tiger"`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(getProperty(tiger, "species"), "Tiger");
|
||||
```
|
||||
|
||||
Calling `getProperty(elephant, "age")` should return `12`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(getProperty(elephant, "age"), 12);
|
||||
```
|
||||
|
||||
`getProperty` should use the function parameters and work with any object.
|
||||
|
||||
```js
|
||||
const lion = {
|
||||
species: "Lion",
|
||||
weight: 200
|
||||
};
|
||||
|
||||
assert.strictEqual(getProperty(lion, "weight"), 200);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const elephant = {
|
||||
species: "Elephant",
|
||||
age: 10,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const getSpecies = (animal) => {
|
||||
return animal.species;
|
||||
};
|
||||
|
||||
console.log(getSpecies(tiger));
|
||||
|
||||
const getAge = (animal) => {
|
||||
return animal.age;
|
||||
};
|
||||
|
||||
console.log(getAge(tiger));
|
||||
|
||||
const addHabitat = (animal, habitat) => {
|
||||
animal.habitat = habitat;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(addHabitat(tiger, "Rainforest"));
|
||||
|
||||
const updateAge = (animal, newAge) => {
|
||||
animal.age = newAge;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(updateAge(elephant, 12));
|
||||
|
||||
const removeEndangeredStatus = (animal) => {
|
||||
delete animal.isEndangered;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(removeEndangeredStatus(tiger));
|
||||
|
||||
const hasHabitat = (animal) => {
|
||||
return animal.hasOwnProperty("habitat");
|
||||
};
|
||||
|
||||
console.log(hasHabitat(tiger));
|
||||
console.log(hasHabitat(elephant));
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const elephant = {
|
||||
species: "Elephant",
|
||||
age: 10,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const getSpecies = (animal) => {
|
||||
return animal.species;
|
||||
};
|
||||
|
||||
console.log(getSpecies(tiger));
|
||||
|
||||
const getAge = (animal) => {
|
||||
return animal.age;
|
||||
};
|
||||
|
||||
console.log(getAge(tiger));
|
||||
|
||||
const addHabitat = (animal, habitat) => {
|
||||
animal.habitat = habitat;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(addHabitat(tiger, "Rainforest"));
|
||||
|
||||
const updateAge = (animal, newAge) => {
|
||||
animal.age = newAge;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(updateAge(elephant, 12));
|
||||
|
||||
const removeEndangeredStatus = (animal) => {
|
||||
delete animal.isEndangered;
|
||||
return animal;
|
||||
};
|
||||
|
||||
console.log(removeEndangeredStatus(tiger));
|
||||
|
||||
const hasHabitat = (animal) => {
|
||||
return animal.hasOwnProperty("habitat");
|
||||
};
|
||||
|
||||
console.log(hasHabitat(tiger));
|
||||
console.log(hasHabitat(elephant));
|
||||
|
||||
const getProperty = (animal, propertyName) => {
|
||||
return animal[propertyName];
|
||||
};
|
||||
|
||||
console.log(getProperty(tiger, "species"));
|
||||
console.log(getProperty(elephant, "age"));
|
||||
```
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 6999faf886634b72be7a819b
|
||||
title: Step 2
|
||||
challengeType: 1
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For this wildlife tracker, you will update an object with new properties.
|
||||
|
||||
Here is an example of creating an object with a property:
|
||||
|
||||
```js
|
||||
const animal = {
|
||||
name: "Lion" // property: value
|
||||
};
|
||||
```
|
||||
|
||||
Now update the `tiger` object so it includes a property called `species`.
|
||||
|
||||
Set its value to `"Tiger"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`tiger` should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(tiger);
|
||||
```
|
||||
|
||||
`tiger` should have a `species` property.
|
||||
|
||||
```js
|
||||
assert.property(tiger, "species");
|
||||
```
|
||||
|
||||
`tiger.species` should be equal to `"Tiger"`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(tiger, "species", "Tiger");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
```
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 699a00de9f564bb0effaa14d
|
||||
title: Step 7
|
||||
challengeType: 1
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this step, you will create a function to access the `age` property of an object.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```js
|
||||
const cat = {
|
||||
age: 3
|
||||
};
|
||||
|
||||
const getAnimalAge = (pet) => {
|
||||
return pet.age; // access age using dot notation
|
||||
}
|
||||
|
||||
console.log(getAnimalAge(cat)); // 3
|
||||
```
|
||||
|
||||
In this example, the function takes an object as a parameter and returns its `age` property.
|
||||
|
||||
Now create a function called `getAge`.
|
||||
|
||||
The function should take one parameter named `animal`.
|
||||
|
||||
Return the `age` property of the `animal` using dot notation.
|
||||
|
||||
After creating the function, use `console.log` to call `getAge(tiger)` so you can see the result in the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `getAge`.
|
||||
|
||||
```js
|
||||
assert.isFunction(getAge);
|
||||
```
|
||||
|
||||
The `getAge` function should have a single parameter, `animal`.
|
||||
|
||||
```js
|
||||
const regex = __helpers.functionRegex('getAge', ['animal']);
|
||||
assert.match(__helpers.removeJSComments(code), regex);
|
||||
```
|
||||
|
||||
`getAge` should access the `age` property using dot notation.
|
||||
|
||||
```js
|
||||
assert.match(code, /animal\.age/);
|
||||
```
|
||||
|
||||
You should log `getAge(tiger)` to the console.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\s*\.\s*log\s*\(\s*getAge\s*\(\s*tiger\s*\)\s*\)/);
|
||||
```
|
||||
|
||||
Calling `getAge(tiger)` should return `5`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(getAge(tiger), 5);
|
||||
```
|
||||
|
||||
`getAge` should use the function parameter and work with any object.
|
||||
|
||||
```js
|
||||
const lion = { age: 8 };
|
||||
assert.strictEqual(getAge(lion), 8);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const elephant = {
|
||||
species: "Elephant",
|
||||
age: 10,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
const getSpecies = (animal) => {
|
||||
return animal.species;
|
||||
};
|
||||
|
||||
console.log(getSpecies(tiger));
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 69ba8da6b296391d913096a0
|
||||
title: Step 5
|
||||
challengeType: 1
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now create a second object called `elephant`.
|
||||
|
||||
Add the following properties:
|
||||
|
||||
- `species` with the value `"Elephant"`
|
||||
- `age` with the value `10`
|
||||
- `isEndangered` with the value `true`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a variable named `elephant`.
|
||||
|
||||
```js
|
||||
assert.exists(elephant);
|
||||
```
|
||||
|
||||
`elephant` should have a `species` property equal to `"Elephant"`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(elephant, "species", "Elephant");
|
||||
```
|
||||
|
||||
`elephant` should have an `age` property equal to `10`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(elephant, "age", 10);
|
||||
```
|
||||
|
||||
`elephant` should have an `isEndangered` property equal to `true`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(elephant, "isEndangered", true);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const tiger = {
|
||||
species: "Tiger",
|
||||
age: 5,
|
||||
isEndangered: true
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"isUpcomingChange": false,
|
||||
"dashedName": "workshop-wildlife-tracker",
|
||||
"helpCategory": "JavaScript",
|
||||
"blockLayout": "challenge-grid",
|
||||
"challengeOrder": [
|
||||
{ "id": "6998b99a8e195cd0c1f211df", "title": "Step 1" },
|
||||
{ "id": "6999faf886634b72be7a819b", "title": "Step 2" },
|
||||
{ "id": "69999ff7f7862fdfb885ea5d", "title": "Step 3" },
|
||||
{ "id": "6999a0c1698b93d5d41156ed", "title": "Step 4" },
|
||||
{ "id": "69ba8da6b296391d913096a0", "title": "Step 5" },
|
||||
{ "id": "6999ac171928136168654774", "title": "Step 6" },
|
||||
{ "id": "699a00de9f564bb0effaa14d", "title": "Step 7" },
|
||||
{ "id": "6999ad1cdc249e185aaeedbd", "title": "Step 8" },
|
||||
{ "id": "6999adc72c02812a28c01e31", "title": "Step 9" },
|
||||
{ "id": "6999b0198d18d402c36cc5fe", "title": "Step 10" },
|
||||
{ "id": "6999b07c34c2cde21ee6e1d8", "title": "Step 11" },
|
||||
{ "id": "6999b0d79ea938edcb032237", "title": "Step 12" }
|
||||
],
|
||||
"blockLabel": "workshop",
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true
|
||||
}
|
||||
@@ -82,6 +82,7 @@
|
||||
"dashedName": "javascript-objects",
|
||||
"blocks": [
|
||||
"lecture-introduction-to-javascript-objects-and-their-properties",
|
||||
"workshop-wildlife-tracker",
|
||||
"lab-cargo-manifest-validator",
|
||||
"lecture-working-with-json",
|
||||
"lecture-working-with-optional-chaining-and-object-destructuring",
|
||||
|
||||
Reference in New Issue
Block a user