gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix/rename-lessons

Browse Source
This commit is contained in:
moT01
2019-05-31 15:21:47 -05:00
committed by Kristofer Koishigawa
parent 8b5cc6d277
commit 956212cdc0
5 changed files with 180 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.english.md Normal file
View File

@ -0,0 +1,82 @@
---
id: 587d7b8c367417b2b2512b55
title: Reuse Javascript Code Using import
challengeType: 1
---
## Description
<section id='description'>
<code>import</code> allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported <code>add</code> from the file <code>math_functions.js</code>. Here's how you can import them into another file:
```js
import { add } from './math_functions.js';
```
Here, <code>import</code> will find <code>add</code> in <code>math_functions.js</code>, import just that function for you to use, and ignore the rest. The <code>./</code> tells the import to look for the <code>math_functions.js</code> file in the same folder that the file which uses the import statement is. The relative file path (<code>./</code>) and file extension (<code>.js</code>) are required when using import in this way.
You can import multiple items like this:
```js
import { add, subtract } from './math_functions.js';
```
</section>
## Instructions
<section id='instructions'>
Add the appropriate <code>import</code> statement that will allow the current file to use the <code>capitalizeString</code> and <code>lowerCaseString</code> functions you exported in the previous lesson. These functions are in a file called <code>string_functions.js</code>, which is in the same directory as the current file.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: You should properly import <code>capitalizeString</code>.
testString: getUserInput => assert(getUserInput('index').match(/import\s*\{\s*capitalizeString\s*\}\s*from\s*("|')(\.\/string_functions|string_functions)\1(|\/\/|;\s|\s)/g));
- text: You should properly import <code>lowerCaseString</code>.
testString: getUserInput => assert(getUserInput('index').match(/import\s*\{\s*capitalizeString\s*\}\s*from\s*("|')(\.\/string_functions|string_functions)\1(|\/\/|;\s|\s)/g));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
// add code above this line
console.log(capitalizeString("hello"));
console.log(lowerCaseString("WORLD!"));
```
</div>
### Before Test
<div id='js-setup'>
```js
self.require = function() {
return {
capitalizeString: str => str.toUpperCase(),
lowerCaseString: str => str.toLowerCase()
}
};
```
</div>
</section>
## Solution
<section id='solution'>
```js
import { capitalizeString } from './string_functions';
capitalizeString("hello!");
```
</section>

73
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/share-javascript-code-using-import.english.md
View File

@ -1,73 +0,0 @@
---
id: 587d7b8c367417b2b2512b55
title: Share Javascript Code Using import
challengeType: 1
---
## Description
<section id='description'>
In the past, <code>require()</code> was used to add things from external files. While handy, this presents a problem: some files are rather large and you may only need certain parts of those external resources.
ES6 gives you a very handy tool known as <code>import</code>. With it, you can choose which parts of a file or module to load, saving time and memory.
Imagine a file that has 20 functions, but you only need to use one of those functions. <code>require()</code> would force you to bring in all 20 functions. With the <code>import</code> syntax, you can bring in just the one you need, like so:
<blockquote>import { desired_function } from './other_file';</blockquote>
Here, <code>import</code> will find <code>desired_function</code> in <code>other_file</code>, import just that function for you to use, and ignore the rest. The <code>./</code> tells the import to look for the <code>other_file</code> in the same folder that the file which uses the import statement is in. The whitespace around the function inside the curly braces is best practice for readability.
You can import multiple items like this:
<blockquote>import { item1, item2 } from './other_file';</blockquote>
There are a few ways to write an <code>import</code> statement, but the above are a very common use-case.
</section>
## Instructions
<section id='instructions'>
Add the appropriate <code>import</code> statement that will allow the current file to use the <code>capitalizeString</code> function. The file where this function lives is called <code>string_functions</code>, and it is in the same directory as the current file.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: Use a valid <code>import</code> statement
testString: getUserInput => assert(getUserInput('index').match(/import\s*\{\s*capitalizeString\s*\}\s*from\s*("|')(\.\/string_functions|string_functions)\1(|\/\/|;\s|\s)/g));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
"use strict";
capitalizeString("hello!");
```
</div>
### Before Test
<div id='js-setup'>
```js
self.require = function (str) {
if (str === 'string_functions') {
return {
capitalizeString: str => str.toUpperCase()
}
}
};
```
</div>
</section>
## Solution
<section id='solution'>
```js
import { capitalizeString } from './string_functions';
capitalizeString("hello!");
```
</section>

81
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-reuse-a-code-block.english.md
View File

@ -1,81 +0,0 @@
---
id: 587d7b8c367417b2b2512b56
title: Use export to Reuse a Code Block
challengeType: 1
---
## Description
<section id='description'>
Imagine you have a function, <code>capitalizeFirstLetter</code>, that simply takes in a string and returns the string with the first letter capitalized. You want to use this function in several different javascript files. In order to share the function with the files, you need to first <code>export</code> it.
```js
export const capitalizeFirstLetter = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
```
The above is a common way to export a single function, but you can achieve the same thing like this:
```js
const capitalizeFirstLetter = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
export { capitalizeFirstLetter };
```
After you export a function like this, you can import it in another file to use without having to rewrite the function.
</section>
## Instructions
<section id='instructions'>
Create and export a variable named </code></code>
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: <code>foo</code> is exported.
testString: getUserInput => assert(getUserInput('index').match(/export\s+const\s+foo\s*=\s*"bar"/g), '<code>foo</code> is exported.');
- text: <code>bar</code> is exported.
testString: getUserInput => assert(getUserInput('index').match(/export\s+const\s+bar\s*=\s*"foo"/g), '<code>bar</code> is exported.');
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
"use strict";
```
</div>
### Before Test
<div id='js-setup'>
```js
self.exports = function(){};
```
</div>
</section>
## Solution
<section id='solution'>
```js
"use strict";
export const foo = "bar";
export const bar = "foo";
```
</section>

96
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.english.md Normal file
View File

@ -0,0 +1,96 @@
---
id: 587d7b8c367417b2b2512b56
title: Use export to Share a Code Block
challengeType: 1
---
## Description
<section id='description'>
Imagine a file called <code>math_functions.js</code>, it contains several functions related to mathematical operations. One of them is stored in a variable, <code>add</code>, that takes in two numbers and returns the sum of them. You want to use this function in several different javascript files. In order to share it with the files, you need to first <code>export</code> it.
```js
export const add = (x, y) => {
return x + y;
}
```
The above is a common way to export a single variable, but you can achieve the same thing like this:
```js
const add = (x, y) => {
return x + y;
}
export { add };
```
After you export a variable, you can import it in another file to use without having to rewrite the code. You can export multiple variables one at a time by repeating the first example for each thing you want to export or by placing them all in the export statement of the second example like this:
```js
export { add, subtract };
```
</section>
## Instructions
<section id='instructions'>
There are two functions related to strings in the editor. Export both of them using the method of your choice.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: You should not alter the functions.
testString: getUserInput => assert(getUserInput('index').match(/export\s+const\s+foo\s*=\s*"bar"/g), '<code>foo</code> is exported.');
- text: <code>capitalizeString</code> is properly exported.
testString: getUserInput => assert(getUserInput('index').match(/export\s+const\s+bar\s*=\s*"foo"/g), '<code>bar</code> is exported.');
- text: <code>lowerCaseString</code> is properly exported.
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
const capitalizeString = (string) => {
return string.toUpperCase();
}
const lowercaseString = (string) => {
return string.toLowerCase()
}
```
</div>
### Before Test
<div id='js-setup'>
```js
self.exports = function(){};
```
</div>
</section>
## Solution
<section id='solution'>
```js
export const capitalizeString = (string) => {
return string.toUpperCase();
}
export const lowercaseString = (string) => {
return string.toLowerCase()
}
```
</section>