diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.english.md index f1e329b37b..c3ca77335c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.english.md @@ -6,19 +6,18 @@ challengeType: 6 ## Description
-Javascript started with a small role to play on an otherwise mostly html internet. Today, it’s huge, and some websites are built almost entirely with javascript. In order to make javascript more modular, clean, and maintainable, ES6 introduced a way to easily share code among javascript files. This involves exporting parts of a javascript file for use in one or more other files, and importing the parts you need, where you need them. In order to take advantage of this functionality, you need to create a script in your html document with a type of module. Here’s an example: +JavaScript started with a small role to play on an otherwise mostly HTML web. Today, it’s huge, and some websites are built almost entirely with JavaScript. In order to make JavaScript more modular, clean, and maintainable; ES6 introduced a way to easily share code among JavaScript files. This involves exporting parts of a file for use in one or more other files, and importing the parts you need, where you need them. In order to take advantage of this functionality, you need to create a script in your HTML document with a type of module. Here’s an example: ```html ``` A script that uses this module type can now use the import and export features you will learn about in the upcoming challenges. -
## Instructions
-Add a script to the html document of type module and give it the source file of index.js +Add a script to the HTML document of type module and give it the source file of index.js
## Tests @@ -29,20 +28,18 @@ tests: - text: You should create a script tag. testString: assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g)); - text: Your script tag should be of type module. - testString: assert(code.match(/<\s*script\s*[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g)); + testString: assert(code.match(/<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g)); - text: Your script tag should have a src of index.js. - testString: assert(code.match(/<\s*script\s*[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g)); + testString: assert(code.match(/<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g)); ``` ## Challenge Seed
-
```html - @@ -50,18 +47,15 @@ tests: - ```
-
## Solution
```html - @@ -69,6 +63,6 @@ tests: - ``` +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.english.md index d94e5adab8..bac163ac7e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.english.md @@ -11,12 +11,12 @@ There is another export syntax you need to know, known as expo Here is a quick example of export default: ```js -export default function add(x,y) { +export default function add(x, y) { return x + y; } ``` -Note: Since export default is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use export default with var, let, or const +Since export default is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use export default with var, let, or const ## Instructions @@ -30,40 +30,31 @@ The following function should be the fallback value for the module. Please add t ```yml tests: - text: Your code should use export fallback. - testString: getUserInput => assert(getUserInput('index').match(/export\s+default\s+function\s+subtract\(x,y\)\s+{return\s+x\s-\s+y;}/g), 'Your code should use export fallback.'); - + testString: assert(code.match(/export\s+default\s+function\s+subtract\s*\(\s*x,\s*y\s*\)\s*{/g)); ``` ## Challenge Seed
-
```js -"use strict"; -function subtract(x,y) {return x - y;} +function subtract(x, y) { + return x - y; +} ```
- -### Before Test -
- -```js -self.exports = function(){}; -``` - -
-
## Solution
```js -export default function subtract(x,y) {return x - y;} +export default function subtract(x, y) { + return x - y; +} ```
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.english.md index 3ffdbae196..2054116735 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.english.md @@ -6,20 +6,18 @@ challengeType: 1 ## Description
-In the last challenge, you learned about export default and its uses. It is important to note that, to import a default export, you need to use a different import syntax. -In the following example, we have a function, add, that is the default export of a file, "math_functions". Here is how to import it: +In the last challenge, you learned about export default and its uses. To import a default export, you need to use a different import syntax. In the following example, add is the default export of the math_functions.js file. Here is how to import it: ```js -import add from "math_functions"; -add(5,4); // Will return 9 +import add from "./math_functions.js"; ``` -The syntax differs in one key place - the imported value, add, is not surrounded by curly braces, {}. Unlike exported values, the primary method of importing a default export is to simply write the value's name after import. +The syntax differs in one key place. The imported value, add, is not surrounded by curly braces ({}). The primary method of importing a default export is to simply write the value's name after import.
## Instructions
-In the following code, please import the default export, subtract, from the file "math_functions", found in the same directory as this file. +In the following code, import the default export, subtract, from the file math_functions.js, found in the same directory as this file.
## Tests @@ -27,47 +25,33 @@ In the following code, please import the default export, subtract, ```yml tests: - - text: You need to properly import subtract from "math_functions". - testString: getUserInput => assert(getUserInput('index').match(/import\s+subtract\s+from\s+('|")math_functions\1/g), 'You need to properly import subtract from "math_functions".'); - + - text: You should properly import subtract from math_functions.js. + testString: assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g)); ``` ## Challenge Seed
-
```js -"use strict"; + +// add code above this line + subtract(7,4); ```
- -### Before Test -
- -```js -self.require = function(str) { - if (str === 'math_functions') { - return function(a, b) { - return a - b; - } - } -}; -``` - -
-
## Solution
```js -import subtract from "math_functions"; +import subtract from "./math_functions.js"; +// add code above this line + subtract(7,4); ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.english.md index 5ae6740a7d..f7be474721 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.english.md @@ -6,15 +6,15 @@ challengeType: 1 ## Description
-import allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported add from the file math_functions.js. Here's how you can import them into another file: +import allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported add from the math_functions.js file. Here's how you can import it to use in another file: ```js import { add } from './math_functions.js'; ``` -Here, import will find add in math_functions.js, import just that function for you to use, and ignore the rest. The ./ tells the import to look for the math_functions.js file in the same folder that the file which uses the import statement is. The relative file path (./) and file extension (.js) are required when using import in this way. +Here, import will find add in math_functions.js, import just that function for you to use, and ignore the rest. The ./ tells the import to look for the math_functions.js file in the same folder as the current file. The relative file path (./) and file extension (.js) are required when using import in this way. -You can import multiple items like this: +You can import more than one item from the file by adding them in the import statement like this: ```js import { add, subtract } from './math_functions.js'; @@ -24,7 +24,7 @@ import { add, subtract } from './math_functions.js'; ## Instructions
-Add the appropriate import statement that will allow the current file to use the capitalizeString and lowerCaseString functions you exported in the previous lesson. These functions are in a file called string_functions.js, which is in the same directory as the current file. +Add the appropriate import statement that will allow the current file to use the uppercaseString and lowercaseString functions you exported in the previous lesson. These functions are in a file called string_functions.js, which is in the same directory as the current file.
## Tests @@ -32,10 +32,10 @@ Add the appropriate import statement that will allow the current fi ```yml tests: - - text: You should properly import capitalizeString. - 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 lowerCaseString. - 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 uppercaseString. + testString: assert(code.match(/import\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g)); + - text: You should properly import lowercaseString. + testString: assert(code.match(/import\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g)); ```
@@ -45,27 +45,11 @@ tests:
```js - - - + // add code above this line -console.log(capitalizeString("hello")); -console.log(lowerCaseString("WORLD!")); -``` - -
- -### Before Test -
- -```js -self.require = function() { - return { - capitalizeString: str => str.toUpperCase(), - lowerCaseString: str => str.toLowerCase() - } -}; +uppercaseString("hello"); +lowercaseString("WORLD!"); ```
@@ -76,7 +60,10 @@ self.require = function() { ```js import { capitalizeString } from './string_functions'; -capitalizeString("hello!"); +// add code above this line + +uppercaseString("hello"); +lowercaseString("WORLD!"); ```
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.english.md index 7fb8ee7bad..da4ed99999 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.english.md @@ -6,28 +6,23 @@ challengeType: 1 ## Description
-Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the import * as syntax. -Here's an example where the contents of a file named "math_functions" are imported into a file in the same directory: +Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the import * as syntax. Here's an example where the contents of a file named math_functions.js are imported into a file in the same directory: + +```js +import * as myMathModule from "./math_functions.js"; +``` + +The above import statement will create an object called myMathModule. This is just a variable name, you can name it anything. The object will contain all of the exports from math_functions.js in it, so you can access the functions like you would any other object property. Here's how you can use the add and subtract functions that were imported: ```js -import * as myMathModule from "math_functions"; myMathModule.add(2,3); myMathModule.subtract(5,3); ``` - -And breaking down that code: - -```js -import * as object_with_name_of_your_choice from "file_path_goes_here" -object_with_name_of_your_choice.imported_function -``` - -You may use any name following the import * as portion of the statement. In order to utilize this method, it requires an object that receives the imported values (i.e., you must provide a name). From here, you will use the dot notation to call your imported values.
## Instructions
-The code in this file requires the contents of another file, "capitalize_strings", that is in the same directory as the current file. Add the appropriate import * as statement to the top of the file. +The code in this file requires the contents of the file: string_functions.js, that is in the same directory as the current file. Use the import * as syntax to import everything from the file into an object called stringFunctions.
## Tests @@ -36,46 +31,35 @@ The code in this file requires the contents of another file, "capitalize_s ```yml tests: - text: Properly uses import * as syntax. - testString: assert(code.match(/import\s+\*\s+as\s+[a-zA-Z0-9_$]+\s+from\s*"\s*capitalize_strings\s*"\s*;/gi), 'Properly uses import * as syntax.'); - + testString: assert(code.match(/import\s*\*\s*as\s+stringFunctions\s+from\s*('|")\.\/string_functions\.js\1/g)); ``` ## Challenge Seed
-
```js -"use strict"; + +// add code above this line + +stringFunctions.uppercaseString("hello"); +stringFunctions.lowercaseString("WORLD!"); ```
- -### Before Test -
- -```js -self.require = function(str) { - if (str === 'capitalize_strings') { - return { - capitalize: str => str.toUpperCase(), - lowercase: str => str.toLowerCase() - } - } -}; -``` - -
-
## Solution
```js -import * as capitalize_strings from "capitalize_strings"; +import * as stringFunctions from "./string_functions.js"; +// add code above this line + +stringFunctions.uppercaseString("hello"); +stringFunctions.lowercaseString("WORLD!"); ```
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.english.md index b18c2aa4bb..ba92269a04 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.english.md @@ -6,7 +6,7 @@ challengeType: 1 ## Description
-Imagine a file called math_functions.js, it contains several functions related to mathematical operations. One of them is stored in a variable, add, 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 export it. +Imagine a file called math_functions.js, it contains several functions related to mathematical operations. One of them is stored in a variable, add, 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 export it. ```js export const add = (x, y) => { @@ -14,7 +14,7 @@ export const add = (x, y) => { } ``` -The above is a common way to export a single variable, but you can achieve the same thing like this: +The above is a common way to export a single function, but you can achieve the same thing like this: ```js const add = (x, y) => { @@ -24,7 +24,7 @@ const add = (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: +After you export a variable or function, you can import it in another file to use without having to rewrite the code. You can export multiple things 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 }; @@ -42,23 +42,20 @@ There are two functions related to strings in the editor. Export both of them us ```yml tests: - - text: You should not alter the functions. - testString: getUserInput => assert(getUserInput('index').match(/export\s+const\s+foo\s*=\s*"bar"/g), 'foo is exported.'); - - text: capitalizeString is properly exported. - testString: getUserInput => assert(getUserInput('index').match(/export\s+const\s+bar\s*=\s*"foo"/g), 'bar is exported.'); - - text: lowerCaseString is properly exported. - + - text: You should properly export uppercaseString. + testString: assert(code.match(/(export\s+const\s+uppercaseString|export\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)})/g)); + - text: You should properly export lowercaseString. + testString: assert(code.match(/(export\s+const\s+lowercaseString|export\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)})/g)); ```
## Challenge Seed
-
```js -const capitalizeString = (string) => { +const uppercaseString = (string) => { return string.toUpperCase(); } @@ -68,24 +65,13 @@ const lowercaseString = (string) => { ```
- -### Before Test -
- -```js -self.exports = function(){}; -``` - -
- -
## Solution
```js -export const capitalizeString = (string) => { +export const uppercaseString = (string) => { return string.toUpperCase(); } @@ -93,4 +79,5 @@ export const lowercaseString = (string) => { return string.toLowerCase() } ``` +