chore(curriculum): Remove files in wrong format
This commit is contained in:
Bouncey
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392ca
|
||||
title: Access Array Data with Indexes
|
||||
challengeType: 1
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/access-array-data-with-indexes'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We can access the data inside arrays using <code>indexes</code>.
|
||||
Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use <dfn>zero-based</dfn> indexing, so the first element in an array is element <code>0</code>.
|
||||
<strong>Example</strong>
|
||||
<blockquote>var array = [50,60,70];<br>array[0]; // equals 50<br>var data = array[1]; // equals 60</blockquote>
|
||||
<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0]</code>. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code> using bracket notation.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: The variable <code>myData</code> should equal the first value of <code>myArray</code>.
|
||||
testString: 'assert((function(){if(typeof myArray !== ''undefined'' && typeof myData !== ''undefined'' && myArray[0] === myData){return true;}else{return false;}})(), ''The variable <code>myData</code> should equal the first value of <code>myArray</code>.'');'
|
||||
- text: The data in variable <code>myArray</code> should be accessed using bracket notation.
|
||||
testString: 'assert((function(){if(code.match(/\s*=\s*myArray\[0\]/g)){return true;}else{return false;}})(), ''The data in variable <code>myArray</code> should be accessed using bracket notation.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = [50,60,70];
|
||||
var ourData = ourArray[0]; // equals 50
|
||||
|
||||
// Setup
|
||||
var myArray = [50,60,70];
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [50,60,70];
|
||||
var myData = myArray[0];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 56592a60ddddeae28f7aa8e1
|
||||
title: Access Multi-Dimensional Arrays With Indexes
|
||||
challengeType: 1
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/access-array-data-with-indexes'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
One way to think of a <dfn>multi-dimensional</dfn> array, is as an <em>array of arrays</em>. When you use brackets to access your array, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside.
|
||||
<strong>Example</strong>
|
||||
<blockquote>var arr = [<br> [1,2,3],<br> [4,5,6],<br> [7,8,9],<br> [[10,11,12], 13, 14]<br>];<br>arr[3]; // equals [[10,11,12], 13, 14]<br>arr[3][0]; // equals [10,11,12]<br>arr[3][0][1]; // equals 11</blockquote>
|
||||
<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0][0]</code> and even this <code>array [0] [0]</code> is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Using bracket notation select an element from <code>myArray</code> such that <code>myData</code> is equal to <code>8</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myData</code> should be equal to <code>8</code>.
|
||||
testString: 'assert(myData === 8, ''<code>myData</code> should be equal to <code>8</code>.'');'
|
||||
- text: You should be using bracket notation to read the correct value from <code>myArray</code>.
|
||||
testString: 'assert(/myArray\[2\]\[1\]/g.test(code) && !/myData\s*=\s*(?:.*[-+*/%]|\d)/g.test(code), ''You should be using bracket notation to read the correct value from <code>myArray</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];
|
||||
|
||||
// Only change code below this line.
|
||||
var myData = myArray[0][0];
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [[1,2,3],[4,5,6], [7,8,9], [[10,11,12], 13, 14]];
|
||||
var myData = myArray[2][1];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244cd
|
||||
title: Accessing Nested Arrays
|
||||
challengeType: 1
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/access-array-data-with-indexes'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
As we have seen in earlier examples, objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.
|
||||
Here is an example of how to access a nested array:
|
||||
<blockquote>var ourPets = [<br> {<br> animalType: "cat",<br> names: [<br> "Meowzer",<br> "Fluffy",<br> "Kit-Cat"<br> ]<br> },<br> {<br> animalType: "dog",<br> names: [<br> "Spot",<br> "Bowser",<br> "Frankie"<br> ]<br> }<br>];<br>ourPets[0].names[1]; // "Fluffy"<br>ourPets[1].names[0]; // "Spot"</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Retrieve the second tree from the variable <code>myPlants</code> using object dot and array bracket notation.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>secondTree</code> should equal "pine"
|
||||
testString: 'assert(secondTree === "pine", ''<code>secondTree</code> should equal "pine"'');'
|
||||
- text: Use dot and bracket notation to access <code>myPlants</code>
|
||||
testString: 'assert(/=\s*myPlants\[1\].list\[1\]/.test(code), ''Use dot and bracket notation to access <code>myPlants</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var myPlants = [
|
||||
{
|
||||
type: "flowers",
|
||||
list: [
|
||||
"rose",
|
||||
"tulip",
|
||||
"dandelion"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "trees",
|
||||
list: [
|
||||
"fir",
|
||||
"pine",
|
||||
"birch"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
var secondTree = ""; // Change this line
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myPlants = [
|
||||
{
|
||||
type: "flowers",
|
||||
list: [
|
||||
"rose",
|
||||
"tulip",
|
||||
"dandelion"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "trees",
|
||||
list: [
|
||||
"fir",
|
||||
"pine",
|
||||
"birch"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
var secondTree = myPlants[1].list[1];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244cc
|
||||
title: Accessing Nested Objects
|
||||
challengeType: 1
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/accessing-nested-objects-in-json'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The sub-properties of objects can be accessed by chaining together the dot or bracket notation.
|
||||
Here is a nested object:
|
||||
<blockquote>var ourStorage = {<br> "desk": {<br> "drawer": "stapler"<br> },<br> "cabinet": {<br> "top drawer": { <br> "folder1": "a file",<br> "folder2": "secrets"<br> },<br> "bottom drawer": "soda"<br> }<br>};<br>ourStorage.cabinet["top drawer"].folder2; // "secrets"<br>ourStorage.desk.drawer; // "stapler"</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Access the <code>myStorage</code> object and assign the contents of the <code>glove box</code> property to the <code>gloveBoxContents</code> variable. Use bracket notation for properties with a space in their name.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>gloveBoxContents</code> should equal "maps"
|
||||
testString: 'assert(gloveBoxContents === "maps", ''<code>gloveBoxContents</code> should equal "maps"'');'
|
||||
- text: Use dot and bracket notation to access <code>myStorage</code>
|
||||
testString: 'assert(/=\s*myStorage\.car\.inside\[\s*("|'')glove box\1\s*\]/g.test(code), ''Use dot and bracket notation to access <code>myStorage</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var myStorage = {
|
||||
"car": {
|
||||
"inside": {
|
||||
"glove box": "maps",
|
||||
"passenger seat": "crumbs"
|
||||
},
|
||||
"outside": {
|
||||
"trunk": "jack"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var gloveBoxContents = undefined; // Change this line
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myStorage = {
|
||||
"car":{
|
||||
"inside":{
|
||||
"glove box":"maps",
|
||||
"passenger seat":"crumbs"
|
||||
},
|
||||
"outside":{
|
||||
"trunk":"jack"
|
||||
}
|
||||
}
|
||||
};
|
||||
var gloveBoxContents = myStorage.car.inside["glove box"];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244c8
|
||||
title: Accessing Object Properties with Bracket Notation
|
||||
challengeType: 1
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-bracket-notation'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The second way to access the properties of an object is bracket notation (<code>[]</code>). If the property of the object you are trying to access has a space in its name, you will need to use bracket notation.
|
||||
However, you can still use bracket notation on object properties without spaces.
|
||||
Here is a sample of using bracket notation to read an object's property:
|
||||
<blockquote>var myObj = {<br> "Space Name": "Kirk",<br> "More Space": "Spock",<br> "NoSpace": "USS Enterprise"<br>};<br>myObj["Space Name"]; // Kirk<br>myObj['More Space']; // Spock<br>myObj["NoSpace"]; // USS Enterprise</blockquote>
|
||||
Note that property names with spaces in them must be in quotes (single or double).
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Read the values of the properties <code>"an entree"</code> and <code>"the drink"</code> of <code>testObj</code> using bracket notation and assign them to <code>entreeValue</code> and <code>drinkValue</code> respectively.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>entreeValue</code> should be a string
|
||||
testString: 'assert(typeof entreeValue === ''string'' , ''<code>entreeValue</code> should be a string'');'
|
||||
- text: The value of <code>entreeValue</code> should be <code>"hamburger"</code>
|
||||
testString: 'assert(entreeValue === ''hamburger'' , ''The value of <code>entreeValue</code> should be <code>"hamburger"</code>'');'
|
||||
- text: <code>drinkValue</code> should be a string
|
||||
testString: 'assert(typeof drinkValue === ''string'' , ''<code>drinkValue</code> should be a string'');'
|
||||
- text: The value of <code>drinkValue</code> should be <code>"water"</code>
|
||||
testString: 'assert(drinkValue === ''water'' , ''The value of <code>drinkValue</code> should be <code>"water"</code>'');'
|
||||
- text: You should use bracket notation twice
|
||||
testString: 'assert(code.match(/testObj\s*?\[(''|")[^''"]+\1\]/g).length > 1, ''You should use bracket notation twice'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var testObj = {
|
||||
"an entree": "hamburger",
|
||||
"my side": "veggies",
|
||||
"the drink": "water"
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
var entreeValue = testObj; // Change this line
|
||||
var drinkValue = testObj; // Change this line
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var testObj = {
|
||||
"an entree": "hamburger",
|
||||
"my side": "veggies",
|
||||
"the drink": "water"
|
||||
};
|
||||
var entreeValue = testObj["an entree"];
|
||||
var drinkValue = testObj['the drink'];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244c7
|
||||
title: Accessing Object Properties with Dot Notation
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
There are two ways to access the properties of an object: dot notation (<code>.</code>) and bracket notation (<code>[]</code>), similar to an array.
|
||||
Dot notation is what you use when you know the name of the property you're trying to access ahead of time.
|
||||
Here is a sample of using dot notation (<code>.</code>) to read an object's property:
|
||||
<blockquote>var myObj = {<br> prop1: "val1",<br> prop2: "val2"<br>};<br>var prop1val = myObj.prop1; // val1<br>var prop2val = myObj.prop2; // val2</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Read in the property values of <code>testObj</code> using dot notation. Set the variable <code>hatValue</code> equal to the object's property <code>hat</code> and set the variable <code>shirtValue</code> equal to the object's property <code>shirt</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>hatValue</code> should be a string
|
||||
testString: 'assert(typeof hatValue === ''string'' , ''<code>hatValue</code> should be a string'');'
|
||||
- text: The value of <code>hatValue</code> should be <code>"ballcap"</code>
|
||||
testString: 'assert(hatValue === ''ballcap'' , ''The value of <code>hatValue</code> should be <code>"ballcap"</code>'');'
|
||||
- text: <code>shirtValue</code> should be a string
|
||||
testString: 'assert(typeof shirtValue === ''string'' , ''<code>shirtValue</code> should be a string'');'
|
||||
- text: The value of <code>shirtValue</code> should be <code>"jersey"</code>
|
||||
testString: 'assert(shirtValue === ''jersey'' , ''The value of <code>shirtValue</code> should be <code>"jersey"</code>'');'
|
||||
- text: You should use dot notation twice
|
||||
testString: 'assert(code.match(/testObj\.\w+/g).length > 1, ''You should use dot notation twice'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var testObj = {
|
||||
"hat": "ballcap",
|
||||
"shirt": "jersey",
|
||||
"shoes": "cleats"
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
var hatValue = testObj; // Change this line
|
||||
var shirtValue = testObj; // Change this line
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var testObj = {
|
||||
"hat": "ballcap",
|
||||
"shirt": "jersey",
|
||||
"shoes": "cleats"
|
||||
};
|
||||
|
||||
var hatValue = testObj.hat;
|
||||
var shirtValue = testObj.shirt;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244c9
|
||||
title: Accessing Object Properties with Variables
|
||||
challengeType: 1
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-variables'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Another use of bracket notation on objects is to access a property which is stored as the value of a variable. This can be very useful for iterating through an object's properties or when accessing a lookup table.
|
||||
Here is an example of using a variable to access a property:
|
||||
<blockquote>var dogs = {<br> Fido: "Mutt",
|
||||
Hunter: "Doberman",
|
||||
Snoopie: "Beagle"<br>};<br>var myDog = "Hunter";<br>var myBreed = dogs[myDog];<br>console.log(myBreed); // "Doberman"</blockquote>
|
||||
Another way you can use this concept is when the property's name is collected dynamically during the program execution, as follows:
|
||||
<blockquote>var someObj = {<br> propName: "John"<br>};<br>function propPrefix(str) {<br> var s = "prop";<br> return s + str;<br>}<br>var someProp = propPrefix("Name"); // someProp now holds the value 'propName'<br>console.log(someObj[someProp]); // "John"</blockquote>
|
||||
Note that we do <em>not</em> use quotes around the variable name when using it to access the property because we are using the <em>value</em> of the variable, not the <em>name</em>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use the <code>playerNumber</code> variable to look up player <code>16</code> in <code>testObj</code> using bracket notation. Then assign that name to the <code>player</code> variable.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>playerNumber</code> should be a number
|
||||
testString: 'assert(typeof playerNumber === ''number'', ''<code>playerNumber</code> should be a number'');'
|
||||
- text: The variable <code>player</code> should be a string
|
||||
testString: 'assert(typeof player === ''string'', ''The variable <code>player</code> should be a string'');'
|
||||
- text: The value of <code>player</code> should be "Montana"
|
||||
testString: 'assert(player === ''Montana'', ''The value of <code>player</code> should be "Montana"'');'
|
||||
- text: You should use bracket notation to access <code>testObj</code>
|
||||
testString: 'assert(/testObj\s*?\[.*?\]/.test(code),''You should use bracket notation to access <code>testObj</code>'');'
|
||||
- text: You should not assign the value <code>Montana</code> to the variable <code>player</code> directly.
|
||||
testString: 'assert(!code.match(/player\s*=\s*"|\''\s*Montana\s*"|\''\s*;/gi),''You should not assign the value <code>Montana</code> to the variable <code>player</code> directly.'');'
|
||||
- text: You should be using the variable <code>playerNumber</code> in your bracket notation
|
||||
testString: 'assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code),''You should be using the variable <code>playerNumber</code> in your bracket notation'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var testObj = {
|
||||
12: "Namath",
|
||||
16: "Montana",
|
||||
19: "Unitas"
|
||||
};
|
||||
|
||||
// Only change code below this line;
|
||||
|
||||
var playerNumber; // Change this Line
|
||||
var player = testObj; // Change this Line
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var testObj = {
|
||||
12: "Namath",
|
||||
16: "Montana",
|
||||
19: "Unitas"
|
||||
};
|
||||
var playerNumber = 16;
|
||||
var player = testObj[playerNumber];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392d2
|
||||
title: Add New Properties to a JavaScript Object
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can add new properties to existing JavaScript objects the same way you would modify them.
|
||||
Here's how we would add a <code>"bark"</code> property to <code>ourDog</code>:
|
||||
<code>ourDog.bark = "bow-wow";</code>
|
||||
or
|
||||
<code>ourDog["bark"] = "bow-wow";</code>
|
||||
Now when we evaluate <code>ourDog.bark</code>, we'll get his bark, "bow-wow".
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add a <code>"bark"</code> property to <code>myDog</code> and set it to a dog sound, such as "woof". You may use either dot or bracket notation.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Add the property <code>"bark"</code> to <code>myDog</code>.
|
||||
testString: 'assert(myDog.bark !== undefined, ''Add the property <code>"bark"</code> to <code>myDog</code>.'');'
|
||||
- text: Do not add <code>"bark"</code> to the setup section
|
||||
testString: 'assert(!/bark[^\n]:/.test(code), ''Do not add <code>"bark"</code> to the setup section'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourDog = {
|
||||
"name": "Camper",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["everything!"]
|
||||
};
|
||||
|
||||
ourDog.bark = "bow-wow";
|
||||
|
||||
// Setup
|
||||
var myDog = {
|
||||
"name": "Happy Coder",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["freeCodeCamp Campers"]
|
||||
};
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myDog = {
|
||||
"name": "Happy Coder",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["freeCodeCamp Campers"]
|
||||
};
|
||||
myDog.bark = "Woof Woof";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb3bdef
|
||||
title: Add Two Numbers with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Number</code> is a data type in JavaScript which represents numeric data.
|
||||
Now let's try to add two numbers using JavaScript.
|
||||
JavaScript uses the <code>+</code> symbol as addition operation when placed between two numbers.
|
||||
<strong>Example</strong>
|
||||
<blockquote>myVar = 5 + 10; // assigned 15</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the <code>0</code> so that sum will equal <code>20</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>sum</code> should equal <code>20</code>
|
||||
testString: 'assert(sum === 20, ''<code>sum</code> should equal <code>20</code>'');'
|
||||
- text: Use the <code>+</code> operator
|
||||
testString: 'assert(/\+/.test(code), ''Use the <code>+</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var sum = 10 + 0;
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var sum = 10 + 10;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244de
|
||||
title: Adding a Default Option in Switch Statements
|
||||
challengeType: 1
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/adding-a-default-option-in-switch-statements'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In a <code>switch</code> statement you may not be able to specify all possible values as <code>case</code> statements. Instead, you can add the <code>default</code> statement which will be executed if no matching <code>case</code> statements are found. Think of it like the final <code>else</code> statement in an <code>if/else</code> chain.
|
||||
A <code>default</code> statement should be the last case.
|
||||
<blockquote>switch (num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> default:<br> defaultStatement;<br> break;<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Write a switch statement to set <code>answer</code> for the following conditions:<br><code>"a"</code> - "apple"<br><code>"b"</code> - "bird"<br><code>"c"</code> - "cat"<br><code>default</code> - "stuff"
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>switchOfStuff("a")</code> should have a value of "apple"
|
||||
testString: 'assert(switchOfStuff("a") === "apple", ''<code>switchOfStuff("a")</code> should have a value of "apple"'');'
|
||||
- text: <code>switchOfStuff("b")</code> should have a value of "bird"
|
||||
testString: 'assert(switchOfStuff("b") === "bird", ''<code>switchOfStuff("b")</code> should have a value of "bird"'');'
|
||||
- text: <code>switchOfStuff("c")</code> should have a value of "cat"
|
||||
testString: 'assert(switchOfStuff("c") === "cat", ''<code>switchOfStuff("c")</code> should have a value of "cat"'');'
|
||||
- text: <code>switchOfStuff("d")</code> should have a value of "stuff"
|
||||
testString: 'assert(switchOfStuff("d") === "stuff", ''<code>switchOfStuff("d")</code> should have a value of "stuff"'');'
|
||||
- text: <code>switchOfStuff(4)</code> should have a value of "stuff"
|
||||
testString: 'assert(switchOfStuff(4) === "stuff", ''<code>switchOfStuff(4)</code> should have a value of "stuff"'');'
|
||||
- text: You should not use any <code>if</code> or <code>else</code> statements
|
||||
testString: 'assert(!/else/g.test(code) || !/if/g.test(code), ''You should not use any <code>if</code> or <code>else</code> statements'');'
|
||||
- text: You should use a <code>default</code> statement
|
||||
testString: 'assert(switchOfStuff("string-to-trigger-default-case") === "stuff", ''You should use a <code>default</code> statement'');'
|
||||
- text: You should have at least 3 <code>break</code> statements
|
||||
testString: 'assert(code.match(/break/g).length > 2, ''You should have at least 3 <code>break</code> statements'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function switchOfStuff(val) {
|
||||
var answer = "";
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
|
||||
// Only change code above this line
|
||||
return answer;
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
switchOfStuff(1);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function switchOfStuff(val) {
|
||||
var answer = "";
|
||||
|
||||
switch(val) {
|
||||
case "a":
|
||||
answer = "apple";
|
||||
break;
|
||||
case "b":
|
||||
answer = "bird";
|
||||
break;
|
||||
case "c":
|
||||
answer = "cat";
|
||||
break;
|
||||
default:
|
||||
answer = "stuff";
|
||||
}
|
||||
return answer;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244ed
|
||||
title: Appending Variables to Strings
|
||||
challengeType: 1
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/appending-variables-to-strings'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Just as we can build a string over multiple lines out of string <dfn>literals</dfn>, we can also append variables to a string using the plus equals (<code>+=</code>) operator.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Set <code>someAdjective</code> and append it to <code>myStr</code> using the <code>+=</code> operator.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>someAdjective</code> should be set to a string at least 3 characters long
|
||||
testString: 'assert(typeof someAdjective !== ''undefined'' && someAdjective.length > 2, ''<code>someAdjective</code> should be set to a string at least 3 characters long'');'
|
||||
- text: Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator
|
||||
testString: 'assert(code.match(/myStr\s*\+=\s*someAdjective\s*/).length > 0, ''Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var anAdjective = "awesome!";
|
||||
var ourStr = "freeCodeCamp is ";
|
||||
ourStr += anAdjective;
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
var someAdjective;
|
||||
var myStr = "Learning to code is ";
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var anAdjective = "awesome!";
|
||||
var ourStr = "freeCodeCamp is ";
|
||||
ourStr += anAdjective;
|
||||
|
||||
var someAdjective = "neat";
|
||||
var myStr = "Learning to code is ";
|
||||
myStr += someAdjective;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244c3
|
||||
title: Assignment with a Returned Value
|
||||
challengeType: 1
|
||||
guideUrl: 'https://guide.freecodecamp.org/certificates/assignment-with-a-returned-value'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
If you'll recall from our discussion of <a href="javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Storing Values with the Assignment Operator</a>, everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable.
|
||||
Assume we have pre-defined a function <code>sum</code> which adds two numbers together, then:
|
||||
<code>ourSum = sum(5, 12);</code>
|
||||
will call <code>sum</code> function, which returns a value of <code>17</code> and assigns it to <code>ourSum</code> variable.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Call the <code>processArg</code> function with an argument of <code>7</code> and assign its return value to the variable <code>processed</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>processed</code> should have a value of <code>2</code>
|
||||
testString: 'assert(processed === 2, ''<code>processed</code> should have a value of <code>2</code>'');'
|
||||
- text: You should assign <code>processArg</code> to <code>processed</code>
|
||||
testString: 'assert(/processed\s*=\s*processArg\(\s*7\s*\)\s*;/.test(code), ''You should assign <code>processArg</code> to <code>processed</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var changed = 0;
|
||||
|
||||
function change(num) {
|
||||
return (num + 5) / 3;
|
||||
}
|
||||
|
||||
changed = change(10);
|
||||
|
||||
// Setup
|
||||
var processed = 0;
|
||||
|
||||
function processArg(num) {
|
||||
return (num + 3) / 5;
|
||||
}
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var processed = 0;
|
||||
|
||||
function processArg(num) {
|
||||
return (num + 3) / 5;
|
||||
}
|
||||
|
||||
processed = processArg(7);
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392d0
|
||||
title: Build JavaScript Objects
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You may have heard the term <code>object</code> before.
|
||||
Objects are similar to <code>arrays</code>, except that instead of using indexes to access and modify their data, you access the data in objects through what are called <code>properties</code>.
|
||||
Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.
|
||||
Here's a sample cat object:
|
||||
<blockquote>var cat = {<br> "name": "Whiskers",<br> "legs": 4,<br> "tails": 1,<br> "enemies": ["Water", "Dogs"]<br>};</blockquote>
|
||||
In this example, all the properties are stored as strings, such as - <code>"name"</code>, <code>"legs"</code>, and <code>"tails"</code>. However, you can also use numbers as properties. You can even omit the quotes for single-word string properties, as follows:
|
||||
<blockquote>var anotherObject = {<br> make: "Ford",<br> 5: "five",<br> "model": "focus"<br>};</blockquote>
|
||||
However, if your object has any non-string properties, JavaScript will automatically typecast them as strings.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Make an object that represents a dog called <code>myDog</code> which contains the properties <code>"name"</code> (a string), <code>"legs"</code>, <code>"tails"</code> and <code>"friends"</code>.
|
||||
You can set these object properties to whatever values you want, as long <code>"name"</code> is a string, <code>"legs"</code> and <code>"tails"</code> are numbers, and <code>"friends"</code> is an array.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.
|
||||
testString: 'assert((function(z){if(z.hasOwnProperty("name") && z.name !== undefined && typeof z.name === "string"){return true;}else{return false;}})(myDog), ''<code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.'');'
|
||||
- text: <code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.
|
||||
testString: 'assert((function(z){if(z.hasOwnProperty("legs") && z.legs !== undefined && typeof z.legs === "number"){return true;}else{return false;}})(myDog), ''<code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.'');'
|
||||
- text: <code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.
|
||||
testString: 'assert((function(z){if(z.hasOwnProperty("tails") && z.tails !== undefined && typeof z.tails === "number"){return true;}else{return false;}})(myDog), ''<code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.'');'
|
||||
- text: <code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.
|
||||
testString: 'assert((function(z){if(z.hasOwnProperty("friends") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog), ''<code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.'');'
|
||||
- text: <code>myDog</code> should only contain all the given properties.
|
||||
testString: 'assert((function(z){return Object.keys(z).length === 4;})(myDog), ''<code>myDog</code> should only contain all the given properties.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourDog = {
|
||||
"name": "Camper",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["everything!"]
|
||||
};
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
var myDog = {
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myDog = {
|
||||
"name": "Camper",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["everything!"]
|
||||
};
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244dc
|
||||
title: Chaining If Else Statements
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>if/else</code> statements can be chained together for complex logic. Here is <dfn>pseudocode</dfn> of multiple chained <code>if</code> / <code>else if</code> statements:
|
||||
<blockquote>if (<em>condition1</em>) {<br> <em>statement1</em><br>} else if (<em>condition2</em>) {<br> <em>statement2</em><br>} else if (<em>condition3</em>) {<br> <em>statement3</em><br>. . .<br>} else {<br> <em>statementN</em><br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Write chained <code>if</code>/<code>else if</code> statements to fulfill the following conditions:
|
||||
<code>num < 5</code> - return "Tiny"<br><code>num < 10</code> - return "Small"<br><code>num < 15</code> - return "Medium"<br><code>num < 20</code> - return "Large"<br><code>num >= 20</code> - return "Huge"
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should have at least four <code>else</code> statements
|
||||
testString: 'assert(code.match(/else/g).length > 3, ''You should have at least four <code>else</code> statements'');'
|
||||
- text: You should have at least four <code>if</code> statements
|
||||
testString: 'assert(code.match(/if/g).length > 3, ''You should have at least four <code>if</code> statements'');'
|
||||
- text: You should have at least one <code>return</code> statement
|
||||
testString: 'assert(code.match(/return/g).length >= 1, ''You should have at least one <code>return</code> statement'');'
|
||||
- text: <code>testSize(0)</code> should return "Tiny"
|
||||
testString: 'assert(testSize(0) === "Tiny", ''<code>testSize(0)</code> should return "Tiny"'');'
|
||||
- text: <code>testSize(4)</code> should return "Tiny"
|
||||
testString: 'assert(testSize(4) === "Tiny", ''<code>testSize(4)</code> should return "Tiny"'');'
|
||||
- text: <code>testSize(5)</code> should return "Small"
|
||||
testString: 'assert(testSize(5) === "Small", ''<code>testSize(5)</code> should return "Small"'');'
|
||||
- text: <code>testSize(8)</code> should return "Small"
|
||||
testString: 'assert(testSize(8) === "Small", ''<code>testSize(8)</code> should return "Small"'');'
|
||||
- text: <code>testSize(10)</code> should return "Medium"
|
||||
testString: 'assert(testSize(10) === "Medium", ''<code>testSize(10)</code> should return "Medium"'');'
|
||||
- text: <code>testSize(14)</code> should return "Medium"
|
||||
testString: 'assert(testSize(14) === "Medium", ''<code>testSize(14)</code> should return "Medium"'');'
|
||||
- text: <code>testSize(15)</code> should return "Large"
|
||||
testString: 'assert(testSize(15) === "Large", ''<code>testSize(15)</code> should return "Large"'');'
|
||||
- text: <code>testSize(17)</code> should return "Large"
|
||||
testString: 'assert(testSize(17) === "Large", ''<code>testSize(17)</code> should return "Large"'');'
|
||||
- text: <code>testSize(20)</code> should return "Huge"
|
||||
testString: 'assert(testSize(20) === "Huge", ''<code>testSize(20)</code> should return "Huge"'');'
|
||||
- text: <code>testSize(25)</code> should return "Huge"
|
||||
testString: 'assert(testSize(25) === "Huge", ''<code>testSize(25)</code> should return "Huge"'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function testSize(num) {
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
return "Change Me";
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testSize(7);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testSize(num) {
|
||||
if (num < 5) {
|
||||
return "Tiny";
|
||||
} else if (num < 10) {
|
||||
return "Small";
|
||||
} else if (num < 15) {
|
||||
return "Medium";
|
||||
} else if (num < 20) {
|
||||
return "Large";
|
||||
} else {
|
||||
return "Huge";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: bd7123c9c441eddfaeb4bdef
|
||||
title: Comment Your JavaScript Code
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.
|
||||
There are two ways to write comments in JavaScript:
|
||||
Using <code>//</code> will tell JavaScript to ignore the remainder of the text on the current line:
|
||||
<blockquote>// This is an in-line comment.</blockquote>
|
||||
You can make a multi-line comment beginning with <code>/*</code> and ending with <code>*/</code>:
|
||||
<blockquote>/* This is a<br>multi-line comment */</blockquote>
|
||||
<strong>Best Practice</strong><br>As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code—both for others <em>and</em> for your future self.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Try creating one of each type of comment.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Create a <code>//</code> style comment that contains at least five letters.
|
||||
testString: 'assert(code.match(/(\/\/)...../g), ''Create a <code>//</code> style comment that contains at least five letters.'');'
|
||||
- text: Create a <code>/* */</code> style comment that contains at least five letters.
|
||||
testString: 'assert(code.match(/(\/\*)([^\/]{5,})(?=\*\/)/gm), ''Create a <code>/* */</code> style comment that contains at least five letters.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
// Fake Comment
|
||||
/* Another Comment */
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d0
|
||||
title: Comparison with the Equality Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
There are many <dfn>Comparison Operators</dfn> in JavaScript. All of these operators return a boolean <code>true</code> or <code>false</code> value.
|
||||
The most basic operator is the equality operator <code>==</code>. The equality operator compares two values and returns <code>true</code> if they're equivalent or <code>false</code> if they are not. Note that equality is different from assignment (<code>=</code>), which assigns the value at the right of the operator to a variable in the left.
|
||||
<blockquote>function equalityTest(myVal) {<br> if (myVal == 10) {<br> return "Equal";<br> }<br> return "Not Equal";<br>}</blockquote>
|
||||
If <code>myVal</code> is equal to <code>10</code>, the equality operator returns <code>true</code>, so the code in the curly braces will execute, and the function will return <code>"Equal"</code>. Otherwise, the function will return <code>"Not Equal"</code>.
|
||||
In order for JavaScript to compare two different <code>data types</code> (for example, <code>numbers</code> and <code>strings</code>), it must convert one type to another. This is known as "Type Coercion". Once it does, however, it can compare terms as follows:
|
||||
<blockquote>1 == 1 // true<br>1 == 2 // false<br>1 == '1' // true<br>"3" == 3 // true</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>equality operator</code> to the indicated line so that the function will return "Equal" when <code>val</code> is equivalent to <code>12</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>testEqual(10)</code> should return "Not Equal"
|
||||
testString: 'assert(testEqual(10) === "Not Equal", ''<code>testEqual(10)</code> should return "Not Equal"'');'
|
||||
- text: <code>testEqual(12)</code> should return "Equal"
|
||||
testString: 'assert(testEqual(12) === "Equal", ''<code>testEqual(12)</code> should return "Equal"'');'
|
||||
- text: <code>testEqual("12")</code> should return "Equal"
|
||||
testString: 'assert(testEqual("12") === "Equal", ''<code>testEqual("12")</code> should return "Equal"'');'
|
||||
- text: You should use the <code>==</code> operator
|
||||
testString: 'assert(code.match(/==/g) && !code.match(/===/g), ''You should use the <code>==</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
function testEqual(val) {
|
||||
if (val) { // Change this line
|
||||
return "Equal";
|
||||
}
|
||||
return "Not Equal";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testEqual(10);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testEqual(val) {
|
||||
if (val == 12) {
|
||||
return "Equal";
|
||||
}
|
||||
return "Not Equal";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d4
|
||||
title: Comparison with the Greater Than Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The greater than operator (<code>></code>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.
|
||||
Like the equality operator, greater than operator will convert data types of values while comparing.
|
||||
<strong>Examples</strong>
|
||||
<blockquote> 5 > 3 // true<br> 7 > '3' // true<br> 2 > 3 // false<br>'1' > 9 // false</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>greater than</code> operator to the indicated lines so that the return statements make sense.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>testGreaterThan(0)</code> should return "10 or Under"
|
||||
testString: 'assert(testGreaterThan(0) === "10 or Under", ''<code>testGreaterThan(0)</code> should return "10 or Under"'');'
|
||||
- text: <code>testGreaterThan(10)</code> should return "10 or Under"
|
||||
testString: 'assert(testGreaterThan(10) === "10 or Under", ''<code>testGreaterThan(10)</code> should return "10 or Under"'');'
|
||||
- text: <code>testGreaterThan(11)</code> should return "Over 10"
|
||||
testString: 'assert(testGreaterThan(11) === "Over 10", ''<code>testGreaterThan(11)</code> should return "Over 10"'');'
|
||||
- text: <code>testGreaterThan(99)</code> should return "Over 10"
|
||||
testString: 'assert(testGreaterThan(99) === "Over 10", ''<code>testGreaterThan(99)</code> should return "Over 10"'');'
|
||||
- text: <code>testGreaterThan(100)</code> should return "Over 10"
|
||||
testString: 'assert(testGreaterThan(100) === "Over 10", ''<code>testGreaterThan(100)</code> should return "Over 10"'');'
|
||||
- text: <code>testGreaterThan(101)</code> should return "Over 100"
|
||||
testString: 'assert(testGreaterThan(101) === "Over 100", ''<code>testGreaterThan(101)</code> should return "Over 100"'');'
|
||||
- text: <code>testGreaterThan(150)</code> should return "Over 100"
|
||||
testString: 'assert(testGreaterThan(150) === "Over 100", ''<code>testGreaterThan(150)</code> should return "Over 100"'');'
|
||||
- text: You should use the <code>></code> operator at least twice
|
||||
testString: 'assert(code.match(/val\s*>\s*(''|")*\d+(''|")*/g).length > 1, ''You should use the <code>></code> operator at least twice'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function testGreaterThan(val) {
|
||||
if (val) { // Change this line
|
||||
return "Over 100";
|
||||
}
|
||||
|
||||
if (val) { // Change this line
|
||||
return "Over 10";
|
||||
}
|
||||
|
||||
return "10 or Under";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testGreaterThan(10);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testGreaterThan(val) {
|
||||
if (val > 100) { // Change this line
|
||||
return "Over 100";
|
||||
}
|
||||
if (val > 10) { // Change this line
|
||||
return "Over 10";
|
||||
}
|
||||
return "10 or Under";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d5
|
||||
title: Comparison with the Greater Than Or Equal To Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>greater than or equal to</code> operator (<code>>=</code>) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.
|
||||
Like the equality operator, <code>greater than or equal to</code> operator will convert data types while comparing.
|
||||
<strong>Examples</strong>
|
||||
<blockquote> 6 >= 6 // true<br> 7 >= '3' // true<br> 2 >= 3 // false<br>'7' >= 9 // false</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>greater than or equal to</code> operator to the indicated lines so that the return statements make sense.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>testGreaterOrEqual(0)</code> should return "Less than 10"
|
||||
testString: 'assert(testGreaterOrEqual(0) === "Less than 10", ''<code>testGreaterOrEqual(0)</code> should return "Less than 10"'');'
|
||||
- text: <code>testGreaterOrEqual(9)</code> should return "Less than 10"
|
||||
testString: 'assert(testGreaterOrEqual(9) === "Less than 10", ''<code>testGreaterOrEqual(9)</code> should return "Less than 10"'');'
|
||||
- text: <code>testGreaterOrEqual(10)</code> should return "10 or Over"
|
||||
testString: 'assert(testGreaterOrEqual(10) === "10 or Over", ''<code>testGreaterOrEqual(10)</code> should return "10 or Over"'');'
|
||||
- text: <code>testGreaterOrEqual(11)</code> should return "10 or Over"
|
||||
testString: 'assert(testGreaterOrEqual(11) === "10 or Over", ''<code>testGreaterOrEqual(11)</code> should return "10 or Over"'');'
|
||||
- text: <code>testGreaterOrEqual(19)</code> should return "10 or Over"
|
||||
testString: 'assert(testGreaterOrEqual(19) === "10 or Over", ''<code>testGreaterOrEqual(19)</code> should return "10 or Over"'');'
|
||||
- text: <code>testGreaterOrEqual(100)</code> should return "20 or Over"
|
||||
testString: 'assert(testGreaterOrEqual(100) === "20 or Over", ''<code>testGreaterOrEqual(100)</code> should return "20 or Over"'');'
|
||||
- text: <code>testGreaterOrEqual(21)</code> should return "20 or Over"
|
||||
testString: 'assert(testGreaterOrEqual(21) === "20 or Over", ''<code>testGreaterOrEqual(21)</code> should return "20 or Over"'');'
|
||||
- text: You should use the <code>>=</code> operator at least twice
|
||||
testString: 'assert(code.match(/val\s*>=\s*(''|")*\d+(''|")*/g).length > 1, ''You should use the <code>>=</code> operator at least twice'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function testGreaterOrEqual(val) {
|
||||
if (val) { // Change this line
|
||||
return "20 or Over";
|
||||
}
|
||||
|
||||
if (val) { // Change this line
|
||||
return "10 or Over";
|
||||
}
|
||||
|
||||
return "Less than 10";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testGreaterOrEqual(10);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testGreaterOrEqual(val) {
|
||||
if (val >= 20) { // Change this line
|
||||
return "20 or Over";
|
||||
}
|
||||
|
||||
if (val >= 10) { // Change this line
|
||||
return "10 or Over";
|
||||
}
|
||||
|
||||
return "Less than 10";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d2
|
||||
title: Comparison with the Inequality Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The inequality operator (<code>!=</code>) is the opposite of the equality operator. It means "Not Equal" and returns <code>false</code> where equality would return <code>true</code> and <em>vice versa</em>. Like the equality operator, the inequality operator will convert data types of values while comparing.
|
||||
<strong>Examples</strong>
|
||||
<blockquote>1 != 2 // true<br>1 != "1" // false<br>1 != '1' // false<br>1 != true // false<br>0 != false // false</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the inequality operator <code>!=</code> in the <code>if</code> statement so that the function will return "Not Equal" when <code>val</code> is not equivalent to <code>99</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>testNotEqual(99)</code> should return "Equal"
|
||||
testString: 'assert(testNotEqual(99) === "Equal", ''<code>testNotEqual(99)</code> should return "Equal"'');'
|
||||
- text: <code>testNotEqual("99")</code> should return "Equal"
|
||||
testString: 'assert(testNotEqual("99") === "Equal", ''<code>testNotEqual("99")</code> should return "Equal"'');'
|
||||
- text: <code>testNotEqual(12)</code> should return "Not Equal"
|
||||
testString: 'assert(testNotEqual(12) === "Not Equal", ''<code>testNotEqual(12)</code> should return "Not Equal"'');'
|
||||
- text: <code>testNotEqual("12")</code> should return "Not Equal"
|
||||
testString: 'assert(testNotEqual("12") === "Not Equal", ''<code>testNotEqual("12")</code> should return "Not Equal"'');'
|
||||
- text: <code>testNotEqual("bob")</code> should return "Not Equal"
|
||||
testString: 'assert(testNotEqual("bob") === "Not Equal", ''<code>testNotEqual("bob")</code> should return "Not Equal"'');'
|
||||
- text: You should use the <code>!=</code> operator
|
||||
testString: 'assert(code.match(/(?!!==)!=/), ''You should use the <code>!=</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
function testNotEqual(val) {
|
||||
if (val) { // Change this line
|
||||
return "Not Equal";
|
||||
}
|
||||
return "Equal";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testNotEqual(10);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testNotEqual(val) {
|
||||
if (val != 99) {
|
||||
return "Not Equal";
|
||||
}
|
||||
return "Equal";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d6
|
||||
title: Comparison with the Less Than Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <dfn>less than</dfn> operator (<code><</code>) compares the values of two numbers. If the number to the left is less than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>. Like the equality operator, <dfn>less than</dfn> operator converts data types while comparing.
|
||||
<strong>Examples</strong>
|
||||
<blockquote>2 < 5 // true<br>'3' < 7 // true<br>5 < 5 // false<br>3 < 2 // false<br>'8' < 4 // false</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>less than</code> operator to the indicated lines so that the return statements make sense.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>testLessThan(0)</code> should return "Under 25"
|
||||
testString: 'assert(testLessThan(0) === "Under 25", ''<code>testLessThan(0)</code> should return "Under 25"'');'
|
||||
- text: <code>testLessThan(24)</code> should return "Under 25"
|
||||
testString: 'assert(testLessThan(24) === "Under 25", ''<code>testLessThan(24)</code> should return "Under 25"'');'
|
||||
- text: <code>testLessThan(25)</code> should return "Under 55"
|
||||
testString: 'assert(testLessThan(25) === "Under 55", ''<code>testLessThan(25)</code> should return "Under 55"'');'
|
||||
- text: <code>testLessThan(54)</code> should return "Under 55"
|
||||
testString: 'assert(testLessThan(54) === "Under 55", ''<code>testLessThan(54)</code> should return "Under 55"'');'
|
||||
- text: <code>testLessThan(55)</code> should return "55 or Over"
|
||||
testString: 'assert(testLessThan(55) === "55 or Over", ''<code>testLessThan(55)</code> should return "55 or Over"'');'
|
||||
- text: <code>testLessThan(99)</code> should return "55 or Over"
|
||||
testString: 'assert(testLessThan(99) === "55 or Over", ''<code>testLessThan(99)</code> should return "55 or Over"'');'
|
||||
- text: You should use the <code><</code> operator at least twice
|
||||
testString: 'assert(code.match(/val\s*<\s*(''|")*\d+(''|")*/g).length > 1, ''You should use the <code><</code> operator at least twice'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function testLessThan(val) {
|
||||
if (val) { // Change this line
|
||||
return "Under 25";
|
||||
}
|
||||
|
||||
if (val) { // Change this line
|
||||
return "Under 55";
|
||||
}
|
||||
|
||||
return "55 or Over";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testLessThan(10);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testLessThan(val) {
|
||||
if (val < 25) { // Change this line
|
||||
return "Under 25";
|
||||
}
|
||||
|
||||
if (val < 55) { // Change this line
|
||||
return "Under 55";
|
||||
}
|
||||
|
||||
return "55 or Over";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d7
|
||||
title: Comparison with the Less Than Or Equal To Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>less than or equal to</code> operator (<code><=</code>) compares the values of two numbers. If the number to the left is less than or equal to the number to the right, it returns <code>true</code>. If the number on the left is greater than the number on the right, it returns <code>false</code>. Like the equality operator, <code>less than or equal to</code> converts data types.
|
||||
<strong>Examples</strong>
|
||||
<blockquote>4 <= 5 // true<br>'7' <= 7 // true<br>5 <= 5 // true<br>3 <= 2 // false<br>'8' <= 4 // false</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>less than or equal to</code> operator to the indicated lines so that the return statements make sense.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>testLessOrEqual(0)</code> should return "Smaller Than or Equal to 12"
|
||||
testString: 'assert(testLessOrEqual(0) === "Smaller Than or Equal to 12", ''<code>testLessOrEqual(0)</code> should return "Smaller Than or Equal to 12"'');'
|
||||
- text: <code>testLessOrEqual(11)</code> should return "Smaller Than or Equal to 12"
|
||||
testString: 'assert(testLessOrEqual(11) === "Smaller Than or Equal to 12", ''<code>testLessOrEqual(11)</code> should return "Smaller Than or Equal to 12"'');'
|
||||
- text: <code>testLessOrEqual(12)</code> should return "Smaller Than or Equal to 12"
|
||||
testString: 'assert(testLessOrEqual(12) === "Smaller Than or Equal to 12", ''<code>testLessOrEqual(12)</code> should return "Smaller Than or Equal to 12"'');'
|
||||
- text: <code>testLessOrEqual(23)</code> should return "Smaller Than or Equal to 24"
|
||||
testString: 'assert(testLessOrEqual(23) === "Smaller Than or Equal to 24", ''<code>testLessOrEqual(23)</code> should return "Smaller Than or Equal to 24"'');'
|
||||
- text: <code>testLessOrEqual(24)</code> should return "Smaller Than or Equal to 24"
|
||||
testString: 'assert(testLessOrEqual(24) === "Smaller Than or Equal to 24", ''<code>testLessOrEqual(24)</code> should return "Smaller Than or Equal to 24"'');'
|
||||
- text: <code>testLessOrEqual(25)</code> should return "More Than 24"
|
||||
testString: 'assert(testLessOrEqual(25) === "More Than 24", ''<code>testLessOrEqual(25)</code> should return "More Than 24"'');'
|
||||
- text: <code>testLessOrEqual(55)</code> should return "More Than 24"
|
||||
testString: 'assert(testLessOrEqual(55) === "More Than 24", ''<code>testLessOrEqual(55)</code> should return "More Than 24"'');'
|
||||
- text: You should use the <code><=</code> operator at least twice
|
||||
testString: 'assert(code.match(/val\s*<=\s*(''|")*\d+(''|")*/g).length > 1, ''You should use the <code><=</code> operator at least twice'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function testLessOrEqual(val) {
|
||||
if (val) { // Change this line
|
||||
return "Smaller Than or Equal to 12";
|
||||
}
|
||||
|
||||
if (val) { // Change this line
|
||||
return "Smaller Than or Equal to 24";
|
||||
}
|
||||
|
||||
return "More Than 24";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testLessOrEqual(10);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testLessOrEqual(val) {
|
||||
if (val <= 12) { // Change this line
|
||||
return "Smaller Than or Equal to 12";
|
||||
}
|
||||
|
||||
if (val <= 24) { // Change this line
|
||||
return "Smaller Than or Equal to 24";
|
||||
}
|
||||
|
||||
return "More Than 24";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d1
|
||||
title: Comparison with the Strict Equality Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Strict equality (<code>===</code>) is the counterpart to the equality operator (<code>==</code>). However, unlike the equality operator, which attempts to convert both values being compared to a common type, the strict equality operator does not perform a type conversion.
|
||||
If the values being compared have different types, they are considered unequal, and the strict equality operator will return false.
|
||||
<strong>Examples</strong>
|
||||
<blockquote>3 === 3 // true<br>3 === '3' // false</blockquote>
|
||||
In the second example, <code>3</code> is a <code>Number</code> type and <code>'3'</code> is a <code>String</code> type.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use the strict equality operator in the <code>if</code> statement so the function will return "Equal" when <code>val</code> is strictly equal to <code>7</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>testStrict(10)</code> should return "Not Equal"
|
||||
testString: 'assert(testStrict(10) === "Not Equal", ''<code>testStrict(10)</code> should return "Not Equal"'');'
|
||||
- text: <code>testStrict(7)</code> should return "Equal"
|
||||
testString: 'assert(testStrict(7) === "Equal", ''<code>testStrict(7)</code> should return "Equal"'');'
|
||||
- text: <code>testStrict("7")</code> should return "Not Equal"
|
||||
testString: 'assert(testStrict("7") === "Not Equal", ''<code>testStrict("7")</code> should return "Not Equal"'');'
|
||||
- text: You should use the <code>===</code> operator
|
||||
testString: 'assert(code.match(/(val\s*===\s*\d+)|(\d+\s*===\s*val)/g).length > 0, ''You should use the <code>===</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
function testStrict(val) {
|
||||
if (val) { // Change this line
|
||||
return "Equal";
|
||||
}
|
||||
return "Not Equal";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testStrict(10);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testStrict(val) {
|
||||
if (val === 7) {
|
||||
return "Equal";
|
||||
}
|
||||
return "Not Equal";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d3
|
||||
title: Comparison with the Strict Inequality Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The strict inequality operator (<code>!==</code>) is the logical opposite of the strict equality operator. It means "Strictly Not Equal" and returns <code>false</code> where strict equality would return <code>true</code> and <em>vice versa</em>. Strict inequality will not convert data types.
|
||||
<strong>Examples</strong>
|
||||
<blockquote>3 !== 3 // false<br>3 !== '3' // true<br>4 !== 3 // true</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the <code>strict inequality operator</code> to the <code>if</code> statement so the function will return "Not Equal" when <code>val</code> is not strictly equal to <code>17</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>testStrictNotEqual(17)</code> should return "Equal"
|
||||
testString: 'assert(testStrictNotEqual(17) === "Equal", ''<code>testStrictNotEqual(17)</code> should return "Equal"'');'
|
||||
- text: <code>testStrictNotEqual("17")</code> should return "Not Equal"
|
||||
testString: 'assert(testStrictNotEqual("17") === "Not Equal", ''<code>testStrictNotEqual("17")</code> should return "Not Equal"'');'
|
||||
- text: <code>testStrictNotEqual(12)</code> should return "Not Equal"
|
||||
testString: 'assert(testStrictNotEqual(12) === "Not Equal", ''<code>testStrictNotEqual(12)</code> should return "Not Equal"'');'
|
||||
- text: <code>testStrictNotEqual("bob")</code> should return "Not Equal"
|
||||
testString: 'assert(testStrictNotEqual("bob") === "Not Equal", ''<code>testStrictNotEqual("bob")</code> should return "Not Equal"'');'
|
||||
- text: You should use the <code>!==</code> operator
|
||||
testString: 'assert(code.match(/(val\s*!==\s*\d+)|(\d+\s*!==\s*val)/g).length > 0, ''You should use the <code>!==</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
function testStrictNotEqual(val) {
|
||||
// Only Change Code Below this Line
|
||||
|
||||
if (val) {
|
||||
|
||||
// Only Change Code Above this Line
|
||||
|
||||
return "Not Equal";
|
||||
}
|
||||
return "Equal";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testStrictNotEqual(10);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testStrictNotEqual(val) {
|
||||
if (val !== 17) {
|
||||
return "Not Equal";
|
||||
}
|
||||
return "Equal";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d8
|
||||
title: Comparisons with the Logical And Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Sometimes you will need to test more than one thing at a time. The <dfn>logical and</dfn> operator (<code>&&</code>) returns <code>true</code> if and only if the <dfn>operands</dfn> to the left and right of it are true.
|
||||
The same effect could be achieved by nesting an if statement inside another if:
|
||||
<blockquote>if (num > 5) {<br> if (num < 10) {<br> return "Yes";<br> }<br>}<br>return "No";</blockquote>
|
||||
will only return "Yes" if <code>num</code> is greater than <code>5</code> and less than <code>10</code>. The same logic can be written as:
|
||||
<blockquote>if (num > 5 && num < 10) {<br> return "Yes";<br>}<br>return "No";</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Combine the two if statements into one statement which will return <code>"Yes"</code> if <code>val</code> is less than or equal to <code>50</code> and greater than or equal to <code>25</code>. Otherwise, will return <code>"No"</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should use the <code>&&</code> operator once
|
||||
testString: 'assert(code.match(/&&/g).length === 1, ''You should use the <code>&&</code> operator once'');'
|
||||
- text: You should only have one <code>if</code> statement
|
||||
testString: 'assert(code.match(/if/g).length === 1, ''You should only have one <code>if</code> statement'');'
|
||||
- text: <code>testLogicalAnd(0)</code> should return "No"
|
||||
testString: 'assert(testLogicalAnd(0) === "No", ''<code>testLogicalAnd(0)</code> should return "No"'');'
|
||||
- text: <code>testLogicalAnd(24)</code> should return "No"
|
||||
testString: 'assert(testLogicalAnd(24) === "No", ''<code>testLogicalAnd(24)</code> should return "No"'');'
|
||||
- text: <code>testLogicalAnd(25)</code> should return "Yes"
|
||||
testString: 'assert(testLogicalAnd(25) === "Yes", ''<code>testLogicalAnd(25)</code> should return "Yes"'');'
|
||||
- text: <code>testLogicalAnd(30)</code> should return "Yes"
|
||||
testString: 'assert(testLogicalAnd(30) === "Yes", ''<code>testLogicalAnd(30)</code> should return "Yes"'');'
|
||||
- text: <code>testLogicalAnd(50)</code> should return "Yes"
|
||||
testString: 'assert(testLogicalAnd(50) === "Yes", ''<code>testLogicalAnd(50)</code> should return "Yes"'');'
|
||||
- text: <code>testLogicalAnd(51)</code> should return "No"
|
||||
testString: 'assert(testLogicalAnd(51) === "No", ''<code>testLogicalAnd(51)</code> should return "No"'');'
|
||||
- text: <code>testLogicalAnd(75)</code> should return "No"
|
||||
testString: 'assert(testLogicalAnd(75) === "No", ''<code>testLogicalAnd(75)</code> should return "No"'');'
|
||||
- text: <code>testLogicalAnd(80)</code> should return "No"
|
||||
testString: 'assert(testLogicalAnd(80) === "No", ''<code>testLogicalAnd(80)</code> should return "No"'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function testLogicalAnd(val) {
|
||||
// Only change code below this line
|
||||
|
||||
if (val) {
|
||||
if (val) {
|
||||
return "Yes";
|
||||
}
|
||||
}
|
||||
|
||||
// Only change code above this line
|
||||
return "No";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testLogicalAnd(10);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testLogicalAnd(val) {
|
||||
if (val >= 25 && val <= 50) {
|
||||
return "Yes";
|
||||
}
|
||||
return "No";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d9
|
||||
title: Comparisons with the Logical Or Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <dfn>logical or</dfn> operator (<code>||</code>) returns <code>true</code> if either of the <dfn>operands</dfn> is <code>true</code>. Otherwise, it returns <code>false</code>.
|
||||
The <dfn>logical or</dfn> operator is composed of two pipe symbols (<code>|</code>). This can typically be found between your Backspace and Enter keys.
|
||||
The pattern below should look familiar from prior waypoints:
|
||||
<blockquote>if (num > 10) {<br> return "No";<br>}<br>if (num < 5) {<br> return "No";<br>}<br>return "Yes";</blockquote>
|
||||
will return "Yes" only if <code>num</code> is between <code>5</code> and <code>10</code> (5 and 10 included). The same logic can be written as:
|
||||
<blockquote>if (num > 10 || num < 5) {<br> return "No";<br>}<br>return "Yes";</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Combine the two <code>if</code> statements into one statement which returns <code>"Outside"</code> if <code>val</code> is not between <code>10</code> and <code>20</code>, inclusive. Otherwise, return <code>"Inside"</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should use the <code>||</code> operator once
|
||||
testString: 'assert(code.match(/\|\|/g).length === 1, ''You should use the <code>||</code> operator once'');'
|
||||
- text: You should only have one <code>if</code> statement
|
||||
testString: 'assert(code.match(/if/g).length === 1, ''You should only have one <code>if</code> statement'');'
|
||||
- text: <code>testLogicalOr(0)</code> should return "Outside"
|
||||
testString: 'assert(testLogicalOr(0) === "Outside", ''<code>testLogicalOr(0)</code> should return "Outside"'');'
|
||||
- text: <code>testLogicalOr(9)</code> should return "Outside"
|
||||
testString: 'assert(testLogicalOr(9) === "Outside", ''<code>testLogicalOr(9)</code> should return "Outside"'');'
|
||||
- text: <code>testLogicalOr(10)</code> should return "Inside"
|
||||
testString: 'assert(testLogicalOr(10) === "Inside", ''<code>testLogicalOr(10)</code> should return "Inside"'');'
|
||||
- text: <code>testLogicalOr(15)</code> should return "Inside"
|
||||
testString: 'assert(testLogicalOr(15) === "Inside", ''<code>testLogicalOr(15)</code> should return "Inside"'');'
|
||||
- text: <code>testLogicalOr(19)</code> should return "Inside"
|
||||
testString: 'assert(testLogicalOr(19) === "Inside", ''<code>testLogicalOr(19)</code> should return "Inside"'');'
|
||||
- text: <code>testLogicalOr(20)</code> should return "Inside"
|
||||
testString: 'assert(testLogicalOr(20) === "Inside", ''<code>testLogicalOr(20)</code> should return "Inside"'');'
|
||||
- text: <code>testLogicalOr(21)</code> should return "Outside"
|
||||
testString: 'assert(testLogicalOr(21) === "Outside", ''<code>testLogicalOr(21)</code> should return "Outside"'');'
|
||||
- text: <code>testLogicalOr(25)</code> should return "Outside"
|
||||
testString: 'assert(testLogicalOr(25) === "Outside", ''<code>testLogicalOr(25)</code> should return "Outside"'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function testLogicalOr(val) {
|
||||
// Only change code below this line
|
||||
|
||||
if (val) {
|
||||
return "Outside";
|
||||
}
|
||||
|
||||
if (val) {
|
||||
return "Outside";
|
||||
}
|
||||
|
||||
// Only change code above this line
|
||||
return "Inside";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testLogicalOr(15);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testLogicalOr(val) {
|
||||
if (val < 10 || val > 20) {
|
||||
return "Outside";
|
||||
}
|
||||
return "Inside";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244af
|
||||
title: Compound Assignment With Augmented Addition
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In programming, it is common to use assignments to modify the contents of a variable. Remember that everything to the right of the equals sign is evaluated first, so we can say:
|
||||
<code>myVar = myVar + 5;</code>
|
||||
to add <code>5</code> to <code>myVar</code>. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step.
|
||||
One such operator is the <code>+=</code> operator.
|
||||
<blockquote>var myVar = 1;<br>myVar += 5;<br>console.log(myVar); // Returns 6</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>+=</code> operator.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>a</code> should equal <code>15</code>
|
||||
testString: 'assert(a === 15, ''<code>a</code> should equal <code>15</code>'');'
|
||||
- text: <code>b</code> should equal <code>26</code>
|
||||
testString: 'assert(b === 26, ''<code>b</code> should equal <code>26</code>'');'
|
||||
- text: <code>c</code> should equal <code>19</code>
|
||||
testString: 'assert(c === 19, ''<code>c</code> should equal <code>19</code>'');'
|
||||
- text: You should use the <code>+=</code> operator for each variable
|
||||
testString: 'assert(code.match(/\+=/g).length === 3, ''You should use the <code>+=</code> operator for each variable'');'
|
||||
- text: Do not modify the code above the line
|
||||
testString: 'assert(/var a = 3;/.test(code) && /var b = 17;/.test(code) && /var c = 12;/.test(code), ''Do not modify the code above the line'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var a = 3;
|
||||
var b = 17;
|
||||
var c = 12;
|
||||
|
||||
// Only modify code below this line
|
||||
|
||||
a = a + 12;
|
||||
b = 9 + b;
|
||||
c = c + 7;
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var a = 3;
|
||||
var b = 17;
|
||||
var c = 12;
|
||||
|
||||
a += 12;
|
||||
b += 9;
|
||||
c += 7;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b2
|
||||
title: Compound Assignment With Augmented Division
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>/=</code> operator divides a variable by another number.
|
||||
<code>myVar = myVar / 5;</code>
|
||||
Will divide <code>myVar</code> by <code>5</code>. This can be rewritten as:
|
||||
<code>myVar /= 5;</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>/=</code> operator.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>a</code> should equal <code>4</code>
|
||||
testString: 'assert(a === 4, ''<code>a</code> should equal <code>4</code>'');'
|
||||
- text: <code>b</code> should equal <code>27</code>
|
||||
testString: 'assert(b === 27, ''<code>b</code> should equal <code>27</code>'');'
|
||||
- text: <code>c</code> should equal <code>3</code>
|
||||
testString: 'assert(c === 3, ''<code>c</code> should equal <code>3</code>'');'
|
||||
- text: You should use the <code>/=</code> operator for each variable
|
||||
testString: 'assert(code.match(/\/=/g).length === 3, ''You should use the <code>/=</code> operator for each variable'');'
|
||||
- text: Do not modify the code above the line
|
||||
testString: 'assert(/var a = 48;/.test(code) && /var b = 108;/.test(code) && /var c = 33;/.test(code), ''Do not modify the code above the line'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var a = 48;
|
||||
var b = 108;
|
||||
var c = 33;
|
||||
|
||||
// Only modify code below this line
|
||||
|
||||
a = a / 12;
|
||||
b = b / 4;
|
||||
c = c / 11;
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var a = 48;
|
||||
var b = 108;
|
||||
var c = 33;
|
||||
|
||||
a /= 12;
|
||||
b /= 4;
|
||||
c /= 11;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b1
|
||||
title: Compound Assignment With Augmented Multiplication
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>*=</code> operator multiplies a variable by a number.
|
||||
<code>myVar = myVar * 5;</code>
|
||||
will multiply <code>myVar</code> by <code>5</code>. This can be rewritten as:
|
||||
<code>myVar *= 5;</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>*=</code> operator.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>a</code> should equal <code>25</code>
|
||||
testString: 'assert(a === 25, ''<code>a</code> should equal <code>25</code>'');'
|
||||
- text: <code>b</code> should equal <code>36</code>
|
||||
testString: 'assert(b === 36, ''<code>b</code> should equal <code>36</code>'');'
|
||||
- text: <code>c</code> should equal <code>46</code>
|
||||
testString: 'assert(c === 46, ''<code>c</code> should equal <code>46</code>'');'
|
||||
- text: You should use the <code>*=</code> operator for each variable
|
||||
testString: 'assert(code.match(/\*=/g).length === 3, ''You should use the <code>*=</code> operator for each variable'');'
|
||||
- text: Do not modify the code above the line
|
||||
testString: 'assert(/var a = 5;/.test(code) && /var b = 12;/.test(code) && /var c = 4\.6;/.test(code), ''Do not modify the code above the line'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var a = 5;
|
||||
var b = 12;
|
||||
var c = 4.6;
|
||||
|
||||
// Only modify code below this line
|
||||
|
||||
a = a * 5;
|
||||
b = 3 * b;
|
||||
c = c * 10;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var a = 5;
|
||||
var b = 12;
|
||||
var c = 4.6;
|
||||
|
||||
a *= 5;
|
||||
b *= 3;
|
||||
c *= 10;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b0
|
||||
title: Compound Assignment With Augmented Subtraction
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Like the <code>+=</code> operator, <code>-=</code> subtracts a number from a variable.
|
||||
<code>myVar = myVar - 5;</code>
|
||||
will subtract <code>5</code> from <code>myVar</code>. This can be rewritten as:
|
||||
<code>myVar -= 5;</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>-=</code> operator.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>a</code> should equal <code>5</code>
|
||||
testString: 'assert(a === 5, ''<code>a</code> should equal <code>5</code>'');'
|
||||
- text: <code>b</code> should equal <code>-6</code>
|
||||
testString: 'assert(b === -6, ''<code>b</code> should equal <code>-6</code>'');'
|
||||
- text: <code>c</code> should equal <code>2</code>
|
||||
testString: 'assert(c === 2, ''<code>c</code> should equal <code>2</code>'');'
|
||||
- text: You should use the <code>-=</code> operator for each variable
|
||||
testString: 'assert(code.match(/-=/g).length === 3, ''You should use the <code>-=</code> operator for each variable'');'
|
||||
- text: Do not modify the code above the line
|
||||
testString: 'assert(/var a = 11;/.test(code) && /var b = 9;/.test(code) && /var c = 3;/.test(code), ''Do not modify the code above the line'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var a = 11;
|
||||
var b = 9;
|
||||
var c = 3;
|
||||
|
||||
// Only modify code below this line
|
||||
|
||||
a = a - 6;
|
||||
b = b - 15;
|
||||
c = c - 1;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var a = 11;
|
||||
var b = 9;
|
||||
var c = 3;
|
||||
|
||||
a -= 6;
|
||||
b -= 15;
|
||||
c -= 1;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b7
|
||||
title: Concatenating Strings with Plus Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In JavaScript, when the <code>+</code> operator is used with a <code>String</code> value, it is called the <dfn>concatenation</dfn> operator. You can build a new string out of other strings by <dfn>concatenating</dfn> them together.
|
||||
<strong>Example</strong>
|
||||
<blockquote>'My name is Alan,' + ' I concatenate.'</blockquote>
|
||||
<strong>Note</strong><br>Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Build <code>myStr</code> from the strings <code>"This is the start. "</code> and <code>"This is the end."</code> using the <code>+</code> operator.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myStr</code> should have a value of <code>This is the start. This is the end.</code>
|
||||
testString: 'assert(myStr === "This is the start. This is the end.", ''<code>myStr</code> should have a value of <code>This is the start. This is the end.</code>'');'
|
||||
- text: Use the <code>+</code> operator to build <code>myStr</code>
|
||||
testString: 'assert(code.match(/(["'']).*(["''])\s*\+\s*(["'']).*(["''])/g).length > 1, ''Use the <code>+</code> operator to build <code>myStr</code>'');'
|
||||
- text: <code>myStr</code> should be created using the <code>var</code> keyword.
|
||||
testString: 'assert(/var\s+myStr/.test(code), ''<code>myStr</code> should be created using the <code>var</code> keyword.'');'
|
||||
- text: Make sure to assign the result to the <code>myStr</code> variable.
|
||||
testString: 'assert(/myStr\s*=/.test(code), ''Make sure to assign the result to the <code>myStr</code> variable.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourStr = "I come first. " + "I come second.";
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
var myStr;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var ourStr = "I come first. " + "I come second.";
|
||||
var myStr = "This is the start. " + "This is the end.";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b8
|
||||
title: Concatenating Strings with the Plus Equals Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We can also use the <code>+=</code> operator to <dfn>concatenate</dfn> a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines.
|
||||
<strong>Note</strong><br>Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Build <code>myStr</code> over several lines by concatenating these two strings: <code>"This is the first sentence. "</code> and <code>"This is the second sentence."</code> using the <code>+=</code> operator. Use the <code>+=</code> operator similar to how it is shown in the editor. Start by assigning the first string to <code>myStr</code>, then add on the second string.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myStr</code> should have a value of <code>This is the first sentence. This is the second sentence.</code>
|
||||
testString: 'assert(myStr === "This is the first sentence. This is the second sentence.", ''<code>myStr</code> should have a value of <code>This is the first sentence. This is the second sentence.</code>'');'
|
||||
- text: Use the <code>+=</code> operator to build <code>myStr</code>
|
||||
testString: 'assert(code.match(/\w\s*\+=\s*["'']/g).length > 1 && code.match(/\w\s*\=\s*["'']/g).length > 1, ''Use the <code>+=</code> operator to build <code>myStr</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourStr = "I come first. ";
|
||||
ourStr += "I come second.";
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
var myStr;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var ourStr = "I come first. ";
|
||||
ourStr += "I come second.";
|
||||
|
||||
var myStr = "This is the first sentence. ";
|
||||
myStr += "This is the second sentence.";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b9
|
||||
title: Constructing Strings with Variables
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Sometimes you will need to build a string, <a href="https://en.wikipedia.org/wiki/Mad_Libs" target="_blank">Mad Libs</a> style. By using the concatenation operator (<code>+</code>), you can insert one or more variables into a string you're building.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Set <code>myName</code> to a string equal to your name and build <code>myStr</code> with <code>myName</code> between the strings <code>"My name is "</code> and <code>" and I am well!"</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myName</code> should be set to a string at least 3 characters long
|
||||
testString: 'assert(typeof myName !== ''undefined'' && myName.length > 2, ''<code>myName</code> should be set to a string at least 3 characters long'');'
|
||||
- text: Use two <code>+</code> operators to build <code>myStr</code> with <code>myName</code> inside it
|
||||
testString: 'assert(code.match(/["'']\s*\+\s*myName\s*\+\s*["'']/g).length > 0, ''Use two <code>+</code> operators to build <code>myStr</code> with <code>myName</code> inside it'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourName = "freeCodeCamp";
|
||||
var ourStr = "Hello, our name is " + ourName + ", how are you?";
|
||||
|
||||
// Only change code below this line
|
||||
var myName;
|
||||
var myStr;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myName = "Bob";
|
||||
var myStr = "My name is " + myName + " and I am well!";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 56105e7b514f539506016a5e
|
||||
title: Count Backwards With a For Loop
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A for loop can also count backwards, so long as we can define the right conditions.
|
||||
In order to count backwards by twos, we'll need to change our <code>initialization</code>, <code>condition</code>, and <code>final-expression</code>.
|
||||
We'll start at <code>i = 10</code> and loop while <code>i > 0</code>. We'll decrement <code>i</code> by 2 each loop with <code>i -= 2</code>.
|
||||
<blockquote>var ourArray = [];<br>for (var i=10; i > 0; i-=2) {<br> ourArray.push(i);<br>}</blockquote>
|
||||
<code>ourArray</code> will now contain <code>[10,8,6,4,2]</code>.
|
||||
Let's change our <code>initialization</code> and <code>final-expression</code> so we can count backward by twos by odd numbers.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Push the odd numbers from 9 through 1 to <code>myArray</code> using a <code>for</code> loop.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should be using a <code>for</code> loop for this.
|
||||
testString: 'assert(code.match(/for\s*\(/g).length > 1, ''You should be using a <code>for</code> loop for this.'');'
|
||||
- text: You should be using the array method <code>push</code>.
|
||||
testString: 'assert(code.match(/myArray.push/), ''You should be using the array method <code>push</code>.'');'
|
||||
- text: '<code>myArray</code> should equal <code>[9,7,5,3,1]</code>.'
|
||||
testString: 'assert.deepEqual(myArray, [9,7,5,3,1], ''<code>myArray</code> should equal <code>[9,7,5,3,1]</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = [];
|
||||
|
||||
for (var i = 10; i > 0; i -= 2) {
|
||||
ourArray.push(i);
|
||||
}
|
||||
|
||||
// Setup
|
||||
var myArray = [];
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
for (var i = 10; i > 0; i -= 2) {
|
||||
ourArray.push(i);
|
||||
}
|
||||
var myArray = [];
|
||||
for (var i = 9; i > 0; i -= 2) {
|
||||
myArray.push(i);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 565bbe00e9cc8ac0725390f4
|
||||
title: Counting Cards
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the casino game Blackjack, a player can gain an advantage over the house by keeping track of the relative number of high and low cards remaining in the deck. This is called <a href='https://en.wikipedia.org/wiki/Card_counting' target='_blank'>Card Counting</a>.
|
||||
Having more high cards remaining in the deck favors the player. Each card is assigned a value according to the table below. When the count is positive, the player should bet high. When the count is zero or negative, the player should bet low.
|
||||
<table class="table table-striped"><thead><tr><th>Count Change</th><th>Cards</th></tr></thead><tbody><tr><td>+1</td><td>2, 3, 4, 5, 6</td></tr><tr><td>0</td><td>7, 8, 9</td></tr><tr><td>-1</td><td>10, 'J', 'Q', 'K', 'A'</td></tr></tbody></table>
|
||||
You will write a card counting function. It will receive a <code>card</code> parameter, which can be a number or a string, and increment or decrement the global <code>count</code> variable according to the card's value (see table). The function will then return a string with the current count and the string <code>Bet</code> if the count is positive, or <code>Hold</code> if the count is zero or negative. The current count and the player's decision (<code>Bet</code> or <code>Hold</code>) should be separated by a single space.
|
||||
<strong>Example Output</strong><br><code>-3 Hold</code><br><code>5 Bet</code>
|
||||
<strong>Hint</strong><br>Do NOT reset <code>count</code> to 0 when value is 7, 8, or 9.<br>Do NOT return an array.<br>Do NOT include quotes (single or double) in the output.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>'
|
||||
testString: 'assert((function(){ count = 0; cc(2);cc(3);cc(4);cc(5);var out = cc(6); if(out === "5 Bet") {return true;} return false; })(), ''Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>'');'
|
||||
- text: 'Cards Sequence 7, 8, 9 should return <code>0 Hold</code>'
|
||||
testString: 'assert((function(){ count = 0; cc(7);cc(8);var out = cc(9); if(out === "0 Hold") {return true;} return false; })(), ''Cards Sequence 7, 8, 9 should return <code>0 Hold</code>'');'
|
||||
- text: 'Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>'
|
||||
testString: 'assert((function(){ count = 0; cc(10);cc(''J'');cc(''Q'');cc(''K'');var out = cc(''A''); if(out === "-5 Hold") {return true;} return false; })(), ''Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>'');'
|
||||
- text: 'Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>'
|
||||
testString: 'assert((function(){ count = 0; cc(3);cc(7);cc(''Q'');cc(8);var out = cc(''A''); if(out === "-1 Hold") {return true;} return false; })(), ''Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>'');'
|
||||
- text: 'Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>'
|
||||
testString: 'assert((function(){ count = 0; cc(2);cc(''J'');cc(9);cc(2);var out = cc(7); if(out === "1 Bet") {return true;} return false; })(), ''Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>'');'
|
||||
- text: 'Cards Sequence 2, 2, 10 should return <code>1 Bet</code>'
|
||||
testString: 'assert((function(){ count = 0; cc(2);cc(2);var out = cc(10); if(out === "1 Bet") {return true;} return false; })(), ''Cards Sequence 2, 2, 10 should return <code>1 Bet</code>'');'
|
||||
- text: 'Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>'
|
||||
testString: 'assert((function(){ count = 0; cc(3);cc(2);cc(''A'');cc(10);var out = cc(''K''); if(out === "-1 Hold") {return true;} return false; })(), ''Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var count = 0;
|
||||
|
||||
function cc(card) {
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
return "Change Me";
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
// Add/remove calls to test your function.
|
||||
// Note: Only the last will display
|
||||
cc(2); cc(3); cc(7); cc('K'); cc('A');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var count = 0;
|
||||
function cc(card) {
|
||||
switch(card) {
|
||||
case 2:
|
||||
case 3:
|
||||
case 4:
|
||||
case 5:
|
||||
case 6:
|
||||
count++;
|
||||
break;
|
||||
case 10:
|
||||
case 'J':
|
||||
case 'Q':
|
||||
case 'K':
|
||||
case 'A':
|
||||
count--;
|
||||
}
|
||||
if(count > 0) {
|
||||
return count + " Bet";
|
||||
} else {
|
||||
return count + " Hold";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: cf1391c1c11feddfaeb4bdef
|
||||
title: Create Decimal Numbers with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as <dfn>floating point</dfn> numbers or <dfn>floats</dfn>.
|
||||
<strong>Note</strong><br>Not all real numbers can accurately be represented in <dfn>floating point</dfn>. This can lead to rounding errors. <a href="https://en.wikipedia.org/wiki/Floating_point#Accuracy_problems" target="_blank">Details Here</a>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a variable <code>myDecimal</code> and give it a decimal value with a fractional part (e.g. <code>5.7</code>).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myDecimal</code> should be a number.
|
||||
testString: 'assert(typeof myDecimal === "number", ''<code>myDecimal</code> should be a number.'');'
|
||||
- text: <code>myDecimal</code> should have a decimal point
|
||||
testString: 'assert(myDecimal % 1 != 0, ''<code>myDecimal</code> should have a decimal point''); '
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var ourDecimal = 5.7;
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myDecimal = 9.9;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: bd7123c9c443eddfaeb5bdef
|
||||
title: Declare JavaScript Variables
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In computer science, <dfn>data</dfn> is anything that is meaningful to the computer. JavaScript provides seven different <dfn>data types</dfn> which are <code>undefined</code>, <code>null</code>, <code>boolean</code>, <code>string</code>, <code>symbol</code>, <code>number</code>, and <code>object</code>.
|
||||
For example, computers distinguish between numbers, such as the number <code>12</code>, and <code>strings</code>, such as <code>"12"</code>, <code>"dog"</code>, or <code>"123 cats"</code>, which are collections of characters. Computers can perform mathematical operations on a number, but not on a string.
|
||||
<dfn>Variables</dfn> allow computers to store and manipulate data in a dynamic fashion. They do this by using a "label" to point to the data rather than using the data itself. Any of the seven data types may be stored in a variable.
|
||||
<code>Variables</code> are similar to the x and y variables you use in mathematics, which means they're a simple name to represent the data we want to refer to. Computer <code>variables</code> differ from mathematical variables in that they can store different values at different times.
|
||||
We tell JavaScript to create or <dfn>declare</dfn> a variable by putting the keyword <code>var</code> in front of it, like so:
|
||||
<blockquote>var ourName;</blockquote>
|
||||
creates a <code>variable</code> called <code>ourName</code>. In JavaScript we end statements with semicolons.
|
||||
<code>Variable</code> names can be made up of numbers, letters, and <code>$</code> or <code>_</code>, but may not contain spaces or start with a number.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use the <code>var</code> keyword to create a variable called <code>myName</code>.
|
||||
<strong>Hint</strong><br>Look at the <code>ourName</code> example if you get stuck.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon'
|
||||
testString: 'assert(/var\s+myName\s*;/.test(code), ''You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourName;
|
||||
|
||||
// Declare myName below this line
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myName;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: bd7123c9c444eddfaeb5bdef
|
||||
title: Declare String Variables
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Previously we have used the code
|
||||
<code>var myName = "your name";</code>
|
||||
<code>"your name"</code> is called a <dfn>string</dfn> <dfn>literal</dfn>. It is a string because it is a series of zero or more characters enclosed in single or double quotes.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create two new <code>string</code> variables: <code>myFirstName</code> and <code>myLastName</code> and assign them the values of your first and last name, respectively.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myFirstName</code> should be a string with at least one character in it.
|
||||
testString: 'assert((function(){if(typeof myFirstName !== "undefined" && typeof myFirstName === "string" && myFirstName.length > 0){return true;}else{return false;}})(), ''<code>myFirstName</code> should be a string with at least one character in it.'');'
|
||||
- text: <code>myLastName</code> should be a string with at least one character in it.
|
||||
testString: 'assert((function(){if(typeof myLastName !== "undefined" && typeof myLastName === "string" && myLastName.length > 0){return true;}else{return false;}})(), ''<code>myLastName</code> should be a string with at least one character in it.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var firstName = "Alan";
|
||||
var lastName = "Turing";
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myFirstName = "Alan";
|
||||
var myLastName = "Turing";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244ad
|
||||
title: Decrement a Number with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can easily <dfn>decrement</dfn> or decrease a variable by one with the <code>--</code> operator.
|
||||
<code>i--;</code>
|
||||
is the equivalent of
|
||||
<code>i = i - 1;</code>
|
||||
<strong>Note</strong><br>The entire line becomes <code>i--;</code>, eliminating the need for the equal sign.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the code to use the <code>--</code> operator on <code>myVar</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myVar</code> should equal <code>10</code>
|
||||
testString: 'assert(myVar === 10, ''<code>myVar</code> should equal <code>10</code>'');'
|
||||
- text: <code>myVar = myVar - 1;</code> should be changed
|
||||
testString: 'assert(/var\s*myVar\s*=\s*11;\s*\/*.*\s*([-]{2}\s*myVar|myVar\s*[-]{2});/.test(code), ''<code>myVar = myVar - 1;</code> should be changed'');'
|
||||
- text: Use the <code>--</code> operator on <code>myVar</code>
|
||||
testString: 'assert(/[-]{2}\s*myVar|myVar\s*[-]{2}/.test(code), ''Use the <code>--</code> operator on <code>myVar</code>'');'
|
||||
- text: Do not change code above the line
|
||||
testString: 'assert(/var myVar = 11;/.test(code), ''Do not change code above the line'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myVar = 11;
|
||||
|
||||
// Only change code below this line
|
||||
myVar = myVar - 1;
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myVar = 11;
|
||||
myVar--;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392d3
|
||||
title: Delete Properties from a JavaScript Object
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We can also delete properties from objects like this:
|
||||
<code>delete ourDog.bark;</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Delete the <code>"tails"</code> property from <code>myDog</code>. You may use either dot or bracket notation.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Delete the property <code>"tails"</code> from <code>myDog</code>.
|
||||
testString: 'assert(typeof myDog === "object" && myDog.tails === undefined, ''Delete the property <code>"tails"</code> from <code>myDog</code>.'');'
|
||||
- text: Do not modify the <code>myDog</code> setup
|
||||
testString: 'assert(code.match(/"tails": 1/g).length > 1, ''Do not modify the <code>myDog</code> setup'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourDog = {
|
||||
"name": "Camper",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["everything!"],
|
||||
"bark": "bow-wow"
|
||||
};
|
||||
|
||||
delete ourDog.bark;
|
||||
|
||||
// Setup
|
||||
var myDog = {
|
||||
"name": "Happy Coder",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["freeCodeCamp Campers"],
|
||||
"bark": "woof"
|
||||
};
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var ourDog = {
|
||||
"name": "Camper",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["everything!"],
|
||||
"bark": "bow-wow"
|
||||
};
|
||||
var myDog = {
|
||||
"name": "Happy Coder",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["freeCodeCamp Campers"],
|
||||
"bark": "woof"
|
||||
};
|
||||
delete myDog.tails;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: bd7993c9ca9feddfaeb7bdef
|
||||
title: Divide One Decimal by Another with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Now let's divide one decimal by another.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the <code>0.0</code> so that <code>quotient</code> will equal to <code>2.2</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: The variable <code>quotient</code> should equal <code>2.2</code>
|
||||
testString: 'assert(quotient === 2.2, ''The variable <code>quotient</code> should equal <code>2.2</code>'');'
|
||||
- text: You should use the <code>/</code> operator to divide 4.4 by 2
|
||||
testString: 'assert(/4\.40*\s*\/\s*2\.*0*/.test(code), ''You should use the <code>/</code> operator to divide 4.4 by 2'');'
|
||||
- text: The quotient variable should only be assigned once
|
||||
testString: 'assert(code.match(/quotient/g).length === 1, ''The quotient variable should only be assigned once'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var quotient = 0.0 / 2.0; // Fix this line
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb6bdef
|
||||
title: Divide One Number by Another with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We can also divide one number by another.
|
||||
JavaScript uses the <code>/</code> symbol for division.
|
||||
|
||||
<strong>Example</strong>
|
||||
<blockquote>myVar = 16 / 2; // assigned 8</blockquote>
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the <code>0</code> so that the <code>quotient</code> is equal to <code>2</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Make the variable <code>quotient</code> equal to 2.
|
||||
testString: 'assert(quotient === 2, ''Make the variable <code>quotient</code> equal to 2.'');'
|
||||
- text: Use the <code>/</code> operator
|
||||
testString: 'assert(/\d+\s*\/\s*\d+/.test(code), ''Use the <code>/</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var quotient = 66 / 0;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var quotient = 66 / 33;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b6
|
||||
title: Escape Sequences in Strings
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Quotes are not the only characters that can be <dfn>escaped</dfn> inside a string. There are two reasons to use escaping characters: First is to allow you to use characters you might not otherwise be able to type out, such as a backspace. Second is to allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean. We learned this in the previous challenge.
|
||||
<table class="table table-striped"><thead><tr><th>Code</th><th>Output</th></tr></thead><tbody><tr><td><code>\'</code></td><td>single quote</td></tr><tr><td><code>\"</code></td><td>double quote</td></tr><tr><td><code>\\</code></td><td>backslash</td></tr><tr><td><code>\n</code></td><td>newline</td></tr><tr><td><code>\r</code></td><td>carriage return</td></tr><tr><td><code>\t</code></td><td>tab</td></tr><tr><td><code>\b</code></td><td>backspace</td></tr><tr><td><code>\f</code></td><td>form feed</td></tr></tbody></table>
|
||||
<em>Note that the backslash itself must be escaped in order to display as a backslash.</em>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Assign the following three lines of text into the single variable <code>myStr</code> using escape sequences.
|
||||
<blockquote>FirstLine<br/> \SecondLine<br/>ThirdLine</blockquote>
|
||||
You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words.
|
||||
Here is the text with the escape sequences written out.
|
||||
<q>FirstLine<code>newline</code><code>tab</code><code>backslash</code>SecondLine<code>newline</code>ThirdLine</q>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myStr</code> should not contain any spaces
|
||||
testString: 'assert(!/ /.test(myStr), ''<code>myStr</code> should not contain any spaces'');'
|
||||
- text: '<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)'
|
||||
testString: 'assert(/FirstLine/.test(myStr) && /SecondLine/.test(myStr) && /ThirdLine/.test(myStr), ''<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)'');'
|
||||
- text: <code>FirstLine</code> should be followed by the newline character <code>\n</code>
|
||||
testString: 'assert(/FirstLine\n/.test(myStr), ''<code>FirstLine</code> should be followed by the newline character <code>\n</code>'');'
|
||||
- text: <code>myStr</code> should contain a tab character <code>\t</code> which follows a newline character
|
||||
testString: 'assert(/\n\t/.test(myStr), ''<code>myStr</code> should contain a tab character <code>\t</code> which follows a newline character'');'
|
||||
- text: <code>SecondLine</code> should be preceded by the backslash character <code>\\</code>
|
||||
testString: 'assert(/\SecondLine/.test(myStr), ''<code>SecondLine</code> should be preceded by the backslash character <code>\\</code>'');'
|
||||
- text: There should be a newline character between <code>SecondLine</code> and <code>ThirdLine</code>
|
||||
testString: 'assert(/SecondLine\nThirdLine/.test(myStr), ''There should be a newline character between <code>SecondLine</code> and <code>ThirdLine</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myStr; // Change this line
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myStr = "FirstLine\n\t\\SecondLine\nThirdLine";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b5
|
||||
title: Escaping Literal Quotes in Strings
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: <code>"</code> or <code>'</code> inside of your string?
|
||||
In JavaScript, you can <dfn>escape</dfn> a quote from considering it as an end of string quote by placing a <dfn>backslash</dfn> (<code>\</code>) in front of the quote.
|
||||
<code>var sampleStr = "Alan said, \"Peter is learning JavaScript\".";</code>
|
||||
This signals to JavaScript that the following quote is not the end of the string, but should instead appear inside the string. So if you were to print this to the console, you would get:
|
||||
<code>Alan said, "Peter is learning JavaScript".</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <dfn>backslashes</dfn> to assign a string to the <code>myStr</code> variable so that if you were to print it to the console, you would see:
|
||||
<code>I am a "double quoted" string inside "double quotes".</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'You should use two double quotes (<code>"</code>) and four escaped double quotes (<code>\"</code>).'
|
||||
testString: 'assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2, ''You should use two double quotes (<code>"</code>) and four escaped double quotes (<code>\"</code>).'');'
|
||||
- text: 'Variable myStr should contain the string: <code>I am a "double quoted" string inside "double quotes".</code>'
|
||||
testString: 'assert(myStr === "I am a \"double quoted\" string inside \"double quotes\".", ''Variable myStr should contain the string: <code>I am a "double quoted" string inside "double quotes".</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myStr = ""; // Change this line
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myStr = "I am a \"double quoted\" string inside \"double quotes\".";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: bd7123c9c448eddfaeb5bdef
|
||||
title: Find the Length of a String
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can find the length of a <code>String</code> value by writing <code>.length</code> after the string variable or string literal.
|
||||
<code>"Alan Peter".length; // 10</code>
|
||||
For example, if we created a variable <code>var firstName = "Charles"</code>, we could find out how long the string <code>"Charles"</code> is by using the <code>firstName.length</code> property.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use the <code>.length</code> property to count the number of characters in the <code>lastName</code> variable and assign it to <code>lastNameLength</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>lastNameLength</code> should be equal to eight.
|
||||
testString: 'assert((function(){if(typeof lastNameLength !== "undefined" && typeof lastNameLength === "number" && lastNameLength === 8){return true;}else{return false;}})(), ''<code>lastNameLength</code> should be equal to eight.'');'
|
||||
- text: 'You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.'
|
||||
testString: 'assert((function(){if(code.match(/\.length/gi) && code.match(/\.length/gi).length >= 2 && code.match(/var lastNameLength \= 0;/gi) && code.match(/var lastNameLength \= 0;/gi).length >= 1){return true;}else{return false;}})(), ''You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var firstNameLength = 0;
|
||||
var firstName = "Ada";
|
||||
|
||||
firstNameLength = firstName.length;
|
||||
|
||||
// Setup
|
||||
var lastNameLength = 0;
|
||||
var lastName = "Lovelace";
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
lastNameLength = lastName;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var firstNameLength = 0;
|
||||
var firstName = "Ada";
|
||||
firstNameLength = firstName.length;
|
||||
|
||||
var lastNameLength = 0;
|
||||
var lastName = "Lovelace";
|
||||
lastNameLength = lastName.length;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244ae
|
||||
title: Finding a Remainder in JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <dfn>remainder</dfn> operator <code>%</code> gives the remainder of the division of two numbers.
|
||||
<strong>Example</strong>
|
||||
<blockquote>5 % 2 = 1 because<br>Math.floor(5 / 2) = 2 (Quotient)<br>2 * 2 = 4<br>5 - 4 = 1 (Remainder)</blockquote>
|
||||
<strong>Usage</strong><br>In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by <code>2</code>.
|
||||
<blockquote>17 % 2 = 1 (17 is Odd)<br>48 % 2 = 0 (48 is Even)</blockquote>
|
||||
<strong>Note</strong><br>The <dfn>remainder</dfn> operator is sometimes incorrectly referred to as the "modulus" operator. It is very similar to modulus, but does not work properly with negative numbers.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Set <code>remainder</code> equal to the remainder of <code>11</code> divided by <code>3</code> using the <dfn>remainder</dfn> (<code>%</code>) operator.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: The variable <code>remainder</code> should be initialized
|
||||
testString: 'assert(/var\s+?remainder/.test(code), ''The variable <code>remainder</code> should be initialized'');'
|
||||
- text: The value of <code>remainder</code> should be <code>2</code>
|
||||
testString: 'assert(remainder === 2, ''The value of <code>remainder</code> should be <code>2</code>'');'
|
||||
- text: You should use the <code>%</code> operator
|
||||
testString: 'assert(/\s+?remainder\s*?=\s*?.*%.*;/.test(code), ''You should use the <code>%</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Only change code below this line
|
||||
|
||||
var remainder;
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var remainder = 11 % 3;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb9bdef
|
||||
title: Generate Random Fractions with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Random numbers are useful for creating random behavior.
|
||||
JavaScript has a <code>Math.random()</code> function that generates a random decimal number between <code>0</code> (inclusive) and not quite up to <code>1</code> (exclusive). Thus <code>Math.random()</code> can return a <code>0</code> but never quite return a <code>1</code>
|
||||
<strong>Note</strong><br>Like <a href='storing-values-with-the-assignment-operator' target='_blank'>Storing Values with the Equal Operator</a>, all function calls will be resolved before the <code>return</code> executes, so we can <code>return</code> the value of the <code>Math.random()</code> function.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change <code>randomFraction</code> to return a random number instead of returning <code>0</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>randomFraction</code> should return a random number.
|
||||
testString: 'assert(typeof randomFraction() === "number", ''<code>randomFraction</code> should return a random number.'');'
|
||||
- text: The number returned by <code>randomFraction</code> should be a decimal.
|
||||
testString: 'assert((randomFraction()+''''). match(/\./g), ''The number returned by <code>randomFraction</code> should be a decimal.'');'
|
||||
- text: You should be using <code>Math.random</code> to generate the random decimal number.
|
||||
testString: 'assert(code.match(/Math\.random/g).length >= 0, ''You should be using <code>Math.random</code> to generate the random decimal number.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function randomFraction() {
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
return 0;
|
||||
|
||||
// Only change code above this line.
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function randomFraction() {
|
||||
return Math.random();
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: cf1111c1c12feddfaeb1bdef
|
||||
title: Generate Random Whole Numbers with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers.
|
||||
<ol><li>Use <code>Math.random()</code> to generate a random decimal.</li><li>Multiply that random decimal by <code>20</code>.</li><li>Use another function, <code>Math.floor()</code> to round the number down to its nearest whole number.</li></ol>
|
||||
Remember that <code>Math.random()</code> can never quite return a <code>1</code> and, because we're rounding down, it's impossible to actually get <code>20</code>. This technique will give us a whole number between <code>0</code> and <code>19</code>.
|
||||
Putting everything together, this is what our code looks like:
|
||||
<code>Math.floor(Math.random() * 20);</code>
|
||||
We are calling <code>Math.random()</code>, multiplying the result by 20, then passing the value to <code>Math.floor()</code> function to round the value down to the nearest whole number.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use this technique to generate and return a random whole number between <code>0</code> and <code>9</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: The result of <code>randomWholeNum</code> should be a whole number.
|
||||
testString: 'assert(typeof randomWholeNum() === "number" && (function(){var r = randomWholeNum();return Math.floor(r) === r;})(), ''The result of <code>randomWholeNum</code> should be a whole number.'');'
|
||||
- text: You should be using <code>Math.random</code> to generate a random number.
|
||||
testString: 'assert(code.match(/Math.random/g).length > 1, ''You should be using <code>Math.random</code> to generate a random number.'');'
|
||||
- text: You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.
|
||||
testString: 'assert(code.match(/\s*?Math.random\s*?\(\s*?\)\s*?\*\s*?10[\D]\s*?/g) || code.match(/\s*?10\s*?\*\s*?Math.random\s*?\(\s*?\)\s*?/g), ''You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.'');'
|
||||
- text: You should use <code>Math.floor</code> to remove the decimal part of the number.
|
||||
testString: 'assert(code.match(/Math.floor/g).length > 1, ''You should use <code>Math.floor</code> to remove the decimal part of the number.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var randomNumberBetween0and19 = Math.floor(Math.random() * 20);
|
||||
|
||||
function randomWholeNum() {
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
return Math.random();
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var randomNumberBetween0and19 = Math.floor(Math.random() * 20);
|
||||
function randomWholeNum() {
|
||||
return Math.floor(Math.random() * 10);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: cf1111c1c12feddfaeb2bdef
|
||||
title: Generate Random Whole Numbers within a Range
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Instead of generating a random number between zero and a given number like we did before, we can generate a random number that falls within a range of two specific numbers.
|
||||
To do this, we'll define a minimum number <code>min</code> and a maximum number <code>max</code>.
|
||||
Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing:
|
||||
<code>Math.floor(Math.random() * (max - min + 1)) + min</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a function called <code>randomRange</code> that takes a range <code>myMin</code> and <code>myMax</code> and returns a random number that's greater than or equal to <code>myMin</code>, and is less than or equal to <code>myMax</code>, inclusive.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.'
|
||||
testString: 'assert(calcMin === 5, ''The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.'');'
|
||||
- text: 'The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.'
|
||||
testString: 'assert(calcMax === 15, ''The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.'');'
|
||||
- text: 'The random number generated by <code>randomRange</code> should be an integer, not a decimal.'
|
||||
testString: 'assert(randomRange(0,1) % 1 === 0 , ''The random number generated by <code>randomRange</code> should be an integer, not a decimal.'');'
|
||||
- text: '<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.'
|
||||
testString: 'assert((function(){if(code.match(/myMax/g).length > 1 && code.match(/myMin/g).length > 2 && code.match(/Math.floor/g) && code.match(/Math.random/g)){return true;}else{return false;}})(), ''<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
function ourRandomRange(ourMin, ourMax) {
|
||||
|
||||
return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;
|
||||
}
|
||||
|
||||
ourRandomRange(1, 9);
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
function randomRange(myMin, myMax) {
|
||||
|
||||
return 0; // Change this line
|
||||
|
||||
}
|
||||
|
||||
// Change these values to test your function
|
||||
var myRandom = randomRange(5, 15);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function randomRange(myMin, myMax) {
|
||||
return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244be
|
||||
title: Global Scope and Functions
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In JavaScript, <dfn>scope</dfn> refers to the visibility of variables. Variables which are defined outside of a function block have <dfn>Global</dfn> scope. This means, they can be seen everywhere in your JavaScript code.
|
||||
Variables which are used without the <code>var</code> keyword are automatically created in the <code>global</code> scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with <code>var</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Using <code>var</code>, declare a <code>global</code> variable <code>myGlobal</code> outside of any function. Initialize it with a value of <code>10</code>.
|
||||
Inside function <code>fun1</code>, assign <code>5</code> to <code>oopsGlobal</code> <strong><em>without</em></strong> using the <code>var</code> keyword.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myGlobal</code> should be defined
|
||||
testString: 'assert(typeof myGlobal != "undefined", ''<code>myGlobal</code> should be defined'');'
|
||||
- text: <code>myGlobal</code> should have a value of <code>10</code>
|
||||
testString: 'assert(myGlobal === 10, ''<code>myGlobal</code> should have a value of <code>10</code>'');'
|
||||
- text: <code>myGlobal</code> should be declared using the <code>var</code> keyword
|
||||
testString: 'assert(/var\s+myGlobal/.test(code), ''<code>myGlobal</code> should be declared using the <code>var</code> keyword'');'
|
||||
- text: <code>oopsGlobal</code> should be a global variable and have a value of <code>5</code>
|
||||
testString: 'assert(typeof oopsGlobal != "undefined" && oopsGlobal === 5, ''<code>oopsGlobal</code> should be a global variable and have a value of <code>5</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Declare your variable here
|
||||
|
||||
|
||||
function fun1() {
|
||||
// Assign 5 to oopsGlobal Here
|
||||
|
||||
}
|
||||
|
||||
// Only change code above this line
|
||||
function fun2() {
|
||||
var output = "";
|
||||
if (typeof myGlobal != "undefined") {
|
||||
output += "myGlobal: " + myGlobal;
|
||||
}
|
||||
if (typeof oopsGlobal != "undefined") {
|
||||
output += " oopsGlobal: " + oopsGlobal;
|
||||
}
|
||||
console.log(output);
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
var logOutput = "";
|
||||
var originalConsole = console
|
||||
function capture() {
|
||||
var nativeLog = console.log;
|
||||
console.log = function (message) {
|
||||
logOutput = message;
|
||||
if(nativeLog.apply) {
|
||||
nativeLog.apply(originalConsole, arguments);
|
||||
} else {
|
||||
var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
|
||||
nativeLog(nativeMsg);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function uncapture() {
|
||||
console.log = originalConsole.log;
|
||||
}
|
||||
var oopsGlobal;
|
||||
capture();
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
// Declare your variable here
|
||||
var myGlobal = 10;
|
||||
|
||||
function fun1() {
|
||||
// Assign 5 to oopsGlobal Here
|
||||
oopsGlobal = 5;
|
||||
}
|
||||
|
||||
// Only change code above this line
|
||||
function fun2() {
|
||||
var output = "";
|
||||
if(typeof myGlobal != "undefined") {
|
||||
output += "myGlobal: " + myGlobal;
|
||||
}
|
||||
if(typeof oopsGlobal != "undefined") {
|
||||
output += " oopsGlobal: " + oopsGlobal;
|
||||
}
|
||||
console.log(output);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244c0
|
||||
title: Global vs. Local Scope in Functions
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
It is possible to have both <dfn>local</dfn> and <dfn>global</dfn> variables with the same name. When you do this, the <code>local</code> variable takes precedence over the <code>global</code> variable.
|
||||
In this example:
|
||||
<blockquote>var someVar = "Hat";<br>function myFun() {<br> var someVar = "Head";<br> return someVar;<br>}</blockquote>
|
||||
The function <code>myFun</code> will return <code>"Head"</code> because the <code>local</code> version of the variable is present.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add a local variable to <code>myOutfit</code> function to override the value of <code>outerWear</code> with <code>"sweater"</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Do not change the value of the global <code>outerWear</code>
|
||||
testString: 'assert(outerWear === "T-Shirt", ''Do not change the value of the global <code>outerWear</code>'');'
|
||||
- text: <code>myOutfit</code> should return <code>"sweater"</code>
|
||||
testString: 'assert(myOutfit() === "sweater", ''<code>myOutfit</code> should return <code>"sweater"</code>'');'
|
||||
- text: Do not change the return statement
|
||||
testString: 'assert(/return outerWear/.test(code), ''Do not change the return statement'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var outerWear = "T-Shirt";
|
||||
|
||||
function myOutfit() {
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
|
||||
// Only change code above this line
|
||||
return outerWear;
|
||||
}
|
||||
|
||||
myOutfit();
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var outerWear = "T-Shirt";
|
||||
function myOutfit() {
|
||||
var outerWear = "sweater";
|
||||
return outerWear;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 5664820f61c48e80c9fa476c
|
||||
title: Golf Code
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the game of <a href="https://en.wikipedia.org/wiki/Golf" target="_blank">golf</a> each hole has a <code>par</code> meaning the average number of <code>strokes</code> a golfer is expected to make in order to sink the ball in a hole to complete the play. Depending on how far above or below <code>par</code> your <code>strokes</code> are, there is a different nickname.
|
||||
Your function will be passed <code>par</code> and <code>strokes</code> arguments. Return the correct string according to this table which lists the strokes in order of priority; top (highest) to bottom (lowest):
|
||||
<table class="table table-striped"><thead><tr><th>Strokes</th><th>Return</th></tr></thead><tbody><tr><td>1</td><td>"Hole-in-one!"</td></tr><tr><td><= par - 2</td><td>"Eagle"</td></tr><tr><td>par - 1</td><td>"Birdie"</td></tr><tr><td>par</td><td>"Par"</td></tr><tr><td>par + 1</td><td>"Bogey"</td></tr><tr><td>par + 2</td><td>"Double Bogey"</td></tr><tr><td>>= par + 3</td><td>"Go Home!"</td></tr></tbody></table>
|
||||
<code>par</code> and <code>strokes</code> will always be numeric and positive. We have added an array of all the names for your convenience.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>golfScore(4, 1)</code> should return "Hole-in-one!"'
|
||||
testString: 'assert(golfScore(4, 1) === "Hole-in-one!", ''<code>golfScore(4, 1)</code> should return "Hole-in-one!"'');'
|
||||
- text: '<code>golfScore(4, 2)</code> should return "Eagle"'
|
||||
testString: 'assert(golfScore(4, 2) === "Eagle", ''<code>golfScore(4, 2)</code> should return "Eagle"'');'
|
||||
- text: '<code>golfScore(5, 2)</code> should return "Eagle"'
|
||||
testString: 'assert(golfScore(5, 2) === "Eagle", ''<code>golfScore(5, 2)</code> should return "Eagle"'');'
|
||||
- text: '<code>golfScore(4, 3)</code> should return "Birdie"'
|
||||
testString: 'assert(golfScore(4, 3) === "Birdie", ''<code>golfScore(4, 3)</code> should return "Birdie"'');'
|
||||
- text: '<code>golfScore(4, 4)</code> should return "Par"'
|
||||
testString: 'assert(golfScore(4, 4) === "Par", ''<code>golfScore(4, 4)</code> should return "Par"'');'
|
||||
- text: '<code>golfScore(1, 1)</code> should return "Hole-in-one!"'
|
||||
testString: 'assert(golfScore(1, 1) === "Hole-in-one!", ''<code>golfScore(1, 1)</code> should return "Hole-in-one!"'');'
|
||||
- text: '<code>golfScore(5, 5)</code> should return "Par"'
|
||||
testString: 'assert(golfScore(5, 5) === "Par", ''<code>golfScore(5, 5)</code> should return "Par"'');'
|
||||
- text: '<code>golfScore(4, 5)</code> should return "Bogey"'
|
||||
testString: 'assert(golfScore(4, 5) === "Bogey", ''<code>golfScore(4, 5)</code> should return "Bogey"'');'
|
||||
- text: '<code>golfScore(4, 6)</code> should return "Double Bogey"'
|
||||
testString: 'assert(golfScore(4, 6) === "Double Bogey", ''<code>golfScore(4, 6)</code> should return "Double Bogey"'');'
|
||||
- text: '<code>golfScore(4, 7)</code> should return "Go Home!"'
|
||||
testString: 'assert(golfScore(4, 7) === "Go Home!", ''<code>golfScore(4, 7)</code> should return "Go Home!"'');'
|
||||
- text: '<code>golfScore(5, 9)</code> should return "Go Home!"'
|
||||
testString: 'assert(golfScore(5, 9) === "Go Home!", ''<code>golfScore(5, 9)</code> should return "Go Home!"'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];
|
||||
function golfScore(par, strokes) {
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
return "Change Me";
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
// Change these values to test
|
||||
golfScore(5, 4);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function golfScore(par, strokes) {
|
||||
if (strokes === 1) {
|
||||
return "Hole-in-one!";
|
||||
}
|
||||
|
||||
if (strokes <= par - 2) {
|
||||
return "Eagle";
|
||||
}
|
||||
|
||||
if (strokes === par - 1) {
|
||||
return "Birdie";
|
||||
}
|
||||
|
||||
if (strokes === par) {
|
||||
return "Par";
|
||||
}
|
||||
|
||||
if (strokes === par + 1) {
|
||||
return "Bogey";
|
||||
}
|
||||
|
||||
if(strokes === par + 2) {
|
||||
return "Double Bogey";
|
||||
}
|
||||
|
||||
return "Go Home!";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244ac
|
||||
title: Increment a Number with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can easily <dfn>increment</dfn> or add one to a variable with the <code>++</code> operator.
|
||||
<code>i++;</code>
|
||||
is the equivalent of
|
||||
<code>i = i + 1;</code>
|
||||
<strong>Note</strong><br>The entire line becomes <code>i++;</code>, eliminating the need for the equal sign.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the code to use the <code>++</code> operator on <code>myVar</code>.
|
||||
<strong>Hint</strong><br>Learn more about <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment_()" target="_blank">Arithmetic operators - Increment (++)</a>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myVar</code> should equal <code>88</code>
|
||||
testString: 'assert(myVar === 88, ''<code>myVar</code> should equal <code>88</code>'');'
|
||||
- text: <code>myVar = myVar + 1;</code> should be changed
|
||||
testString: 'assert(/var\s*myVar\s*=\s*87;\s*\/*.*\s*([+]{2}\s*myVar|myVar\s*[+]{2});/.test(code), ''<code>myVar = myVar + 1;</code> should be changed'');'
|
||||
- text: Use the <code>++</code> operator
|
||||
testString: 'assert(/[+]{2}\s*myVar|myVar\s*[+]{2}/.test(code), ''Use the <code>++</code> operator'');'
|
||||
- text: Do not change code above the line
|
||||
testString: 'assert(/var myVar = 87;/.test(code), ''Do not change code above the line'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myVar = 87;
|
||||
|
||||
// Only change code below this line
|
||||
myVar = myVar + 1;
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myVar = 87;
|
||||
myVar++;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244a9
|
||||
title: Initializing Variables with the Assignment Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
It is common to <dfn>initialize</dfn> a variable to an initial value in the same line as it is declared.
|
||||
<code>var myVar = 0;</code>
|
||||
Creates a new variable called <code>myVar</code> and assigns it an initial value of <code>0</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Define a variable <code>a</code> with <code>var</code> and initialize it to a value of <code>9</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Initialize <code>a</code> to a value of <code>9</code>
|
||||
testString: 'assert(/var\s+a\s*=\s*9\s*/.test(code), ''Initialize <code>a</code> to a value of <code>9</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourVar = 19;
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var a = 9;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244db
|
||||
title: Introducing Else If Statements
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
If you have multiple conditions that need to be addressed, you can chain <code>if</code> statements together with <code>else if</code> statements.
|
||||
<blockquote>if (num > 15) {<br> return "Bigger than 15";<br>} else if (num < 5) {<br> return "Smaller than 5";<br>} else {<br> return "Between 5 and 15";<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Convert the logic to use <code>else if</code> statements.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should have at least two <code>else</code> statements
|
||||
testString: 'assert(code.match(/else/g).length > 1, ''You should have at least two <code>else</code> statements'');'
|
||||
- text: You should have at least two <code>if</code> statements
|
||||
testString: 'assert(code.match(/if/g).length > 1, ''You should have at least two <code>if</code> statements'');'
|
||||
- text: You should have closing and opening curly braces for each condition
|
||||
testString: 'assert(code.match(/if\s*\((.+)\)\s*\{[\s\S]+\}\s*else if\s*\((.+)\)\s*\{[\s\S]+\}\s*else\s*\{[\s\S]+\s*\}/), ''You should have closing and opening curly braces for each condition in your if else statement'');'
|
||||
- text: <code>testElseIf(0)</code> should return "Smaller than 5"
|
||||
testString: 'assert(testElseIf(0) === "Smaller than 5", ''<code>testElseIf(0)</code> should return "Smaller than 5"'');'
|
||||
- text: <code>testElseIf(5)</code> should return "Between 5 and 10"
|
||||
testString: 'assert(testElseIf(5) === "Between 5 and 10", ''<code>testElseIf(5)</code> should return "Between 5 and 10"'');'
|
||||
- text: <code>testElseIf(7)</code> should return "Between 5 and 10"
|
||||
testString: 'assert(testElseIf(7) === "Between 5 and 10", ''<code>testElseIf(7)</code> should return "Between 5 and 10"'');'
|
||||
- text: <code>testElseIf(10)</code> should return "Between 5 and 10"
|
||||
testString: 'assert(testElseIf(10) === "Between 5 and 10", ''<code>testElseIf(10)</code> should return "Between 5 and 10"'');'
|
||||
- text: <code>testElseIf(12)</code> should return "Greater than 10"
|
||||
testString: 'assert(testElseIf(12) === "Greater than 10", ''<code>testElseIf(12)</code> should return "Greater than 10"'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function testElseIf(val) {
|
||||
if (val > 10) {
|
||||
return "Greater than 10";
|
||||
}
|
||||
|
||||
if (val < 5) {
|
||||
return "Smaller than 5";
|
||||
}
|
||||
|
||||
return "Between 5 and 10";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testElseIf(7);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testElseIf(val) {
|
||||
if(val > 10) {
|
||||
return "Greater than 10";
|
||||
} else if(val < 5) {
|
||||
return "Smaller than 5";
|
||||
} else {
|
||||
return "Between 5 and 10";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244da
|
||||
title: Introducing Else Statements
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When a condition for an <code>if</code> statement is true, the block of code following it is executed. What about when that condition is false? Normally nothing would happen. With an <code>else</code> statement, an alternate block of code can be executed.
|
||||
<blockquote>if (num > 10) {<br> return "Bigger than 10";<br>} else {<br> return "10 or Less";<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Combine the <code>if</code> statements into a single <code>if/else</code> statement.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should only have one <code>if</code> statement in the editor
|
||||
testString: 'assert(code.match(/if/g).length === 1, ''You should only have one <code>if</code> statement in the editor'');'
|
||||
- text: You should use an <code>else</code> statement
|
||||
testString: 'assert(/else/g.test(code), ''You should use an <code>else</code> statement'');'
|
||||
- text: <code>testElse(4)</code> should return "5 or Smaller"
|
||||
testString: 'assert(testElse(4) === "5 or Smaller", ''<code>testElse(4)</code> should return "5 or Smaller"'');'
|
||||
- text: <code>testElse(5)</code> should return "5 or Smaller"
|
||||
testString: 'assert(testElse(5) === "5 or Smaller", ''<code>testElse(5)</code> should return "5 or Smaller"'');'
|
||||
- text: <code>testElse(6)</code> should return "Bigger than 5"
|
||||
testString: 'assert(testElse(6) === "Bigger than 5", ''<code>testElse(6)</code> should return "Bigger than 5"'');'
|
||||
- text: <code>testElse(10)</code> should return "Bigger than 5"
|
||||
testString: 'assert(testElse(10) === "Bigger than 5", ''<code>testElse(10)</code> should return "Bigger than 5"'');'
|
||||
- text: Do not change the code above or below the lines.
|
||||
testString: 'assert(/var result = "";/.test(code) && /return result;/.test(code), ''Do not change the code above or below the lines.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function testElse(val) {
|
||||
var result = "";
|
||||
// Only change code below this line
|
||||
|
||||
if (val > 5) {
|
||||
result = "Bigger than 5";
|
||||
}
|
||||
|
||||
if (val <= 5) {
|
||||
result = "5 or Smaller";
|
||||
}
|
||||
|
||||
// Only change code above this line
|
||||
return result;
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
testElse(4);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function testElse(val) {
|
||||
var result = "";
|
||||
if(val > 5) {
|
||||
result = "Bigger than 5";
|
||||
} else {
|
||||
result = "5 or Smaller";
|
||||
}
|
||||
return result;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 56104e9e514f539506016a5c
|
||||
title: Iterate Odd Numbers With a For Loop
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
For loops don't have to iterate one at a time. By changing our <code>final-expression</code>, we can count by even numbers.
|
||||
We'll start at <code>i = 0</code> and loop while <code>i < 10</code>. We'll increment <code>i</code> by 2 each loop with <code>i += 2</code>.
|
||||
<blockquote>var ourArray = [];<br>for (var i = 0; i < 10; i += 2) {<br> ourArray.push(i);<br>}</blockquote>
|
||||
<code>ourArray</code> will now contain <code>[0,2,4,6,8]</code>.
|
||||
Let's change our <code>initialization</code> so we can count by odd numbers.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Push the odd numbers from 1 through 9 to <code>myArray</code> using a <code>for</code> loop.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should be using a <code>for</code> loop for this.
|
||||
testString: 'assert(code.match(/for\s*\(/g).length > 1, ''You should be using a <code>for</code> loop for this.'');'
|
||||
- text: '<code>myArray</code> should equal <code>[1,3,5,7,9]</code>.'
|
||||
testString: 'assert.deepEqual(myArray, [1,3,5,7,9], ''<code>myArray</code> should equal <code>[1,3,5,7,9]</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = [];
|
||||
|
||||
for (var i = 0; i < 10; i += 2) {
|
||||
ourArray.push(i);
|
||||
}
|
||||
|
||||
// Setup
|
||||
var myArray = [];
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
for (var i = 0; i < 10; i += 2) {
|
||||
ourArray.push(i);
|
||||
}
|
||||
var myArray = [];
|
||||
for (var i = 1; i < 10; i += 2) {
|
||||
myArray.push(i);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 5675e877dbd60be8ad28edc6
|
||||
title: Iterate Through an Array with a For Loop
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a <code>for</code> loop. This code will output each element of the array <code>arr</code> to the console:
|
||||
<blockquote>var arr = [10,9,8,7,6];<br>for (var i = 0; i < arr.length; i++) {<br> console.log(arr[i]);<br>}</blockquote>
|
||||
Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our <dfn>condition</dfn> for this loop is <code>i < arr.length</code>, which stops when <code>i</code> is at length - 1.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Declare and initialize a variable <code>total</code> to <code>0</code>. Use a <code>for</code> loop to add the value of each element of the <code>myArr</code> array to <code>total</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>total</code> should be declared and initialized to 0
|
||||
testString: 'assert(code.match(/var.*?total\s*=\s*0.*?;/), ''<code>total</code> should be declared and initialized to 0'');'
|
||||
- text: <code>total</code> should equal 20
|
||||
testString: 'assert(total === 20, ''<code>total</code> should equal 20'');'
|
||||
- text: You should use a <code>for</code> loop to iterate through <code>myArr</code>
|
||||
testString: 'assert(code.match(/for\s*\(/g).length > 1 && code.match(/myArr\s*\[/), ''You should use a <code>for</code> loop to iterate through <code>myArr</code>'');'
|
||||
- text: Do not set <code>total</code> to 20 directly
|
||||
testString: 'assert(!code.match(/total[\s\+\-]*=\s*(\d(?!\s*[;,])|[1-9])/g), ''Do not set <code>total</code> to 20 directly'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArr = [ 9, 10, 11, 12];
|
||||
var ourTotal = 0;
|
||||
|
||||
for (var i = 0; i < ourArr.length; i++) {
|
||||
ourTotal += ourArr[i];
|
||||
}
|
||||
|
||||
// Setup
|
||||
var myArr = [ 2, 3, 4, 5, 6];
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var ourArr = [ 9, 10, 11, 12];
|
||||
var ourTotal = 0;
|
||||
|
||||
for (var i = 0; i < ourArr.length; i++) {
|
||||
ourTotal += ourArr[i];
|
||||
}
|
||||
|
||||
var myArr = [ 2, 3, 4, 5, 6];
|
||||
var total = 0;
|
||||
|
||||
for (var i = 0; i < myArr.length; i++) {
|
||||
total += myArr[i];
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 5a2efd662fb457916e1fe604
|
||||
title: Iterate with JavaScript Do...While Loops
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can run the same code multiple times by using a loop.
|
||||
The next type of loop you will learn is called a "<code>do...while</code>" loop because it first will "<code>do</code>" one pass of the code inside the loop no matter what, and then it runs "<code>while</code>" a specified condition is true and stops once that condition is no longer true. Let's look at an example.
|
||||
<blockquote>var ourArray = [];<br>var i = 0;<br>do {<br> ourArray.push(i);<br> i++;<br>} while (i < 5);</blockquote>
|
||||
This behaves just as you would expect with any other type of loop, and the resulting array will look like <code>[0, 1, 2, 3, 4]</code>. However, what makes the <code>do...while</code> different from other loops is how it behaves when the condition fails on the first check. Let's see this in action.
|
||||
Here is a regular while loop that will run the code in the loop as long as <code>i < 5</code>.
|
||||
<blockquote>var ourArray = []; <br>var i = 5;<br>while (i < 5) {<br> ourArray.push(i);<br> i++;<br>}</blockquote>
|
||||
Notice that we initialize the value of <code>i</code> to be 5. When we execute the next line, we notice that <code>i</code> is not less than 5. So we do not execute the code inside the loop. The result is that <code>ourArray</code> will end up with nothing added to it, so it will still look like this <code>[]</code> when all the code in the example above finishes running.
|
||||
Now, take a look at a <code>do...while</code> loop.
|
||||
<blockquote>var ourArray = []; <br>var i = 5;<br>do {<br> ourArray.push(i);<br> i++;<br>} while (i < 5);</blockquote>
|
||||
In this case, we initialize the value of <code>i</code> as 5, just like we did with the while loop. When we get to the next line, there is no check for the value of <code>i</code>, so we go to the code inside the curly braces and execute it. We will add one element to the array and increment <code>i</code> before we get to the condition check. Then, when we get to checking if <code>i < 5</code> see that <code>i</code> is now 6, which fails the conditional check. So we exit the loop and are done. At the end of the above example, the value of <code>ourArray</code> is <code>[5]</code>.
|
||||
Essentially, a <code>do...while</code> loop ensures that the code inside the loop will run at least once.
|
||||
Let's try getting a <code>do...while</code> loop to work by pushing values to an array.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the <code>while</code> loop in the code to a <code>do...while</code> loop so that the loop will push the number 10 to <code>myArray</code>, and <code>i</code> will be equal to <code>11</code> when your code finishes running.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should be using a <code>do...while</code> loop for this.
|
||||
testString: 'assert(code.match(/do/g), ''You should be using a <code>do...while</code> loop for this.'');'
|
||||
- text: '<code>myArray</code> should equal <code>[10]</code>.'
|
||||
testString: 'assert.deepEqual(myArray, [10], ''<code>myArray</code> should equal <code>[10]</code>.'');'
|
||||
- text: <code>i</code> should equal <code>11</code>
|
||||
testString: 'assert.deepEqual(i, 11, ''<code>i</code> should equal <code>11</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var myArray = [];
|
||||
var i = 10;
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
while (i < 5) {
|
||||
myArray.push(i);
|
||||
i++;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [];
|
||||
var i = 10;
|
||||
do {
|
||||
myArray.push(i);
|
||||
i++;
|
||||
} while (i < 5)
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb5bdef
|
||||
title: Iterate with JavaScript For Loops
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can run the same code multiple times by using a loop.
|
||||
The most common type of JavaScript loop is called a "<code>for loop</code>" because it runs "for" a specific number of times.
|
||||
For loops are declared with three optional expressions separated by semicolons:
|
||||
<code>for ([initialization]; [condition]; [final-expression])</code>
|
||||
The <code>initialization</code> statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable.
|
||||
The <code>condition</code> statement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to <code>true</code>. When <code>condition</code> is <code>false</code> at the start of the iteration, the loop will stop executing. This means if <code>condition</code> starts as <code>false</code>, your loop will never execute.
|
||||
The <code>final-expression</code> is executed at the end of each loop iteration, prior to the next <code>condition</code> check and is usually used to increment or decrement your loop counter.
|
||||
In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i < 5</code> is true. We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.
|
||||
<blockquote>var ourArray = [];<br>for (var i = 0; i < 5; i++) {<br> ourArray.push(i);<br>}</blockquote>
|
||||
<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use a <code>for</code> loop to work to push the values 1 through 5 onto <code>myArray</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should be using a <code>for</code> loop for this.
|
||||
testString: 'assert(code.match(/for\s*\(/g).length > 1, ''You should be using a <code>for</code> loop for this.'');'
|
||||
- text: '<code>myArray</code> should equal <code>[1,2,3,4,5]</code>.'
|
||||
testString: 'assert.deepEqual(myArray, [1,2,3,4,5], ''<code>myArray</code> should equal <code>[1,2,3,4,5]</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = [];
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
ourArray.push(i);
|
||||
}
|
||||
|
||||
// Setup
|
||||
var myArray = [];
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
for (var i = 0; i < 5; i++) {
|
||||
ourArray.push(i);
|
||||
}
|
||||
var myArray = [];
|
||||
for (var i = 1; i < 6; i++) {
|
||||
myArray.push(i);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb1bdef
|
||||
title: Iterate with JavaScript While Loops
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can run the same code multiple times by using a loop.
|
||||
The first type of loop we will learn is called a "<code>while</code>" loop because it runs "while" a specified condition is true and stops once that condition is no longer true.
|
||||
<blockquote>var ourArray = [];<br>var i = 0;<br>while(i < 5) {<br> ourArray.push(i);<br> i++;<br>}</blockquote>
|
||||
Let's try getting a while loop to work by pushing values to an array.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Push the numbers 0 through 4 to <code>myArray</code> using a <code>while</code> loop.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should be using a <code>while</code> loop for this.
|
||||
testString: 'assert(code.match(/while/g), ''You should be using a <code>while</code> loop for this.'');'
|
||||
- text: '<code>myArray</code> should equal <code>[0,1,2,3,4]</code>.'
|
||||
testString: 'assert.deepEqual(myArray, [0,1,2,3,4], ''<code>myArray</code> should equal <code>[0,1,2,3,4]</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var myArray = [];
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [];
|
||||
var i = 0;
|
||||
while(i < 5) {
|
||||
myArray.push(i);
|
||||
i++;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244bf
|
||||
title: Local Scope and Functions
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Variables which are declared within a function, as well as the function parameters have <dfn>local</dfn> scope. That means, they are only visible within that function.
|
||||
Here is a function <code>myTest</code> with a local variable called <code>loc</code>.
|
||||
<blockquote>function myTest() {<br> var loc = "foo";<br> console.log(loc);<br>}<br>myTest(); // logs "foo"<br>console.log(loc); // loc is not defined</blockquote>
|
||||
<code>loc</code> is not defined outside of the function.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Declare a local variable <code>myVar</code> inside <code>myLocalScope</code>. Run the tests and then follow the instructions commented out in the editor.
|
||||
<strong>Hint</strong><br>Refreshing the page may help if you get stuck.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: No global <code>myVar</code> variable
|
||||
testString: 'assert(typeof myVar === ''undefined'', ''No global <code>myVar</code> variable'');'
|
||||
- text: Add a local <code>myVar</code> variable
|
||||
testString: 'assert(/var\s+myVar/.test(code), ''Add a local <code>myVar</code> variable'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function myLocalScope() {
|
||||
'use strict'; // you shouldn't need to edit this line
|
||||
|
||||
console.log(myVar);
|
||||
}
|
||||
myLocalScope();
|
||||
|
||||
// Run and check the console
|
||||
// myVar is not defined outside of myLocalScope
|
||||
console.log(myVar);
|
||||
|
||||
// Now remove the console log line to pass the test
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
var logOutput = "";
|
||||
var originalConsole = console
|
||||
function capture() {
|
||||
var nativeLog = console.log;
|
||||
console.log = function (message) {
|
||||
logOutput = message;
|
||||
if(nativeLog.apply) {
|
||||
nativeLog.apply(originalConsole, arguments);
|
||||
} else {
|
||||
var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
|
||||
nativeLog(nativeMsg);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function uncapture() {
|
||||
console.log = originalConsole.log;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function myLocalScope() {
|
||||
'use strict';
|
||||
|
||||
var myVar;
|
||||
console.log(myVar);
|
||||
}
|
||||
myLocalScope();
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 5690307fddb111c6084545d7
|
||||
title: Logical Order in If Else Statements
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Order is important in <code>if</code>, <code>else if</code> statements.
|
||||
The function is executed from top to bottom so you will want to be careful of what statement comes first.
|
||||
Take these two functions as an example.
|
||||
Here's the first:
|
||||
<blockquote>function foo(x) {<br> if (x < 1) {<br> return "Less than one";<br> } else if (x < 2) {<br> return "Less than two";<br> } else {<br> return "Greater than or equal to two";<br> }<br>}</blockquote>
|
||||
And the second just switches the order of the statements:
|
||||
<blockquote>function bar(x) {<br> if (x < 2) {<br> return "Less than two";<br> } else if (x < 1) {<br> return "Less than one";<br> } else {<br> return "Greater than or equal to two";<br> }<br>}</blockquote>
|
||||
While these two functions look nearly identical if we pass a number to both we get different outputs.
|
||||
<blockquote>foo(0) // "Less than one"<br>bar(0) // "Less than two"</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the order of logic in the function so that it will return the correct statements in all cases.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>orderMyLogic(4)</code> should return "Less than 5"
|
||||
testString: 'assert(orderMyLogic(4) === "Less than 5", ''<code>orderMyLogic(4)</code> should return "Less than 5"'');'
|
||||
- text: <code>orderMyLogic(6)</code> should return "Less than 10"
|
||||
testString: 'assert(orderMyLogic(6) === "Less than 10", ''<code>orderMyLogic(6)</code> should return "Less than 10"'');'
|
||||
- text: <code>orderMyLogic(11)</code> should return "Greater than or equal to 10"
|
||||
testString: 'assert(orderMyLogic(11) === "Greater than or equal to 10", ''<code>orderMyLogic(11)</code> should return "Greater than or equal to 10"'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function orderMyLogic(val) {
|
||||
if (val < 10) {
|
||||
return "Less than 10";
|
||||
} else if (val < 5) {
|
||||
return "Less than 5";
|
||||
} else {
|
||||
return "Greater than or equal to 10";
|
||||
}
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
orderMyLogic(7);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function orderMyLogic(val) {
|
||||
if(val < 5) {
|
||||
return "Less than 5";
|
||||
} else if (val < 10) {
|
||||
return "Less than 10";
|
||||
} else {
|
||||
return "Greater than or equal to 10";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392cc
|
||||
title: Manipulate Arrays With pop()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Another way to change the data in an array is with the <code>.pop()</code> function.
|
||||
<code>.pop()</code> is used to "pop" a value off of the end of an array. We can store this "popped off" value by assigning it to a variable. In other words, <code>.pop()</code> removes the last element from an array and returns that element.
|
||||
Any type of entry can be "popped" off of an array - numbers, strings, even nested arrays.
|
||||
<blockquote><code>var threeArr = [1, 4, 6];<br> var oneDown = threeArr.pop();<br> console.log(oneDown); // Returns 6<br> console.log(threeArr); // Returns [1, 4]</code></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use the <code>.pop()</code> function to remove the last item from <code>myArray</code>, assigning the "popped off" value to <code>removedFromMyArray</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>myArray</code> should only contain <code>[["John", 23]]</code>.'
|
||||
testString: 'assert((function(d){if(d[0][0] == ''John'' && d[0][1] === 23 && d[1] == undefined){return true;}else{return false;}})(myArray), ''<code>myArray</code> should only contain <code>[["John", 23]]</code>.'');'
|
||||
- text: Use <code>pop()</code> on <code>myArray</code>
|
||||
testString: 'assert(/removedFromMyArray\s*=\s*myArray\s*.\s*pop\s*(\s*)/.test(code), ''Use <code>pop()</code> on <code>myArray</code>'');'
|
||||
- text: '<code>removedFromMyArray</code> should only contain <code>["cat", 2]</code>.'
|
||||
testString: 'assert((function(d){if(d[0] == ''cat'' && d[1] === 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray), ''<code>removedFromMyArray</code> should only contain <code>["cat", 2]</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = [1,2,3];
|
||||
var removedFromOurArray = ourArray.pop();
|
||||
// removedFromOurArray now equals 3, and ourArray now equals [1,2]
|
||||
|
||||
// Setup
|
||||
var myArray = [["John", 23], ["cat", 2]];
|
||||
|
||||
// Only change code below this line.
|
||||
var removedFromMyArray;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [["John", 23], ["cat", 2]];
|
||||
var removedFromMyArray = myArray.pop();
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392cb
|
||||
title: Manipulate Arrays With push()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
An easy way to append data to the end of an array is via the <code>push()</code> function.
|
||||
<code>.push()</code> takes one or more <dfn>parameters</dfn> and "pushes" them onto the end of the array.
|
||||
<blockquote>var arr = [1,2,3];<br>arr.push(4);<br>// arr is now [1,2,3,4]</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Push <code>["dog", 3]</code> onto the end of the <code>myArray</code> variable.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>myArray</code> should now equal <code>[["John", 23], ["cat", 2], ["dog", 3]]</code>.'
|
||||
testString: 'assert((function(d){if(d[2] != undefined && d[0][0] == ''John'' && d[0][1] === 23 && d[2][0] == ''dog'' && d[2][1] === 3 && d[2].length == 2){return true;}else{return false;}})(myArray), ''<code>myArray</code> should now equal <code>[["John", 23], ["cat", 2], ["dog", 3]]</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = ["Stimpson", "J", "cat"];
|
||||
ourArray.push(["happy", "joy"]);
|
||||
// ourArray now equals ["Stimpson", "J", "cat", ["happy", "joy"]]
|
||||
|
||||
// Setup
|
||||
var myArray = [["John", 23], ["cat", 2]];
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [["John", 23], ["cat", 2]];
|
||||
myArray.push(["dog",3]);
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392cd
|
||||
title: Manipulate Arrays With shift()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>pop()</code> always removes the last element of an array. What if you want to remove the first?
|
||||
That's where <code>.shift()</code> comes in. It works just like <code>.pop()</code>, except it removes the first element instead of the last.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use the <code>.shift()</code> function to remove the first item from <code>myArray</code>, assigning the "shifted off" value to <code>removedFromMyArray</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>myArray</code> should now equal <code>[["dog", 3]]</code>.'
|
||||
testString: 'assert((function(d){if(d[0][0] == ''dog'' && d[0][1] === 3 && d[1] == undefined){return true;}else{return false;}})(myArray), ''<code>myArray</code> should now equal <code>[["dog", 3]]</code>.'');'
|
||||
- text: '<code>removedFromMyArray</code> should contain <code>["John", 23]</code>.'
|
||||
testString: 'assert((function(d){if(d[0] == ''John'' && d[1] === 23 && typeof removedFromMyArray === ''object''){return true;}else{return false;}})(removedFromMyArray), ''<code>removedFromMyArray</code> should contain <code>["John", 23]</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = ["Stimpson", "J", ["cat"]];
|
||||
var removedFromOurArray = ourArray.shift();
|
||||
// removedFromOurArray now equals "Stimpson" and ourArray now equals ["J", ["cat"]].
|
||||
|
||||
// Setup
|
||||
var myArray = [["John", 23], ["dog", 3]];
|
||||
|
||||
// Only change code below this line.
|
||||
var removedFromMyArray;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [["John", 23], ["dog", 3]];
|
||||
|
||||
// Only change code below this line.
|
||||
var removedFromMyArray = myArray.shift();
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392ce
|
||||
title: Manipulate Arrays With unshift()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Not only can you <code>shift</code> elements off of the beginning of an array, you can also <code>unshift</code> elements to the beginning of an array i.e. add elements in front of the array.
|
||||
<code>.unshift()</code> works exactly like <code>.push()</code>, but instead of adding the element at the end of the array, <code>unshift()</code> adds the element at the beginning of the array.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add <code>["Paul",35]</code> to the beginning of the <code>myArray</code> variable using <code>unshift()</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>myArray</code> should now have [["Paul", 35], ["dog", 3]].'
|
||||
testString: 'assert((function(d){if(typeof d[0] === "object" && d[0][0] == ''Paul'' && d[0][1] === 35 && d[1][0] != undefined && d[1][0] == ''dog'' && d[1][1] != undefined && d[1][1] == 3){return true;}else{return false;}})(myArray), ''<code>myArray</code> should now have [["Paul", 35], ["dog", 3]].'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = ["Stimpson", "J", "cat"];
|
||||
ourArray.shift(); // ourArray now equals ["J", "cat"]
|
||||
ourArray.unshift("Happy");
|
||||
// ourArray now equals ["Happy", "J", "cat"]
|
||||
|
||||
// Setup
|
||||
var myArray = [["John", 23], ["dog", 3]];
|
||||
myArray.shift();
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [["John", 23], ["dog", 3]];
|
||||
myArray.shift();
|
||||
myArray.unshift(["Paul", 35]);
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244cb
|
||||
title: Manipulating Complex Objects
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Sometimes you may want to store data in a flexible <dfn>Data Structure</dfn>. A JavaScript object is one way to handle flexible data. They allow for arbitrary combinations of <dfn>strings</dfn>, <dfn>numbers</dfn>, <dfn>booleans</dfn>, <dfn>arrays</dfn>, <dfn>functions</dfn>, and <dfn>objects</dfn>.
|
||||
Here's an example of a complex data structure:
|
||||
<blockquote>var ourMusic = [<br> {<br> "artist": "Daft Punk",<br> "title": "Homework",<br> "release_year": 1997,<br> "formats": [ <br> "CD", <br> "Cassette", <br> "LP"<br> ],<br> "gold": true<br> }<br>];</blockquote>
|
||||
This is an array which contains one object inside. The object has various pieces of <dfn>metadata</dfn> about an album. It also has a nested <code>"formats"</code> array. If you want to add more album records, you can do this by adding records to the top level array.
|
||||
Objects hold data in a property, which has a key-value format. In the example above, <code>"artist": "Daft Punk"</code> is a property that has a key of <code>"artist"</code> and a value of <code>"Daft Punk"</code>.
|
||||
<a href='http://www.json.org/' target=_blank>JavaScript Object Notation</a> or <code>JSON</code> is a related data interchange format used to store data.
|
||||
<blockquote>{<br> "artist": "Daft Punk",<br> "title": "Homework",<br> "release_year": 1997,<br> "formats": [ <br> "CD",<br> "Cassette",<br> "LP"<br> ],<br> "gold": true<br>}</blockquote>
|
||||
<strong>Note</strong><br>You will need to place a comma after every object in the array, unless it is the last object in the array.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add a new album to the <code>myMusic</code> array. Add <code>artist</code> and <code>title</code> strings, <code>release_year</code> number, and a <code>formats</code> array of strings.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myMusic</code> should be an array
|
||||
testString: 'assert(Array.isArray(myMusic), ''<code>myMusic</code> should be an array'');'
|
||||
- text: <code>myMusic</code> should have at least two elements
|
||||
testString: 'assert(myMusic.length > 1, ''<code>myMusic</code> should have at least two elements'');'
|
||||
- text: '<code>myMusic[1]</code> should be an object'
|
||||
testString: 'assert(typeof myMusic[1] === ''object'', ''<code>myMusic[1]</code> should be an object'');'
|
||||
- text: '<code>myMusic[1]</code> should have at least 4 properties'
|
||||
testString: 'assert(Object.keys(myMusic[1]).length > 3, ''<code>myMusic[1]</code> should have at least 4 properties'');'
|
||||
- text: '<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string'
|
||||
testString: 'assert(myMusic[1].hasOwnProperty(''artist'') && typeof myMusic[1].artist === ''string'', ''<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string'');'
|
||||
- text: '<code>myMusic[1]</code> should contain a <code>title</code> property which is a string'
|
||||
testString: 'assert(myMusic[1].hasOwnProperty(''title'') && typeof myMusic[1].title === ''string'', ''<code>myMusic[1]</code> should contain a <code>title</code> property which is a string'');'
|
||||
- text: '<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number'
|
||||
testString: 'assert(myMusic[1].hasOwnProperty(''release_year'') && typeof myMusic[1].release_year === ''number'', ''<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number'');'
|
||||
- text: '<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array'
|
||||
testString: 'assert(myMusic[1].hasOwnProperty(''formats'') && Array.isArray(myMusic[1].formats), ''<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array'');'
|
||||
- text: <code>formats</code> should be an array of strings with at least two elements
|
||||
testString: 'assert(myMusic[1].formats.every(function(item) { return (typeof item === "string")}) && myMusic[1].formats.length > 1, ''<code>formats</code> should be an array of strings with at least two elements'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myMusic = [
|
||||
{
|
||||
"artist": "Billy Joel",
|
||||
"title": "Piano Man",
|
||||
"release_year": 1973,
|
||||
"formats": [
|
||||
"CD",
|
||||
"8T",
|
||||
"LP"
|
||||
],
|
||||
"gold": true
|
||||
}
|
||||
// Add record here
|
||||
];
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myMusic = [
|
||||
{
|
||||
"artist": "Billy Joel",
|
||||
"title": "Piano Man",
|
||||
"release_year": 1973,
|
||||
"formats": [
|
||||
"CS",
|
||||
"8T",
|
||||
"LP" ],
|
||||
"gold": true
|
||||
},
|
||||
{
|
||||
"artist": "ABBA",
|
||||
"title": "Ring Ring",
|
||||
"release_year": 1973,
|
||||
"formats": [
|
||||
"CS",
|
||||
"8T",
|
||||
"LP",
|
||||
"CD",
|
||||
]
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,442 @@
|
||||
{
|
||||
"name": "Basic JavaScript",
|
||||
"dashedName": "basic-javascript",
|
||||
"order": 1,
|
||||
"time": "10 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "javascript-algorithms-and-data-structures",
|
||||
"superOrder": 2,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"bd7123c9c441eddfaeb4bdef",
|
||||
"Comment Your JavaScript Code"
|
||||
],
|
||||
[
|
||||
"bd7123c9c443eddfaeb5bdef",
|
||||
"Declare JavaScript Variables"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244a8",
|
||||
"Storing Values with the Assignment Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244a9",
|
||||
"Initializing Variables with the Assignment Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244aa",
|
||||
"Understanding Uninitialized Variables"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244ab",
|
||||
"Understanding Case Sensitivity in Variables"
|
||||
],
|
||||
[
|
||||
"cf1111c1c11feddfaeb3bdef",
|
||||
"Add Two Numbers with JavaScript"
|
||||
],
|
||||
[
|
||||
"cf1111c1c11feddfaeb4bdef",
|
||||
"Subtract One Number from Another with JavaScript"
|
||||
],
|
||||
[
|
||||
"cf1231c1c11feddfaeb5bdef",
|
||||
"Multiply Two Numbers with JavaScript"
|
||||
],
|
||||
[
|
||||
"cf1111c1c11feddfaeb6bdef",
|
||||
"Divide One Number by Another with JavaScript"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244ac",
|
||||
"Increment a Number with JavaScript"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244ad",
|
||||
"Decrement a Number with JavaScript"
|
||||
],
|
||||
[
|
||||
"cf1391c1c11feddfaeb4bdef",
|
||||
"Create Decimal Numbers with JavaScript"
|
||||
],
|
||||
[
|
||||
"bd7993c9c69feddfaeb7bdef",
|
||||
"Multiply Two Decimals with JavaScript"
|
||||
],
|
||||
[
|
||||
"bd7993c9ca9feddfaeb7bdef",
|
||||
"Divide One Decimal by Another with JavaScript"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244ae",
|
||||
"Finding a Remainder in JavaScript"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244af",
|
||||
"Compound Assignment With Augmented Addition"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244b0",
|
||||
"Compound Assignment With Augmented Subtraction"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244b1",
|
||||
"Compound Assignment With Augmented Multiplication"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244b2",
|
||||
"Compound Assignment With Augmented Division"
|
||||
],
|
||||
[
|
||||
"bd7123c9c444eddfaeb5bdef",
|
||||
"Declare String Variables"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244b5",
|
||||
"Escaping Literal Quotes in Strings"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244b4",
|
||||
"Quoting Strings with Single Quotes"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244b6",
|
||||
"Escape Sequences in Strings"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244b7",
|
||||
"Concatenating Strings with Plus Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244b8",
|
||||
"Concatenating Strings with the Plus Equals Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244b9",
|
||||
"Constructing Strings with Variables"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244ed",
|
||||
"Appending Variables to Strings"
|
||||
],
|
||||
[
|
||||
"bd7123c9c448eddfaeb5bdef",
|
||||
"Find the Length of a String"
|
||||
],
|
||||
[
|
||||
"bd7123c9c549eddfaeb5bdef",
|
||||
"Use Bracket Notation to Find the First Character in a String"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244ba",
|
||||
"Understand String Immutability"
|
||||
],
|
||||
[
|
||||
"bd7123c9c450eddfaeb5bdef",
|
||||
"Use Bracket Notation to Find the Nth Character in a String"
|
||||
],
|
||||
[
|
||||
"bd7123c9c451eddfaeb5bdef",
|
||||
"Use Bracket Notation to Find the Last Character in a String"
|
||||
],
|
||||
[
|
||||
"bd7123c9c452eddfaeb5bdef",
|
||||
"Use Bracket Notation to Find the Nth-to-Last Character in a String"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244bb",
|
||||
"Word Blanks"
|
||||
],
|
||||
[
|
||||
"bd7993c9c69feddfaeb8bdef",
|
||||
"Store Multiple Values in one Variable using JavaScript Arrays"
|
||||
],
|
||||
[
|
||||
"cf1111c1c11feddfaeb7bdef",
|
||||
"Nest one Array within Another Array"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392ca",
|
||||
"Access Array Data with Indexes"
|
||||
],
|
||||
[
|
||||
"cf1111c1c11feddfaeb8bdef",
|
||||
"Modify Array Data With Indexes"
|
||||
],
|
||||
[
|
||||
"56592a60ddddeae28f7aa8e1",
|
||||
"Access Multi-Dimensional Arrays With Indexes"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392cb",
|
||||
"Manipulate Arrays With push()"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392cc",
|
||||
"Manipulate Arrays With pop()"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392cd",
|
||||
"Manipulate Arrays With shift()"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392ce",
|
||||
"Manipulate Arrays With unshift()"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244bc",
|
||||
"Shopping List"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392cf",
|
||||
"Write Reusable JavaScript with Functions"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244bd",
|
||||
"Passing Values to Functions with Arguments"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244be",
|
||||
"Global Scope and Functions"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244bf",
|
||||
"Local Scope and Functions"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244c0",
|
||||
"Global vs. Local Scope in Functions"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244c2",
|
||||
"Return a Value from a Function with Return"
|
||||
],
|
||||
[
|
||||
"598e8944f009e646fc236146",
|
||||
"Understanding Undefined Value returned from a Function"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244c3",
|
||||
"Assignment with a Returned Value"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244c6",
|
||||
"Stand in Line"
|
||||
],
|
||||
[
|
||||
"bd7123c9c441eddfaeb5bdef",
|
||||
"Understanding Boolean Values"
|
||||
],
|
||||
[
|
||||
"cf1111c1c12feddfaeb3bdef",
|
||||
"Use Conditional Logic with If Statements"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d0",
|
||||
"Comparison with the Equality Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d1",
|
||||
"Comparison with the Strict Equality Operator"
|
||||
],
|
||||
[
|
||||
"599a789b454f2bbd91a3ff4d",
|
||||
"Practice comparing different values"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d2",
|
||||
"Comparison with the Inequality Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d3",
|
||||
"Comparison with the Strict Inequality Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d4",
|
||||
"Comparison with the Greater Than Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d5",
|
||||
"Comparison with the Greater Than Or Equal To Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d6",
|
||||
"Comparison with the Less Than Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d7",
|
||||
"Comparison with the Less Than Or Equal To Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d8",
|
||||
"Comparisons with the Logical And Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244d9",
|
||||
"Comparisons with the Logical Or Operator"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244da",
|
||||
"Introducing Else Statements"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244db",
|
||||
"Introducing Else If Statements"
|
||||
],
|
||||
[
|
||||
"5690307fddb111c6084545d7",
|
||||
"Logical Order in If Else Statements"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244dc",
|
||||
"Chaining If Else Statements"
|
||||
],
|
||||
[
|
||||
"5664820f61c48e80c9fa476c",
|
||||
"Golf Code"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244dd",
|
||||
"Selecting from Many Options with Switch Statements"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244de",
|
||||
"Adding a Default Option in Switch Statements"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244df",
|
||||
"Multiple Identical Options in Switch Statements"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244e0",
|
||||
"Replacing If Else Chains with Switch"
|
||||
],
|
||||
[
|
||||
"5679ceb97cbaa8c51670a16b",
|
||||
"Returning Boolean Values from Functions"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244c4",
|
||||
"Return Early Pattern for Functions"
|
||||
],
|
||||
[
|
||||
"565bbe00e9cc8ac0725390f4",
|
||||
"Counting Cards"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392d0",
|
||||
"Build JavaScript Objects"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244c7",
|
||||
"Accessing Object Properties with Dot Notation"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244c8",
|
||||
"Accessing Object Properties with Bracket Notation"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244c9",
|
||||
"Accessing Object Properties with Variables"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392d1",
|
||||
"Updating Object Properties"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392d2",
|
||||
"Add New Properties to a JavaScript Object"
|
||||
],
|
||||
[
|
||||
"56bbb991ad1ed5201cd392d3",
|
||||
"Delete Properties from a JavaScript Object"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244ca",
|
||||
"Using Objects for Lookups"
|
||||
],
|
||||
[
|
||||
"567af2437cbaa8c51670a16c",
|
||||
"Testing Objects for Properties"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244cb",
|
||||
"Manipulating Complex Objects"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244cc",
|
||||
"Accessing Nested Objects"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244cd",
|
||||
"Accessing Nested Arrays"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244cf",
|
||||
"Record Collection"
|
||||
],
|
||||
[
|
||||
"cf1111c1c11feddfaeb1bdef",
|
||||
"Iterate with JavaScript While Loops"
|
||||
],
|
||||
[
|
||||
"cf1111c1c11feddfaeb5bdef",
|
||||
"Iterate with JavaScript For Loops"
|
||||
],
|
||||
[
|
||||
"56104e9e514f539506016a5c",
|
||||
"Iterate Odd Numbers With a For Loop"
|
||||
],
|
||||
[
|
||||
"56105e7b514f539506016a5e",
|
||||
"Count Backwards With a For Loop"
|
||||
],
|
||||
[
|
||||
"5675e877dbd60be8ad28edc6",
|
||||
"Iterate Through an Array with a For Loop"
|
||||
],
|
||||
[
|
||||
"56533eb9ac21ba0edf2244e1",
|
||||
"Nesting For Loops"
|
||||
],
|
||||
[
|
||||
"5a2efd662fb457916e1fe604",
|
||||
"Iterate with JavaScript Do...While Loops"
|
||||
],
|
||||
[
|
||||
"5688e62ea601b2482ff8422b",
|
||||
"Profile Lookup"
|
||||
],
|
||||
[
|
||||
"cf1111c1c11feddfaeb9bdef",
|
||||
"Generate Random Fractions with JavaScript"
|
||||
],
|
||||
[
|
||||
"cf1111c1c12feddfaeb1bdef",
|
||||
"Generate Random Whole Numbers with JavaScript"
|
||||
],
|
||||
[
|
||||
"cf1111c1c12feddfaeb2bdef",
|
||||
"Generate Random Whole Numbers within a Range"
|
||||
],
|
||||
[
|
||||
"587d7b7e367417b2b2512b23",
|
||||
"Use the parseInt Function"
|
||||
],
|
||||
[
|
||||
"587d7b7e367417b2b2512b22",
|
||||
"Use the parseInt Function with a Radix"
|
||||
],
|
||||
[
|
||||
"587d7b7e367417b2b2512b24",
|
||||
"Use the Conditional (Ternary) Operator"
|
||||
],
|
||||
[
|
||||
"587d7b7e367417b2b2512b21",
|
||||
"Use Multiple Conditional (Ternary) Operators"
|
||||
]
|
||||
],
|
||||
"helpRoom": "HelpJavaScript",
|
||||
"fileName": "02-javascript-algorithms-and-data-structures/basic-javascript.json"
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb8bdef
|
||||
title: Modify Array Data With Indexes
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Unlike strings, the entries of arrays are <dfn>mutable</dfn> and can be changed freely.
|
||||
<strong>Example</strong>
|
||||
<blockquote>var ourArray = [50,40,30];<br>ourArray[0] = 15; // equals [15,40,30]</blockquote>
|
||||
<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0]</code>. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Modify the data stored at index <code>0</code> of <code>myArray</code> to a value of <code>45</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>myArray</code> should now be [45,64,99].'
|
||||
testString: 'assert((function(){if(typeof myArray != ''undefined'' && myArray[0] == 45 && myArray[1] == 64 && myArray[2] == 99){return true;}else{return false;}})(), ''<code>myArray</code> should now be [45,64,99].'');'
|
||||
- text: You should be using correct index to modify the value in <code>myArray</code>.
|
||||
testString: 'assert((function(){if(code.match(/myArray\[0\]\s*=\s*/g)){return true;}else{return false;}})(), ''You should be using correct index to modify the value in <code>myArray</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = [18,64,99];
|
||||
ourArray[1] = 45; // ourArray now equals [18,45,99].
|
||||
|
||||
// Setup
|
||||
var myArray = [18,64,99];
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [18,64,99];
|
||||
myArray[0] = 45;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244df
|
||||
title: Multiple Identical Options in Switch Statements
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
If the <code>break</code> statement is omitted from a <code>switch</code> statement's <code>case</code>, the following <code>case</code> statement(s) are executed until a <code>break</code> is encountered. If you have multiple inputs with the same output, you can represent them in a <code>switch</code> statement like this:
|
||||
<blockquote>switch(val) {<br> case 1:<br> case 2:<br> case 3:<br> result = "1, 2, or 3";<br> break;<br> case 4:<br> result = "4 alone";<br>}</blockquote>
|
||||
Cases for 1, 2, and 3 will all produce the same result.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Write a switch statement to set <code>answer</code> for the following ranges:<br><code>1-3</code> - "Low"<br><code>4-6</code> - "Mid"<br><code>7-9</code> - "High"
|
||||
<strong>Note</strong><br>You will need to have a <code>case</code> statement for each number in the range.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>sequentialSizes(1)</code> should return "Low"
|
||||
testString: 'assert(sequentialSizes(1) === "Low", ''<code>sequentialSizes(1)</code> should return "Low"'');'
|
||||
- text: <code>sequentialSizes(2)</code> should return "Low"
|
||||
testString: 'assert(sequentialSizes(2) === "Low", ''<code>sequentialSizes(2)</code> should return "Low"'');'
|
||||
- text: <code>sequentialSizes(3)</code> should return "Low"
|
||||
testString: 'assert(sequentialSizes(3) === "Low", ''<code>sequentialSizes(3)</code> should return "Low"'');'
|
||||
- text: <code>sequentialSizes(4)</code> should return "Mid"
|
||||
testString: 'assert(sequentialSizes(4) === "Mid", ''<code>sequentialSizes(4)</code> should return "Mid"'');'
|
||||
- text: <code>sequentialSizes(5)</code> should return "Mid"
|
||||
testString: 'assert(sequentialSizes(5) === "Mid", ''<code>sequentialSizes(5)</code> should return "Mid"'');'
|
||||
- text: <code>sequentialSizes(6)</code> should return "Mid"
|
||||
testString: 'assert(sequentialSizes(6) === "Mid", ''<code>sequentialSizes(6)</code> should return "Mid"'');'
|
||||
- text: <code>sequentialSizes(7)</code> should return "High"
|
||||
testString: 'assert(sequentialSizes(7) === "High", ''<code>sequentialSizes(7)</code> should return "High"'');'
|
||||
- text: <code>sequentialSizes(8)</code> should return "High"
|
||||
testString: 'assert(sequentialSizes(8) === "High", ''<code>sequentialSizes(8)</code> should return "High"'');'
|
||||
- text: <code>sequentialSizes(9)</code> should return "High"
|
||||
testString: 'assert(sequentialSizes(9) === "High", ''<code>sequentialSizes(9)</code> should return "High"'');'
|
||||
- text: You should not use any <code>if</code> or <code>else</code> statements
|
||||
testString: 'assert(!/else/g.test(code) || !/if/g.test(code), ''You should not use any <code>if</code> or <code>else</code> statements'');'
|
||||
- text: You should have nine <code>case</code> statements
|
||||
testString: 'assert(code.match(/case/g).length === 9, ''You should have nine <code>case</code> statements'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function sequentialSizes(val) {
|
||||
var answer = "";
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
|
||||
// Only change code above this line
|
||||
return answer;
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
sequentialSizes(1);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function sequentialSizes(val) {
|
||||
var answer = "";
|
||||
|
||||
switch(val) {
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
answer = "Low";
|
||||
break;
|
||||
case 4:
|
||||
case 5:
|
||||
case 6:
|
||||
answer = "Mid";
|
||||
break;
|
||||
case 7:
|
||||
case 8:
|
||||
case 9:
|
||||
answer = "High";
|
||||
}
|
||||
|
||||
return answer;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: bd7993c9c69feddfaeb7bdef
|
||||
title: Multiply Two Decimals with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers.
|
||||
Let's multiply two decimals together to get their product.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the <code>0.0</code> so that product will equal <code>5.0</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: The variable <code>product</code> should equal <code>5.0</code>.
|
||||
testString: 'assert(product === 5.0, ''The variable <code>product</code> should equal <code>5.0</code>.'');'
|
||||
- text: You should use the <code>*</code> operator
|
||||
testString: 'assert(/\*/.test(code), ''You should use the <code>*</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var product = 2.0 * 0.0;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var product = 2.0 * 2.5;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: cf1231c1c11feddfaeb5bdef
|
||||
title: Multiply Two Numbers with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We can also multiply one number by another.
|
||||
JavaScript uses the <code>*</code> symbol for multiplication of two numbers.
|
||||
|
||||
<strong>Example</strong>
|
||||
<blockquote>myVar = 13 * 13; // assigned 169</blockquote>
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the <code>0</code> so that product will equal <code>80</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Make the variable <code>product</code> equal 80
|
||||
testString: 'assert(product === 80,''Make the variable <code>product</code> equal 80'');'
|
||||
- text: Use the <code>*</code> operator
|
||||
testString: 'assert(/\*/.test(code), ''Use the <code>*</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var product = 8 * 0;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var product = 8 * 10;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb7bdef
|
||||
title: Nest one Array within Another Array
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can also nest arrays within other arrays, like this: <code>[["Bulls", 23], ["White Sox", 45]]</code>. This is also called a <dfn>Multi-dimensional Array<dfn>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a nested array called <code>myArray</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myArray</code> should have at least one array nested within another array.
|
||||
testString: 'assert(Array.isArray(myArray) && myArray.some(Array.isArray), ''<code>myArray</code> should have at least one array nested within another array.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = [["the universe", 42], ["everything", 101010]];
|
||||
|
||||
// Only change code below this line.
|
||||
var myArray = [];
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = [[1,2,3]];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244e1
|
||||
title: Nesting For Loops
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example:
|
||||
<blockquote>var arr = [<br> [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i < arr.length; i++) {<br> for (var j=0; j < arr[i].length; j++) {<br> console.log(arr[i][j]);<br> }<br>}</blockquote>
|
||||
This outputs each sub-element in <code>arr</code> one at a time. Note that for the inner loop, we are checking the <code>.length</code> of <code>arr[i]</code>, since <code>arr[i]</code> is itself an array.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Modify function <code>multiplyAll</code> so that it multiplies the <code>product</code> variable by each number in the sub-arrays of <code>arr</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>'
|
||||
testString: 'assert(multiplyAll([[1],[2],[3]]) === 6, ''<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>'');'
|
||||
- text: '<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>'
|
||||
testString: 'assert(multiplyAll([[1,2],[3,4],[5,6,7]]) === 5040, ''<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>'');'
|
||||
- text: '<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>'
|
||||
testString: 'assert(multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]) === 54, ''<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function multiplyAll(arr) {
|
||||
var product = 1;
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
return product;
|
||||
}
|
||||
|
||||
// Modify values below to test your code
|
||||
multiplyAll([[1,2],[3,4],[5,6,7]]);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function multiplyAll(arr) {
|
||||
var product = 1;
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
for (var j = 0; j < arr[i].length; j++) {
|
||||
product *= arr[i][j];
|
||||
}
|
||||
}
|
||||
return product;
|
||||
}
|
||||
|
||||
multiplyAll([[1,2],[3,4],[5,6,7]]);
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244bd
|
||||
title: Passing Values to Functions with Arguments
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<dfn>Parameters</dfn> are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or <dfn>"passed"</dfn>) into a function when it is called are known as <dfn>arguments</dfn>.
|
||||
Here is a function with two parameters, <code>param1</code> and <code>param2</code>:
|
||||
<blockquote>function testFun(param1, param2) {<br> console.log(param1, param2);<br>}</blockquote>
|
||||
Then we can call <code>testFun</code>:
|
||||
<code>testFun("Hello", "World");</code>
|
||||
We have passed two arguments, <code>"Hello"</code> and <code>"World"</code>. Inside the function, <code>param1</code> will equal "Hello" and <code>param2</code> will equal "World". Note that you could call <code>testFun</code> again with different arguments and the parameters would take on the value of the new arguments.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<ol><li>Create a function called <code>functionWithArgs</code> that accepts two arguments and outputs their sum to the dev console.</li><li>Call the function with two numbers as arguments.</li></ol>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>functionWithArgs</code> should be a function
|
||||
testString: 'assert(typeof functionWithArgs === ''function'', ''<code>functionWithArgs</code> should be a function'');'
|
||||
- text: '<code>functionWithArgs(1,2)</code> should output <code>3</code>'
|
||||
testString: 'if(typeof functionWithArgs === "function") { capture(); functionWithArgs(1,2); uncapture(); } assert(logOutput == 3, ''<code>functionWithArgs(1,2)</code> should output <code>3</code>'');'
|
||||
- text: '<code>functionWithArgs(7,9)</code> should output <code>16</code>'
|
||||
testString: 'if(typeof functionWithArgs === "function") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16, ''<code>functionWithArgs(7,9)</code> should output <code>16</code>'');'
|
||||
- text: Call <code>functionWithArgs</code> with two numbers after you define it.
|
||||
testString: 'assert(/^\s*functionWithArgs\s*\(\s*\d+\s*,\s*\d+\s*\)\s*;/m.test(code), ''Call <code>functionWithArgs</code> with two numbers after you define it.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
function ourFunctionWithArgs(a, b) {
|
||||
console.log(a - b);
|
||||
}
|
||||
ourFunctionWithArgs(10, 5); // Outputs 5
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
var logOutput = "";
|
||||
var originalConsole = console
|
||||
function capture() {
|
||||
var nativeLog = console.log;
|
||||
console.log = function (message) {
|
||||
if(message) logOutput = JSON.stringify(message).trim();
|
||||
if(nativeLog.apply) {
|
||||
nativeLog.apply(originalConsole, arguments);
|
||||
} else {
|
||||
var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
|
||||
nativeLog(nativeMsg);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function uncapture() {
|
||||
console.log = originalConsole.log;
|
||||
}
|
||||
|
||||
capture();
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function functionWithArgs(a, b) {
|
||||
console.log(a + b);
|
||||
}
|
||||
functionWithArgs(10, 5);
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 599a789b454f2bbd91a3ff4d
|
||||
title: Practice comparing different values
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the last two challenges, we learned about the equality operator (<code>==</code>) and the strict equality operator (<code>===</code>). Let's do a quick review and practice using these operators some more.
|
||||
If the values being compared are not of the same type, the equality operator will perform a type conversion, and then evaluate the values. However, the strict equality operator will compare both the data type and value as-is, without converting one type to the other.
|
||||
<strong>Examples</strong>
|
||||
<blockquote>3 == '3' // returns true because JavaScript performs type conversion from string to number<br>3 === '3' // returns false because the types are different and type conversion is not performed</blockquote>
|
||||
<strong>Note</strong><br>In JavaScript, you can determine the type of a variable or a value with the <code>typeof</code> operator, as follows:
|
||||
<blockquote>typeof 3 // returns 'number'<br>typeof '3' // returns 'string'</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
The <code>compareEquality</code> function in the editor compares two values using the <code>equality operator</code>. Modify the function so that it returns "Equal" only when the values are strictly equal.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>compareEquality(10, "10")</code> should return "Not Equal"'
|
||||
testString: 'assert(compareEquality(10, "10") === "Not Equal", ''<code>compareEquality(10, "10")</code> should return "Not Equal"'');'
|
||||
- text: '<code>compareEquality("20", 20)</code> should return "Not Equal"'
|
||||
testString: 'assert(compareEquality("20", 20) === "Not Equal", ''<code>compareEquality("20", 20)</code> should return "Not Equal"'');'
|
||||
- text: You should use the <code>===</code> operator
|
||||
testString: 'assert(code.match(/===/g), ''You should use the <code>===</code> operator'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
function compareEquality(a, b) {
|
||||
if (a == b) { // Change this line
|
||||
return "Equal";
|
||||
}
|
||||
return "Not Equal";
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
compareEquality(10, "10");
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function compareEquality(a,b) {
|
||||
if (a === b) {
|
||||
return "Equal";
|
||||
}
|
||||
return "Not Equal";
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 5688e62ea601b2482ff8422b
|
||||
title: Profile Lookup
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We have an array of objects representing different people in our contacts lists.
|
||||
A <code>lookUpProfile</code> function that takes <code>name</code> and a property (<code>prop</code>) as arguments has been pre-written for you.
|
||||
The function should check if <code>name</code> is an actual contact's <code>firstName</code> and the given property (<code>prop</code>) is a property of that contact.
|
||||
If both are true, then return the "value" of that property.
|
||||
If <code>name</code> does not correspond to any contacts then return <code>"No such contact"</code>
|
||||
If <code>prop</code> does not correspond to any valid properties of a contact found to match <code>name</code> then return <code>"No such property"</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>"Kristian", "lastName"</code> should return <code>"Vos"</code>'
|
||||
testString: 'assert(lookUpProfile(''Kristian'',''lastName'') === "Vos", ''<code>"Kristian", "lastName"</code> should return <code>"Vos"</code>'');'
|
||||
- text: '<code>"Sherlock", "likes"</code> should return <code>["Intriguing Cases", "Violin"]</code>'
|
||||
testString: 'assert.deepEqual(lookUpProfile("Sherlock", "likes"), ["Intriguing Cases", "Violin"], ''<code>"Sherlock", "likes"</code> should return <code>["Intriguing Cases", "Violin"]</code>'');'
|
||||
- text: '<code>"Harry","likes"</code> should return an array'
|
||||
testString: 'assert(typeof lookUpProfile("Harry", "likes") === "object", ''<code>"Harry","likes"</code> should return an array'');'
|
||||
- text: '<code>"Bob", "number"</code> should return "No such contact"'
|
||||
testString: 'assert(lookUpProfile("Bob", "number") === "No such contact", ''<code>"Bob", "number"</code> should return "No such contact"'');'
|
||||
- text: '<code>"Bob", "potato"</code> should return "No such contact"'
|
||||
testString: 'assert(lookUpProfile("Bob", "potato") === "No such contact", ''<code>"Bob", "potato"</code> should return "No such contact"'');'
|
||||
- text: '<code>"Akira", "address"</code> should return "No such property"'
|
||||
testString: 'assert(lookUpProfile("Akira", "address") === "No such property", ''<code>"Akira", "address"</code> should return "No such property"'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
//Setup
|
||||
var contacts = [
|
||||
{
|
||||
"firstName": "Akira",
|
||||
"lastName": "Laine",
|
||||
"number": "0543236543",
|
||||
"likes": ["Pizza", "Coding", "Brownie Points"]
|
||||
},
|
||||
{
|
||||
"firstName": "Harry",
|
||||
"lastName": "Potter",
|
||||
"number": "0994372684",
|
||||
"likes": ["Hogwarts", "Magic", "Hagrid"]
|
||||
},
|
||||
{
|
||||
"firstName": "Sherlock",
|
||||
"lastName": "Holmes",
|
||||
"number": "0487345643",
|
||||
"likes": ["Intriguing Cases", "Violin"]
|
||||
},
|
||||
{
|
||||
"firstName": "Kristian",
|
||||
"lastName": "Vos",
|
||||
"number": "unknown",
|
||||
"likes": ["JavaScript", "Gaming", "Foxes"]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
function lookUpProfile(name, prop){
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
// Change these values to test your function
|
||||
lookUpProfile("Akira", "likes");
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var contacts = [
|
||||
{
|
||||
"firstName": "Akira",
|
||||
"lastName": "Laine",
|
||||
"number": "0543236543",
|
||||
"likes": ["Pizza", "Coding", "Brownie Points"]
|
||||
},
|
||||
{
|
||||
"firstName": "Harry",
|
||||
"lastName": "Potter",
|
||||
"number": "0994372684",
|
||||
"likes": ["Hogwarts", "Magic", "Hagrid"]
|
||||
},
|
||||
{
|
||||
"firstName": "Sherlock",
|
||||
"lastName": "Holmes",
|
||||
"number": "0487345643",
|
||||
"likes": ["Intriguing Cases", "Violin"]
|
||||
},
|
||||
{
|
||||
"firstName": "Kristian",
|
||||
"lastName": "Vos",
|
||||
"number": "unknown",
|
||||
"likes": ["JavaScript", "Gaming", "Foxes"]
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
//Write your function in between these comments
|
||||
function lookUpProfile(name, prop){
|
||||
for(var i in contacts){
|
||||
if(contacts[i].firstName === name) {
|
||||
return contacts[i][prop] || "No such property";
|
||||
}
|
||||
}
|
||||
return "No such contact";
|
||||
}
|
||||
//Write your function in between these comments
|
||||
|
||||
lookUpProfile("Akira", "likes");
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b4
|
||||
title: Quoting Strings with Single Quotes
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<dfn>String</dfn> values in JavaScript may be written with single or double quotes, as long as you start and end with the same type of quote. Unlike some other programming languages, single and double quotes work the same in JavaScript.
|
||||
<blockquote>doubleQuoteStr = "This is a string"; <br/>singleQuoteStr = 'This is also a string';</blockquote>
|
||||
The reason why you might want to use one type of quote over the other is if you want to use both in a string. This might happen if you want to save a conversation in a string and have the conversation in quotes. Another use for it would be saving an <code><a></code> tag with various attributes in quotes, all within a string.
|
||||
<blockquote>conversation = 'Finn exclaims to Jake, "Algebraic!"';</blockquote>
|
||||
However, this becomes a problem if you need to use the outermost quotes within it. Remember, a string has the same kind of quote at the beginning and end. But if you have that same quote somewhere in the middle, the string will stop early and throw an error.
|
||||
<blockquote>goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"'; <br/>badStr = 'Finn responds, "Let's go!"'; // Throws an error</blockquote>
|
||||
In the <dfn>goodStr</dfn> above, you can use both quotes safely by using the backslash <code>\</code> as an escape character.
|
||||
<strong>Note</strong><br/>The backslash <code>\</code> should not be be confused with the forward slash <code>/</code>. They do not do the same thing.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the provided string to a string with single quotes at the beginning and end and no escape characters.
|
||||
Right now, the <code><a></code> tag in the string uses double quotes everywhere. You will need to change the outer quotes to single quotes so you can remove the escape characters.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Remove all the <code>backslashes</code> (<code>\</code>)
|
||||
testString: 'assert(!/\\/g.test(code) && myStr.match(''\\s*<a href\\s*=\\s*"http://www.example.com"\\s*target\\s*=\\s*"_blank">\\s*Link\\s*</a>\\s*''), ''Remove all the <code>backslashes</code> (<code>\</code>)'');'
|
||||
- text: 'You should have two single quotes <code>'</code> and four double quotes <code>"</code>'
|
||||
testString: 'assert(code.match(/"/g).length === 4 && code.match(/''/g).length === 2, ''You should have two single quotes <code>'</code> and four double quotes <code>"</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myStr = "<a href=\"http://www.example.com\" target=\"_blank\">Link</a>";
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,159 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244cf
|
||||
title: Record Collection
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You are given a JSON object representing a part of your musical album collection. Each album has several properties and a unique id number as its key. Not all albums have complete information.
|
||||
Write a function which takes an album's <code>id</code> (like <code>2548</code>), a property <code>prop</code> (like <code>"artist"</code> or <code>"tracks"</code>), and a <code>value</code> (like <code>"Addicted to Love"</code>) to modify the data in this collection.
|
||||
If <code>prop</code> isn't <code>"tracks"</code> and <code>value</code> isn't empty (<code>""</code>), update or set the <code>value</code> for that record album's property.
|
||||
Your function must always return the entire collection object.
|
||||
There are several rules for handling incomplete data:
|
||||
If <code>prop</code> is <code>"tracks"</code> but the album doesn't have a <code>"tracks"</code> property, create an empty array before adding the new value to the album's corresponding property.
|
||||
If <code>prop</code> is <code>"tracks"</code> and <code>value</code> isn't empty (<code>""</code>), push the <code>value</code> onto the end of the album's existing <code>tracks</code> array.
|
||||
If <code>value</code> is empty (<code>""</code>), delete the given <code>prop</code> property from the album.
|
||||
<strong>Hints</strong><br>Use <code>bracket notation</code> when <a href="javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">accessing object properties with variables</a>.
|
||||
Push is an array method you can read about on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a>.
|
||||
You may refer back to <a href="javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">Manipulating Complex Objects</a> Introducing JavaScript Object Notation (JSON) for a refresher.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'After <code>updateRecords(5439, "artist", "ABBA")</code>, <code>artist</code> should be <code>"ABBA"</code>'
|
||||
testString: 'collection = collectionCopy; assert(updateRecords(5439, "artist", "ABBA")[5439]["artist"] === "ABBA", ''After <code>updateRecords(5439, "artist", "ABBA")</code>, <code>artist</code> should be <code>"ABBA"</code>'');'
|
||||
- text: 'After <code>updateRecords(5439, "tracks", "Take a Chance on Me")</code>, <code>tracks</code> should have <code>"Take a Chance on Me"</code> as the last element.'
|
||||
testString: 'assert(updateRecords(5439, "tracks", "Take a Chance on Me")[5439]["tracks"].pop() === "Take a Chance on Me", ''After <code>updateRecords(5439, "tracks", "Take a Chance on Me")</code>, <code>tracks</code> should have <code>"Take a Chance on Me"</code> as the last element.'');'
|
||||
- text: 'After <code>updateRecords(2548, "artist", "")</code>, <code>artist</code> should not be set'
|
||||
testString: 'updateRecords(2548, "artist", ""); assert(!collection[2548].hasOwnProperty("artist"), ''After <code>updateRecords(2548, "artist", "")</code>, <code>artist</code> should not be set'');'
|
||||
- text: 'After <code>updateRecords(1245, "tracks", "Addicted to Love")</code>, <code>tracks</code> should have <code>"Addicted to Love"</code> as the last element.'
|
||||
testString: 'assert(updateRecords(1245, "tracks", "Addicted to Love")[1245]["tracks"].pop() === "Addicted to Love", ''After <code>updateRecords(1245, "tracks", "Addicted to Love")</code>, <code>tracks</code> should have <code>"Addicted to Love"</code> as the last element.'');'
|
||||
- text: 'After <code>updateRecords(2468, "tracks", "Free")</code>, <code>tracks</code> should have <code>"1999"</code> as the first element.'
|
||||
testString: 'assert(updateRecords(2468, "tracks", "Free")[2468]["tracks"][0] === "1999", ''After <code>updateRecords(2468, "tracks", "Free")</code>, <code>tracks</code> should have <code>"1999"</code> as the first element.'');'
|
||||
- text: 'After <code>updateRecords(2548, "tracks", "")</code>, <code>tracks</code> should not be set'
|
||||
testString: 'updateRecords(2548, "tracks", ""); assert(!collection[2548].hasOwnProperty("tracks"), ''After <code>updateRecords(2548, "tracks", "")</code>, <code>tracks</code> should not be set'');'
|
||||
- text: 'After <code>updateRecords(1245, "album", "Riptide")</code>, <code>album</code> should be <code>"Riptide"</code>'
|
||||
testString: 'assert(updateRecords(1245, "album", "Riptide")[1245]["album"] === "Riptide", ''After <code>updateRecords(1245, "album", "Riptide")</code>, <code>album</code> should be <code>"Riptide"</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var collection = {
|
||||
"2548": {
|
||||
"album": "Slippery When Wet",
|
||||
"artist": "Bon Jovi",
|
||||
"tracks": [
|
||||
"Let It Rock",
|
||||
"You Give Love a Bad Name"
|
||||
]
|
||||
},
|
||||
"2468": {
|
||||
"album": "1999",
|
||||
"artist": "Prince",
|
||||
"tracks": [
|
||||
"1999",
|
||||
"Little Red Corvette"
|
||||
]
|
||||
},
|
||||
"1245": {
|
||||
"artist": "Robert Palmer",
|
||||
"tracks": [ ]
|
||||
},
|
||||
"5439": {
|
||||
"album": "ABBA Gold"
|
||||
}
|
||||
};
|
||||
// Keep a copy of the collection for tests
|
||||
var collectionCopy = JSON.parse(JSON.stringify(collection));
|
||||
|
||||
// Only change code below this line
|
||||
function updateRecords(id, prop, value) {
|
||||
|
||||
|
||||
return collection;
|
||||
}
|
||||
|
||||
// Alter values below to test your code
|
||||
updateRecords(5439, "artist", "ABBA");
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var collection = {
|
||||
2548: {
|
||||
album: "Slippery When Wet",
|
||||
artist: "Bon Jovi",
|
||||
tracks: [
|
||||
"Let It Rock",
|
||||
"You Give Love a Bad Name"
|
||||
]
|
||||
},
|
||||
2468: {
|
||||
album: "1999",
|
||||
artist: "Prince",
|
||||
tracks: [
|
||||
"1999",
|
||||
"Little Red Corvette"
|
||||
]
|
||||
},
|
||||
1245: {
|
||||
artist: "Robert Palmer",
|
||||
tracks: [ ]
|
||||
},
|
||||
5439: {
|
||||
album: "ABBA Gold"
|
||||
}
|
||||
};
|
||||
// Keep a copy of the collection for tests
|
||||
var collectionCopy = JSON.parse(JSON.stringify(collection));
|
||||
|
||||
// Only change code below this line
|
||||
function updateRecords(id, prop, value) {
|
||||
if(value === "") delete collection[id][prop];
|
||||
else if(prop === "tracks") {
|
||||
collection[id][prop] = collection[id][prop] || [];
|
||||
collection[id][prop].push(value);
|
||||
} else {
|
||||
collection[id][prop] = value;
|
||||
}
|
||||
|
||||
return collection;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244e0
|
||||
title: Replacing If Else Chains with Switch
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
If you have many options to choose from, a <code>switch</code> statement can be easier to write than many chained <code>if</code>/<code>else if</code> statements. The following:
|
||||
<blockquote>if (val === 1) {<br> answer = "a";<br>} else if (val === 2) {<br> answer = "b";<br>} else {<br> answer = "c";<br>}</blockquote>
|
||||
can be replaced with:
|
||||
<blockquote>switch(val) {<br> case 1:<br> answer = "a";<br> break;<br> case 2:<br> answer = "b";<br> break;<br> default:<br> answer = "c";<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the chained <code>if</code>/<code>else if</code> statements into a <code>switch</code> statement.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should not use any <code>else</code> statements anywhere in the editor
|
||||
testString: 'assert(!/else/g.test(code), ''You should not use any <code>else</code> statements anywhere in the editor'');'
|
||||
- text: You should not use any <code>if</code> statements anywhere in the editor
|
||||
testString: 'assert(!/if/g.test(code), ''You should not use any <code>if</code> statements anywhere in the editor'');'
|
||||
- text: You should have at least four <code>break</code> statements
|
||||
testString: 'assert(code.match(/break/g).length >= 4, ''You should have at least four <code>break</code> statements'');'
|
||||
- text: <code>chainToSwitch("bob")</code> should be "Marley"
|
||||
testString: 'assert(chainToSwitch("bob") === "Marley", ''<code>chainToSwitch("bob")</code> should be "Marley"'');'
|
||||
- text: <code>chainToSwitch(42)</code> should be "The Answer"
|
||||
testString: 'assert(chainToSwitch(42) === "The Answer", ''<code>chainToSwitch(42)</code> should be "The Answer"'');'
|
||||
- text: '<code>chainToSwitch(1)</code> should be "There is no #1"'
|
||||
testString: 'assert(chainToSwitch(1) === "There is no #1", ''<code>chainToSwitch(1)</code> should be "There is no #1"'');'
|
||||
- text: <code>chainToSwitch(99)</code> should be "Missed me by this much!"
|
||||
testString: 'assert(chainToSwitch(99) === "Missed me by this much!", ''<code>chainToSwitch(99)</code> should be "Missed me by this much!"'');'
|
||||
- text: <code>chainToSwitch(7)</code> should be "Ate Nine"
|
||||
testString: 'assert(chainToSwitch(7) === "Ate Nine", ''<code>chainToSwitch(7)</code> should be "Ate Nine"'');'
|
||||
- text: <code>chainToSwitch("John")</code> should be "" (empty string)
|
||||
testString: 'assert(chainToSwitch("John") === "", ''<code>chainToSwitch("John")</code> should be "" (empty string)'');'
|
||||
- text: <code>chainToSwitch(156)</code> should be "" (empty string)
|
||||
testString: 'assert(chainToSwitch(156) === "", ''<code>chainToSwitch(156)</code> should be "" (empty string)'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function chainToSwitch(val) {
|
||||
var answer = "";
|
||||
// Only change code below this line
|
||||
|
||||
if (val === "bob") {
|
||||
answer = "Marley";
|
||||
} else if (val === 42) {
|
||||
answer = "The Answer";
|
||||
} else if (val === 1) {
|
||||
answer = "There is no #1";
|
||||
} else if (val === 99) {
|
||||
answer = "Missed me by this much!";
|
||||
} else if (val === 7) {
|
||||
answer = "Ate Nine";
|
||||
}
|
||||
|
||||
// Only change code above this line
|
||||
return answer;
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
chainToSwitch(7);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function chainToSwitch(val) {
|
||||
var answer = "";
|
||||
|
||||
switch(val) {
|
||||
case "bob":
|
||||
answer = "Marley";
|
||||
break;
|
||||
case 42:
|
||||
answer = "The Answer";
|
||||
break;
|
||||
case 1:
|
||||
answer = "There is no #1";
|
||||
break;
|
||||
case 99:
|
||||
answer = "Missed me by this much!";
|
||||
break;
|
||||
case 7:
|
||||
answer = "Ate Nine";
|
||||
}
|
||||
return answer;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244c2
|
||||
title: Return a Value from a Function with Return
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We can pass values into a function with <dfn>arguments</dfn>. You can use a <code>return</code> statement to send a value back out of a function.
|
||||
<strong>Example</strong>
|
||||
<blockquote>function plusThree(num) {<br> return num + 3;<br>}<br>var answer = plusThree(5); // 8</blockquote>
|
||||
<code>plusThree</code> takes an <dfn>argument</dfn> for <code>num</code> and returns a value equal to <code>num + 3</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a function <code>timesFive</code> that accepts one argument, multiplies it by <code>5</code>, and returns the new value. See the last line in the editor for an example of how you can test your <code>timesFive</code> function.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>timesFive</code> should be a function
|
||||
testString: 'assert(typeof timesFive === ''function'', ''<code>timesFive</code> should be a function'');'
|
||||
- text: <code>timesFive(5)</code> should return <code>25</code>
|
||||
testString: 'assert(timesFive(5) === 25, ''<code>timesFive(5)</code> should return <code>25</code>'');'
|
||||
- text: <code>timesFive(2)</code> should return <code>10</code>
|
||||
testString: 'assert(timesFive(2) === 10, ''<code>timesFive(2)</code> should return <code>10</code>'');'
|
||||
- text: <code>timesFive(0)</code> should return <code>0</code>
|
||||
testString: 'assert(timesFive(0) === 0, ''<code>timesFive(0)</code> should return <code>0</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
function minusSeven(num) {
|
||||
return num - 7;
|
||||
}
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
|
||||
console.log(minusSeven(10));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function timesFive(num) {
|
||||
return num * 5;
|
||||
}
|
||||
timesFive(10);
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244c4
|
||||
title: Return Early Pattern for Functions
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When a <code>return</code> statement is reached, the execution of the current function stops and control returns to the calling location.
|
||||
<strong>Example</strong>
|
||||
<blockquote>function myFun() {<br> console.log("Hello");<br> return "World";<br> console.log("byebye")<br>}<br>myFun();</blockquote>
|
||||
The above outputs "Hello" to the console, returns "World", but <code>"byebye"</code> is never output, because the function exits at the <code>return</code> statement.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Modify the function <code>abTest</code> so that if <code>a</code> or <code>b</code> are less than <code>0</code> the function will immediately exit with a value of <code>undefined</code>.
|
||||
<strong>Hint</strong><br>Remember that <a href='http://www.freecodecamp.org/challenges/understanding-uninitialized-variables' target='_blank'><code>undefined</code> is a keyword</a>, not a string.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>abTest(2,2)</code> should return a number'
|
||||
testString: 'assert(typeof abTest(2,2) === ''number'' , ''<code>abTest(2,2)</code> should return a number'');'
|
||||
- text: '<code>abTest(2,2)</code> should return <code>8</code>'
|
||||
testString: 'assert(abTest(2,2) === 8 , ''<code>abTest(2,2)</code> should return <code>8</code>'');'
|
||||
- text: '<code>abTest(-2,2)</code> should return <code>undefined</code>'
|
||||
testString: 'assert(abTest(-2,2) === undefined , ''<code>abTest(-2,2)</code> should return <code>undefined</code>'');'
|
||||
- text: '<code>abTest(2,-2)</code> should return <code>undefined</code>'
|
||||
testString: 'assert(abTest(2,-2) === undefined , ''<code>abTest(2,-2)</code> should return <code>undefined</code>'');'
|
||||
- text: '<code>abTest(2,8)</code> should return <code>18</code>'
|
||||
testString: 'assert(abTest(2,8) === 18 , ''<code>abTest(2,8)</code> should return <code>18</code>'');'
|
||||
- text: '<code>abTest(3,3)</code> should return <code>12</code>'
|
||||
testString: 'assert(abTest(3,3) === 12 , ''<code>abTest(3,3)</code> should return <code>12</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
function abTest(a, b) {
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
|
||||
}
|
||||
|
||||
// Change values below to test your code
|
||||
abTest(2,2);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function abTest(a, b) {
|
||||
if(a < 0 || b < 0) {
|
||||
return undefined;
|
||||
}
|
||||
return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5679ceb97cbaa8c51670a16b
|
||||
title: Returning Boolean Values from Functions
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You may recall from <a href="waypoint-comparison-with-the-equality-operator" target="_blank">Comparison with the Equality Operator</a> that all comparison operators return a boolean <code>true</code> or <code>false</code> value.
|
||||
Sometimes people use an if/else statement to do a comparison, like this:
|
||||
<blockquote>function isEqual(a,b) {<br> if (a === b) {<br> return true;<br> } else {<br> return false;<br> }<br>}</blockquote>
|
||||
But there's a better way to do this. Since <code>===</code> returns <code>true</code> or <code>false</code>, we can return the result of the comparison:
|
||||
<blockquote>function isEqual(a,b) {<br> return a === b;<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Fix the function <code>isLess</code> to remove the <code>if/else</code> statements.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>isLess(10,15)</code> should return <code>true</code>'
|
||||
testString: 'assert(isLess(10,15) === true, ''<code>isLess(10,15)</code> should return <code>true</code>'');'
|
||||
- text: '<code>isLess(15,10)</code> should return <code>false</code>'
|
||||
testString: 'assert(isLess(15, 10) === false, ''<code>isLess(15,10)</code> should return <code>false</code>'');'
|
||||
- text: You should not use any <code>if</code> or <code>else</code> statements
|
||||
testString: 'assert(!/if|else/g.test(code), ''You should not use any <code>if</code> or <code>else</code> statements'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function isLess(a, b) {
|
||||
// Fix this code
|
||||
if (a < b) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Change these values to test
|
||||
isLess(10, 15);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function isLess(a, b) {
|
||||
return a < b;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244dd
|
||||
title: Selecting from Many Options with Switch Statements
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
If you have many options to choose from, use a <code>switch</code> statement. A <code>switch</code> statement tests a value and can have many <code>case</code> statements which define various possible values. Statements are executed from the first matched <code>case</code> value until a <code>break</code> is encountered.
|
||||
Here is a <dfn>pseudocode</dfn> example:
|
||||
<blockquote>switch(num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> case valueN:<br> statementN;<br> break;<br>}</blockquote>
|
||||
<code>case</code> values are tested with strict equality (<code>===</code>). The <code>break</code> tells JavaScript to stop executing statements. If the <code>break</code> is omitted, the next statement will be executed.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Write a switch statement which tests <code>val</code> and sets <code>answer</code> for the following conditions:<br><code>1</code> - "alpha"<br><code>2</code> - "beta"<br><code>3</code> - "gamma"<br><code>4</code> - "delta"
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>caseInSwitch(1)</code> should have a value of "alpha"
|
||||
testString: 'assert(caseInSwitch(1) === "alpha", ''<code>caseInSwitch(1)</code> should have a value of "alpha"'');'
|
||||
- text: <code>caseInSwitch(2)</code> should have a value of "beta"
|
||||
testString: 'assert(caseInSwitch(2) === "beta", ''<code>caseInSwitch(2)</code> should have a value of "beta"'');'
|
||||
- text: <code>caseInSwitch(3)</code> should have a value of "gamma"
|
||||
testString: 'assert(caseInSwitch(3) === "gamma", ''<code>caseInSwitch(3)</code> should have a value of "gamma"'');'
|
||||
- text: <code>caseInSwitch(4)</code> should have a value of "delta"
|
||||
testString: 'assert(caseInSwitch(4) === "delta", ''<code>caseInSwitch(4)</code> should have a value of "delta"'');'
|
||||
- text: You should not use any <code>if</code> or <code>else</code> statements
|
||||
testString: 'assert(!/else/g.test(code) || !/if/g.test(code), ''You should not use any <code>if</code> or <code>else</code> statements'');'
|
||||
- text: You should have at least 3 <code>break</code> statements
|
||||
testString: 'assert(code.match(/break/g).length > 2, ''You should have at least 3 <code>break</code> statements'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function caseInSwitch(val) {
|
||||
var answer = "";
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
|
||||
// Only change code above this line
|
||||
return answer;
|
||||
}
|
||||
|
||||
// Change this value to test
|
||||
caseInSwitch(1);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function caseInSwitch(val) {
|
||||
var answer = "";
|
||||
|
||||
switch(val) {
|
||||
case 1:
|
||||
answer = "alpha";
|
||||
break;
|
||||
case 2:
|
||||
answer = "beta";
|
||||
break;
|
||||
case 3:
|
||||
answer = "gamma";
|
||||
break;
|
||||
case 4:
|
||||
answer = "delta";
|
||||
}
|
||||
return answer;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244bc
|
||||
title: Shopping List
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Create a shopping list in the variable <code>myList</code>. The list should be a multi-dimensional array containing several sub-arrays.
|
||||
The first element in each sub-array should contain a string with the name of the item. The second element should be a number representing the quantity i.e.
|
||||
<code>["Chocolate Bar", 15]</code>
|
||||
There should be at least 5 sub-arrays in the list.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myList</code> should be an array
|
||||
testString: 'assert(isArray, ''<code>myList</code> should be an array'');'
|
||||
- text: The first elements in each of your sub-arrays must all be strings
|
||||
testString: 'assert(hasString, ''The first elements in each of your sub-arrays must all be strings'');'
|
||||
- text: The second elements in each of your sub-arrays must all be numbers
|
||||
testString: 'assert(hasNumber, ''The second elements in each of your sub-arrays must all be numbers'');'
|
||||
- text: You must have at least 5 items in your list
|
||||
testString: 'assert(count > 4, ''You must have at least 5 items in your list'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myList = [];
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myList = [
|
||||
["Candy", 10],
|
||||
["Potatoes", 12],
|
||||
["Eggs", 12],
|
||||
["Catfood", 1],
|
||||
["Toads", 9]
|
||||
];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244c6
|
||||
title: Stand in Line
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In Computer Science a <dfn>queue</dfn> is an abstract <dfn>Data Structure</dfn> where items are kept in order. New items can be added at the back of the <code>queue</code> and old items are taken off from the front of the <code>queue</code>.
|
||||
Write a function <code>nextInLine</code> which takes an array (<code>arr</code>) and a number (<code>item</code>) as arguments.
|
||||
Add the number to the end of the array, then remove the first element of the array.
|
||||
The <code>nextInLine</code> function should then return the element that was removed.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>nextInLine([], 5)</code> should return a number.'
|
||||
testString: 'assert.isNumber(nextInLine([],5), ''<code>nextInLine([], 5)</code> should return a number.'');'
|
||||
- text: '<code>nextInLine([], 1)</code> should return <code>1</code>'
|
||||
testString: 'assert(nextInLine([],1) === 1, ''<code>nextInLine([], 1)</code> should return <code>1</code>'');'
|
||||
- text: '<code>nextInLine([2], 1)</code> should return <code>2</code>'
|
||||
testString: 'assert(nextInLine([2],1) === 2, ''<code>nextInLine([2], 1)</code> should return <code>2</code>'');'
|
||||
- text: '<code>nextInLine([5,6,7,8,9], 1)</code> should return <code>5</code>'
|
||||
testString: 'assert(nextInLine([5,6,7,8,9],1) === 5, ''<code>nextInLine([5,6,7,8,9], 1)</code> should return <code>5</code>'');'
|
||||
- text: 'After <code>nextInLine(testArr, 10)</code>, <code>testArr[4]</code> should be <code>10</code>'
|
||||
testString: 'nextInLine(testArr, 10); assert(testArr[4] === 10, ''After <code>nextInLine(testArr, 10)</code>, <code>testArr[4]</code> should be <code>10</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function nextInLine(arr, item) {
|
||||
// Your code here
|
||||
|
||||
return item; // Change this line
|
||||
}
|
||||
|
||||
// Test Setup
|
||||
var testArr = [1,2,3,4,5];
|
||||
|
||||
// Display Code
|
||||
console.log("Before: " + JSON.stringify(testArr));
|
||||
console.log(nextInLine(testArr, 6)); // Modify this line to test
|
||||
console.log("After: " + JSON.stringify(testArr));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
var logOutput = [];
|
||||
var originalConsole = console
|
||||
function capture() {
|
||||
var nativeLog = console.log;
|
||||
console.log = function (message) {
|
||||
logOutput.push(message);
|
||||
if(nativeLog.apply) {
|
||||
nativeLog.apply(originalConsole, arguments);
|
||||
} else {
|
||||
var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
|
||||
nativeLog(nativeMsg);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function uncapture() {
|
||||
console.log = originalConsole.log;
|
||||
}
|
||||
|
||||
capture();
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var testArr = [ 1,2,3,4,5];
|
||||
|
||||
function nextInLine(arr, item) {
|
||||
arr.push(item);
|
||||
return arr.shift();
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: bd7993c9c69feddfaeb8bdef
|
||||
title: Store Multiple Values in one Variable using JavaScript Arrays
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
With JavaScript <code>array</code> variables, we can store several pieces of data in one place.
|
||||
You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry, like this:
|
||||
<code>var sandwich = ["peanut butter", "jelly", "bread"]</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Modify the new array <code>myArray</code> so that it contains both a <code>string</code> and a <code>number</code> (in that order).
|
||||
<strong>Hint</strong><br>Refer to the example code in the text editor if you get stuck.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myArray</code> should be an <code>array</code>.
|
||||
testString: 'assert(typeof myArray == ''object'', ''<code>myArray</code> should be an <code>array</code>.'');'
|
||||
- text: The first item in <code>myArray</code> should be a <code>string</code>.
|
||||
testString: 'assert(typeof myArray[0] !== ''undefined'' && typeof myArray[0] == ''string'', ''The first item in <code>myArray</code> should be a <code>string</code>.'');'
|
||||
- text: The second item in <code>myArray</code> should be a <code>number</code>.
|
||||
testString: 'assert(typeof myArray[1] !== ''undefined'' && typeof myArray[1] == ''number'', ''The second item in <code>myArray</code> should be a <code>number</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourArray = ["John", 23];
|
||||
|
||||
// Only change code below this line.
|
||||
var myArray = [];
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myArray = ["The Answer", 42];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244a8
|
||||
title: Storing Values with the Assignment Operator
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In JavaScript, you can store a value in a variable with the <dfn>assignment</dfn> operator.
|
||||
<code>myVariable = 5;</code>
|
||||
This assigns the <code>Number</code> value <code>5</code> to <code>myVariable</code>.
|
||||
Assignment always goes from right to left. Everything to the right of the <code>=</code> operator is resolved before the value is assigned to the variable to the left of the operator.
|
||||
<blockquote>myVar = 5;<br>myNum = myVar;</blockquote>
|
||||
This assigns <code>5</code> to <code>myVar</code> and then resolves <code>myVar</code> to <code>5</code> again and assigns it to <code>myNum</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Assign the value <code>7</code> to variable <code>a</code>.
|
||||
Assign the contents of <code>a</code> to variable <code>b</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Do not change code above the line
|
||||
testString: 'assert(/var a;/.test(code) && /var b = 2;/.test(code), ''Do not change code above the line'');'
|
||||
- text: <code>a</code> should have a value of 7
|
||||
testString: 'assert(typeof a === ''number'' && a === 7, ''<code>a</code> should have a value of 7'');'
|
||||
- text: <code>b</code> should have a value of 7
|
||||
testString: 'assert(typeof b === ''number'' && b === 7, ''<code>b</code> should have a value of 7'');'
|
||||
- text: <code>a</code> should be assigned to <code>b</code> with <code>=</code>
|
||||
testString: 'assert(/b\s*=\s*a\s*;/g.test(code), ''<code>a</code> should be assigned to <code>b</code> with <code>=</code>'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var a;
|
||||
var b = 2;
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
if (typeof a != 'undefined') {
|
||||
a = undefined;
|
||||
}
|
||||
if (typeof b != 'undefined') {
|
||||
b = undefined;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var a;
|
||||
var b = 2;
|
||||
a = 7;
|
||||
b = a;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb4bdef
|
||||
title: Subtract One Number from Another with JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
We can also subtract one number from another.
|
||||
JavaScript uses the <code>-</code> symbol for subtraction.
|
||||
|
||||
<strong>Example</strong>
|
||||
<blockquote>myVar = 12 - 6; // assigned 6</blockquote>
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Change the <code>0</code> so the difference is <code>12</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Make the variable <code>difference</code> equal 12.
|
||||
testString: 'assert(difference === 12, ''Make the variable <code>difference</code> equal 12.'');'
|
||||
- text: Only subtract one number from 45.
|
||||
testString: 'assert(/var\s*difference\s*=\s*45\s*-\s*[0-9]*;(?!\s*[a-zA-Z0-9]+)/.test(code),''Only subtract one number from 45.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var difference = 45 - 0;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var difference = 45 - 33;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 567af2437cbaa8c51670a16c
|
||||
title: Testing Objects for Properties
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Sometimes it is useful to check if the property of a given object exists or not. We can use the <code>.hasOwnProperty(propname)</code> method of objects to determine if that object has the given property name. <code>.hasOwnProperty()</code> returns <code>true</code> or <code>false</code> if the property is found or not.
|
||||
<strong>Example</strong>
|
||||
<blockquote>var myObj = {<br> top: "hat",<br> bottom: "pants"<br>};<br>myObj.hasOwnProperty("top"); // true<br>myObj.hasOwnProperty("middle"); // false</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Modify the function <code>checkObj</code> to test <code>myObj</code> for <code>checkProp</code>. If the property is found, return that property's value. If not, return <code>"Not Found"</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>checkObj("gift")</code> should return <code>"pony"</code>.
|
||||
testString: 'assert(checkObj("gift") === "pony", ''<code>checkObj("gift")</code> should return <code>"pony"</code>.'');'
|
||||
- text: <code>checkObj("pet")</code> should return <code>"kitten"</code>.
|
||||
testString: 'assert(checkObj("pet") === "kitten", ''<code>checkObj("pet")</code> should return <code>"kitten"</code>.'');'
|
||||
- text: <code>checkObj("house")</code> should return <code>"Not Found"</code>.
|
||||
testString: 'assert(checkObj("house") === "Not Found", ''<code>checkObj("house")</code> should return <code>"Not Found"</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var myObj = {
|
||||
gift: "pony",
|
||||
pet: "kitten",
|
||||
bed: "sleigh"
|
||||
};
|
||||
|
||||
function checkObj(checkProp) {
|
||||
// Your Code Here
|
||||
|
||||
return "Change Me!";
|
||||
}
|
||||
|
||||
// Test your code by modifying these values
|
||||
checkObj("gift");
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myObj = {
|
||||
gift: "pony",
|
||||
pet: "kitten",
|
||||
bed: "sleigh"
|
||||
};
|
||||
function checkObj(checkProp) {
|
||||
if(myObj.hasOwnProperty(checkProp)) {
|
||||
return myObj[checkProp];
|
||||
} else {
|
||||
return "Not Found";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244ba
|
||||
title: Understand String Immutability
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In JavaScript, <code>String</code> values are <dfn>immutable</dfn>, which means that they cannot be altered once created.
|
||||
For example, the following code:
|
||||
<blockquote>var myStr = "Bob";<br>myStr[0] = "J";</blockquote>
|
||||
cannot change the value of <code>myStr</code> to "Job", because the contents of <code>myStr</code> cannot be altered. Note that this does <em>not</em> mean that <code>myStr</code> cannot be changed, just that the individual characters of a <dfn>string literal</dfn> cannot be changed. The only way to change <code>myStr</code> would be to assign it with a new string, like this:
|
||||
<blockquote>var myStr = "Bob";<br>myStr = "Job";</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Correct the assignment to <code>myStr</code> so it contains the string value of <code>Hello World</code> using the approach shown in the example above.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myStr</code> should have a value of <code>Hello World</code>
|
||||
testString: 'assert(myStr === "Hello World", ''<code>myStr</code> should have a value of <code>Hello World</code>'');'
|
||||
- text: Do not change the code above the line
|
||||
testString: 'assert(/myStr = "Jello World"/.test(code), ''Do not change the code above the line'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Setup
|
||||
var myStr = "Jello World";
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
myStr[0] = "H"; // Fix Me
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myStr = "Jello World";
|
||||
myStr = "Hello World";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: bd7123c9c441eddfaeb5bdef
|
||||
title: Understanding Boolean Values
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Another data type is the <dfn>Boolean</dfn>. <code>Booleans</code> may only be one of two values: <code>true</code> or <code>false</code>. They are basically little on-off switches, where <code>true</code> is "on" and <code>false</code> is "off." These two states are mutually exclusive.
|
||||
<strong>Note</strong><br><code>Boolean</code> values are never written with quotes. The <code>strings</code> <code>"true"</code> and <code>"false"</code> are not <code>Boolean</code> and have no special meaning in JavaScript.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Modify the <code>welcomeToBooleans</code> function so that it returns <code>true</code> instead of <code>false</code> when the run button is clicked.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'The <code>welcomeToBooleans()</code> function should return a boolean (true/false) value.'
|
||||
testString: 'assert(typeof welcomeToBooleans() === ''boolean'', ''The <code>welcomeToBooleans()</code> function should return a boolean (true/false) value.'');'
|
||||
- text: <code>welcomeToBooleans()</code> should return true.
|
||||
testString: 'assert(welcomeToBooleans() === true, ''<code>welcomeToBooleans()</code> should return true.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function welcomeToBooleans() {
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
return false; // Change this line
|
||||
|
||||
// Only change code above this line.
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function welcomeToBooleans() {
|
||||
return true; // Change this line
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244ab
|
||||
title: Understanding Case Sensitivity in Variables
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In JavaScript all variables and function names are case sensitive. This means that capitalization matters.
|
||||
<code>MYVAR</code> is not the same as <code>MyVar</code> nor <code>myvar</code>. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you <em>do not</em> use this language feature.
|
||||
<h4>Best Practice</h4>
|
||||
Write variable names in JavaScript in <dfn>camelCase</dfn>. In <dfn>camelCase</dfn>, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.
|
||||
<strong>Examples:</strong>
|
||||
<blockquote>var someVariable;<br>var anotherVariableName;<br>var thisVariableNameIsSoLong;</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Modify the existing declarations and assignments so their names use <dfn>camelCase</dfn>.<br>Do not create any new variables.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>studlyCapVar</code> is defined and has a value of <code>10</code>
|
||||
testString: 'assert(typeof studlyCapVar !== ''undefined'' && studlyCapVar === 10, ''<code>studlyCapVar</code> is defined and has a value of <code>10</code>'');'
|
||||
- text: <code>properCamelCase</code> is defined and has a value of <code>"A String"</code>
|
||||
testString: 'assert(typeof properCamelCase !== ''undefined'' && properCamelCase === "A String", ''<code>properCamelCase</code> is defined and has a value of <code>"A String"</code>'');'
|
||||
- text: <code>titleCaseOver</code> is defined and has a value of <code>9000</code>
|
||||
testString: 'assert(typeof titleCaseOver !== ''undefined'' && titleCaseOver === 9000, ''<code>titleCaseOver</code> is defined and has a value of <code>9000</code>'');'
|
||||
- text: <code>studlyCapVar</code> should use camelCase in both declaration and assignment sections.
|
||||
testString: 'assert(code.match(/studlyCapVar/g).length === 2, ''<code>studlyCapVar</code> should use camelCase in both declaration and assignment sections.'');'
|
||||
- text: <code>properCamelCase</code> should use camelCase in both declaration and assignment sections.
|
||||
testString: 'assert(code.match(/properCamelCase/g).length === 2, ''<code>properCamelCase</code> should use camelCase in both declaration and assignment sections.'');'
|
||||
- text: <code>titleCaseOver</code> should use camelCase in both declaration and assignment sections.
|
||||
testString: 'assert(code.match(/titleCaseOver/g).length === 2, ''<code>titleCaseOver</code> should use camelCase in both declaration and assignment sections.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Declarations
|
||||
var StUdLyCapVaR;
|
||||
var properCamelCase;
|
||||
var TitleCaseOver;
|
||||
|
||||
// Assignments
|
||||
STUDLYCAPVAR = 10;
|
||||
PRoperCAmelCAse = "A String";
|
||||
tITLEcASEoVER = 9000;
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var studlyCapVar;
|
||||
var properCamelCase;
|
||||
var titleCaseOver;
|
||||
|
||||
studlyCapVar = 10;
|
||||
properCamelCase = "A String";
|
||||
titleCaseOver = 9000;
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 598e8944f009e646fc236146
|
||||
title: Understanding Undefined Value returned from a Function
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A function can include the <code>return</code> statement but it does not have to. In the case that the function doesn't have a <code>return</code> statement, when you call it, the function processes the inner code but the returned value is <code>undefined</code>.
|
||||
<strong>Example</strong>
|
||||
<blockquote>var sum = 0;<br>function addSum(num) {<br> sum = sum + num;<br>}<br>var returnedValue = addSum(3); // sum will be modified but returned value is undefined</blockquote>
|
||||
<code>addSum</code> is a function without a <code>return</code> statement. The function will change the global <code>sum</code> variable but the returned value of the function is <code>undefined</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a function <code>addFive</code> without any arguments. This function adds 5 to the <code>sum</code> variable, but its returned value is <code>undefined</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>addFive</code> should be a function
|
||||
testString: 'assert(typeof addFive === ''function'', ''<code>addFive</code> should be a function'');'
|
||||
- text: <code>sum</code> should be equal to 8
|
||||
testString: 'assert(sum === 8, ''<code>sum</code> should be equal to 8'');'
|
||||
- text: Returned value from <code>addFive</code> should be <code>undefined</code>
|
||||
testString: 'assert(addFive() === undefined, ''Returned value from <code>addFive</code> should be <code>undefined</code>'');'
|
||||
- text: 'Inside of your functions, add 5 to the <code>sum</code> variable'
|
||||
testString: 'assert(code.match(/(sum\s*\=\s*sum\s*\+\s*5)|(sum\s*\+\=\s*5)/g).length === 1, ''Inside of your functions, add 5 to the <code>sum</code> variable'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var sum = 0;
|
||||
function addThree() {
|
||||
sum = sum + 3;
|
||||
}
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
|
||||
// Only change code above this line
|
||||
var returnedValue = addFive();
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
function addFive() {
|
||||
sum = sum + 5;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244aa
|
||||
title: Understanding Uninitialized Variables
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
When JavaScript variables are declared, they have an initial value of <code>undefined</code>. If you do a mathematical operation on an <code>undefined</code> variable your result will be <code>NaN</code> which means <dfn>"Not a Number"</dfn>. If you concatenate a string with an <code>undefined</code> variable, you will get a literal <dfn>string</dfn> of <code>"undefined"</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Initialize the three variables <code>a</code>, <code>b</code>, and <code>c</code> with <code>5</code>, <code>10</code>, and <code>"I am a"</code> respectively so that they will not be <code>undefined</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>a</code> should be defined and evaluated to have the value of <code>6</code>
|
||||
testString: 'assert(typeof a === ''number'' && a === 6, ''<code>a</code> should be defined and evaluated to have the value of <code>6</code>'');'
|
||||
- text: <code>b</code> should be defined and evaluated to have the value of <code>15</code>
|
||||
testString: 'assert(typeof b === ''number'' && b === 15, ''<code>b</code> should be defined and evaluated to have the value of <code>15</code>'');'
|
||||
- text: <code>c</code> should not contain <code>undefined</code> and should have a value of "I am a String!"
|
||||
testString: 'assert(!/undefined/.test(c) && c === "I am a String!", ''<code>c</code> should not contain <code>undefined</code> and should have a value of "I am a String!"'');'
|
||||
- text: Do not change code below the line
|
||||
testString: 'assert(/a = a \+ 1;/.test(code) && /b = b \+ 5;/.test(code) && /c = c \+ " String!";/.test(code), ''Do not change code below the line'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Initialize these three variables
|
||||
var a;
|
||||
var b;
|
||||
var c;
|
||||
|
||||
// Do not change code below this line
|
||||
|
||||
a = a + 1;
|
||||
b = b + 5;
|
||||
c = c + " String!";
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var a = 5;
|
||||
var b = 10;
|
||||
var c = "I am a";
|
||||
a = a + 1;
|
||||
b = b + 5;
|
||||
c = c + " String!";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392d1
|
||||
title: Updating Object Properties
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable. You can use either dot or bracket notation to update.
|
||||
For example, let's look at <code>ourDog</code>:
|
||||
<blockquote>var ourDog = {<br> "name": "Camper",<br> "legs": 4,<br> "tails": 1,<br> "friends": ["everything!"]<br>};</blockquote>
|
||||
Since he's a particularly happy dog, let's change his name to "Happy Camper". Here's how we update his object's name property:
|
||||
<code>ourDog.name = "Happy Camper";</code> or
|
||||
<code>ourDog["name"] = "Happy Camper";</code>
|
||||
Now when we evaluate <code>ourDog.name</code>, instead of getting "Camper", we'll get his new name, "Happy Camper".
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Update the <code>myDog</code> object's name property. Let's change her name from "Coder" to "Happy Coder". You can use either dot or bracket notation.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Update <code>myDog</code>'s <code>"name"</code> property to equal "Happy Coder".
|
||||
testString: 'assert(/happy coder/gi.test(myDog.name), ''Update <code>myDog</code>'s <code>"name"</code> property to equal "Happy Coder".'');'
|
||||
- text: Do not edit the <code>myDog</code> definition
|
||||
testString: 'assert(/"name": "Coder"/.test(code), ''Do not edit the <code>myDog</code> definition'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var ourDog = {
|
||||
"name": "Camper",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["everything!"]
|
||||
};
|
||||
|
||||
ourDog.name = "Happy Camper";
|
||||
|
||||
// Setup
|
||||
var myDog = {
|
||||
"name": "Coder",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["freeCodeCamp Campers"]
|
||||
};
|
||||
|
||||
// Only change code below this line.
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var myDog = {
|
||||
"name": "Coder",
|
||||
"legs": 4,
|
||||
"tails": 1,
|
||||
"friends": ["freeCodeCamp Campers"]
|
||||
};
|
||||
myDog.name = "Happy Coder";
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: bd7123c9c549eddfaeb5bdef
|
||||
title: Use Bracket Notation to Find the First Character in a String
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Bracket notation</code> is a way to get a character at a specific <code>index</code> within a string.
|
||||
Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is referred to as <dfn>Zero-based</dfn> indexing.
|
||||
For example, the character at index 0 in the word "Charles" is "C". So if <code>var firstName = "Charles"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <dfn>bracket notation</dfn> to find the first character in the <code>lastName</code> variable and assign it to <code>firstLetterOfLastName</code>.
|
||||
<strong>Hint</strong><br>Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.
|
||||
testString: 'assert(firstLetterOfLastName === ''L'', ''The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.'');'
|
||||
- text: You should use bracket notation.
|
||||
testString: 'assert(code.match(/firstLetterOfLastName\s*?=\s*?lastName\[.*?\]/), ''You should use bracket notation.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var firstLetterOfFirstName = "";
|
||||
var firstName = "Ada";
|
||||
|
||||
firstLetterOfFirstName = firstName[0];
|
||||
|
||||
// Setup
|
||||
var firstLetterOfLastName = "";
|
||||
var lastName = "Lovelace";
|
||||
|
||||
// Only change code below this line
|
||||
firstLetterOfLastName = lastName;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var firstLetterOfLastName = "";
|
||||
var lastName = "Lovelace";
|
||||
|
||||
// Only change code below this line
|
||||
firstLetterOfLastName = lastName[0];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bd7123c9c451eddfaeb5bdef
|
||||
title: Use Bracket Notation to Find the Last Character in a String
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In order to get the last letter of a string, you can subtract one from the string's length.
|
||||
For example, if <code>var firstName = "Charles"</code>, you can get the value of the last letter of the string by using <code>firstName[firstName.length - 1]</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <dfn>bracket notation</dfn> to find the last character in the <code>lastName</code> variable.
|
||||
<strong>Hint</strong><br>Try looking at the <code>lastLetterOfFirstName</code> variable declaration if you get stuck.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>lastLetterOfLastName</code> should be "e".
|
||||
testString: 'assert(lastLetterOfLastName === "e", ''<code>lastLetterOfLastName</code> should be "e".'');'
|
||||
- text: You have to use <code>.length</code> to get the last letter.
|
||||
testString: 'assert(code.match(/\.length/g).length === 2, ''You have to use <code>.length</code> to get the last letter.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var firstName = "Ada";
|
||||
var lastLetterOfFirstName = firstName[firstName.length - 1];
|
||||
|
||||
// Setup
|
||||
var lastName = "Lovelace";
|
||||
|
||||
// Only change code below this line.
|
||||
var lastLetterOfLastName = lastName;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var firstName = "Ada";
|
||||
var lastLetterOfFirstName = firstName[firstName.length - 1];
|
||||
|
||||
var lastName = "Lovelace";
|
||||
var lastLetterOfLastName = lastName[lastName.length - 1];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: bd7123c9c450eddfaeb5bdef
|
||||
title: Use Bracket Notation to Find the Nth Character in a String
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can also use <dfn>bracket notation</dfn> to get the character at other positions within a string.
|
||||
Remember that computers start counting at <code>0</code>, so the first character is actually the zeroth character.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Let's try to set <code>thirdLetterOfLastName</code> to equal the third letter of the <code>lastName</code> variable using bracket notation.
|
||||
<strong>Hint</strong><br>Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.
|
||||
testString: 'assert(thirdLetterOfLastName === ''v'', ''The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.'');'
|
||||
- text: You should use bracket notation.
|
||||
testString: 'assert(code.match(/thirdLetterOfLastName\s*?=\s*?lastName\[.*?\]/), ''You should use bracket notation.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var firstName = "Ada";
|
||||
var secondLetterOfFirstName = firstName[1];
|
||||
|
||||
// Setup
|
||||
var lastName = "Lovelace";
|
||||
|
||||
// Only change code below this line.
|
||||
var thirdLetterOfLastName = lastName;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var lastName = "Lovelace";
|
||||
var thirdLetterOfLastName = lastName[2];
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bd7123c9c452eddfaeb5bdef
|
||||
title: Use Bracket Notation to Find the Nth-to-Last Character in a String
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can use the same principle we just used to retrieve the last character in a string to retrieve the Nth-to-last character.
|
||||
For example, you can get the value of the third-to-last letter of the <code>var firstName = "Charles"</code> string by using <code>firstName[firstName.length - 3]</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <dfn>bracket notation</dfn> to find the second-to-last character in the <code>lastName</code> string.
|
||||
<strong>Hint</strong><br>Try looking at the <code>thirdToLastLetterOfFirstName</code> variable declaration if you get stuck.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>secondToLastLetterOfLastName</code> should be "c".
|
||||
testString: 'assert(secondToLastLetterOfLastName === ''c'', ''<code>secondToLastLetterOfLastName</code> should be "c".'');'
|
||||
- text: You have to use <code>.length</code> to get the second last letter.
|
||||
testString: 'assert(code.match(/\.length/g).length === 2, ''You have to use <code>.length</code> to get the second last letter.'');'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// Example
|
||||
var firstName = "Ada";
|
||||
var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];
|
||||
|
||||
// Setup
|
||||
var lastName = "Lovelace";
|
||||
|
||||
// Only change code below this line
|
||||
var secondToLastLetterOfLastName = lastName;
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
console.info('after the test');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var firstName = "Ada";
|
||||
var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];
|
||||
|
||||
var lastName = "Lovelace";
|
||||
var secondToLastLetterOfLastName = lastName[lastName.length - 2];
|
||||
```
|
||||
|
||||
</section>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user