freeCodeCamp/curriculum/challenges/english/02-javascript-algorithms-an.../es6/create-a-module-script.md

---
id: 5cddbfd622f1a59093ec611d
title: Create a Module Script
challengeType: 6
forumTopicId: 301198
dashedName: create-a-module-script
---

# --description--

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
<script type="module" src="filename.js"></script>
```

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`

# --hints--

You should create a `script` tag.

```js
assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
```

Your `script` tag should have the `type` attribute with a value of `module`.

```js
assert(
  code.match(
    /<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g
  )
);
```

Your `script` tag should have a `src` of `index.js`.

```js
assert(
  code.match(
    /<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g
  )
);
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    <!-- Only change code below this line -->

    <!-- Only change code above this line -->
  </body>
</html>
```

# --solutions--

```html
<html>
  <body>
    <script type="module" src="index.js"></script>
  </body>
</html>
```
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
+								---
 								id: 5cddbfd622f1a59093ec611d
 								title: Create a Module Script
-												fix/add-tests

											
										
										
											2019-05-30 14:04:11 +00:00
+								challengeType: 6
-												fix(curriculum): Added forumTopicId to remaining 1200 challeng… (#36558)


											
										
										
											2019-08-05 16:17:33 +00:00
+								forumTopicId: 301198
-												feat(curriculum): restore seed + solution to Chinese (#40683)

* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
											
										
										
											2021-01-13 02:31:00 +00:00
+								dashedName: create-a-module-script
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
+								---
-												Feat: add new Markdown parser (#39800)

and change all the challenges to new `md` format.
											
										
										
											2020-11-27 18:02:05 +00:00
+								# --description--
-												chore(learn): audit javascript algorithms and data structures (#41092)

* chore(learn): audit basic algorithm scripting

* chore(learn): audit basic data structures

* chore(learn): audit basic javascript

* chore(learn): audit debugging

* chore(learn): audit es6

* chore(learn): audit functional programming

* chore(learn): audit intermidate algorithms

* chore(learn): audit js projects

* chore(learn): audit object oriented programming

* chore(learn): audit regex

* fix(learn): remove stray .

* fix(learn): string to code

* fix(learn): missed some

* fix(learn): clarify strings

Based on Randy's feedback, clarifies string instances where quotes
were removed in favour of back ticks.

* fix: apply suggestions - thanks Randy! :)

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* fix: non-suggestion comments

* chore(learn): remove comments from codes

Removes the comments from the description and instruction code
blocks to ensure that all relevant information is translatable.

* fix: Apply suggestions from code review

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: revert crowdin fix

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* fix: Apply suggestions from code review

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: Apply suggestions from code review

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* chore: change voice

* fix: Christopher Nolan

* fix: expressions would evaluate

* fix: will -> would

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* fix: to work to push

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
											
										
										
											2021-03-03 00:12:12 +00:00
+								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:
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
 								```html
 								<script type="module" src="filename.js"></script>
 								```
-												Feat: add new Markdown parser (#39800)

and change all the challenges to new `md` format.
											
										
										
											2020-11-27 18:02:05 +00:00
+								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`
 								# --hints--
 								You should create a `script` tag.
 								```js
 								assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
 								```
-												chore(learn): audit javascript algorithms and data structures (#41092)

* chore(learn): audit basic algorithm scripting

* chore(learn): audit basic data structures

* chore(learn): audit basic javascript

* chore(learn): audit debugging

* chore(learn): audit es6

* chore(learn): audit functional programming

* chore(learn): audit intermidate algorithms

* chore(learn): audit js projects

* chore(learn): audit object oriented programming

* chore(learn): audit regex

* fix(learn): remove stray .

* fix(learn): string to code

* fix(learn): missed some

* fix(learn): clarify strings

Based on Randy's feedback, clarifies string instances where quotes
were removed in favour of back ticks.

* fix: apply suggestions - thanks Randy! :)

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* fix: non-suggestion comments

* chore(learn): remove comments from codes

Removes the comments from the description and instruction code
blocks to ensure that all relevant information is translatable.

* fix: Apply suggestions from code review

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: revert crowdin fix

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* fix: Apply suggestions from code review

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: Apply suggestions from code review

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* chore: change voice

* fix: Christopher Nolan

* fix: expressions would evaluate

* fix: will -> would

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* fix: to work to push

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
											
										
										
											2021-03-03 00:12:12 +00:00
+								Your `script` tag should have the `type` attribute with a value of `module`.
-												Feat: add new Markdown parser (#39800)

and change all the challenges to new `md` format.
											
										
										
											2020-11-27 18:02:05 +00:00
 								```js
 								assert(
 								  code.match(
 								    /<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g
 								  )
 								);
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
+								```
-												Feat: add new Markdown parser (#39800)

and change all the challenges to new `md` format.
											
										
										
											2020-11-27 18:02:05 +00:00
+								Your `script` tag should have a `src` of `index.js`.
 								```js
 								assert(
 								  code.match(
 								    /<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g
 								  )
 								);
 								```
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
-												Feat: add new Markdown parser (#39800)

and change all the challenges to new `md` format.
											
										
										
											2020-11-27 18:02:05 +00:00
+								# --seed--
 								## --seed-contents--
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
 								```html
 								<html>
-												fix/add-tests

											
										
										
											2019-05-30 14:04:11 +00:00
+								  <body>
-												fix(curriculum): Consolidated comments for JavaScript Algorithms and Data Structures challenges - part 1 of 4 (#38258)

* fix: consolidate/remove comments

* fix: remove => from comment

* fix: reverted changes to add same changes to another PR

* fix: removed 'the' from sentence

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: removed 'the' from the sentence

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

											
										
										
											2020-03-04 19:08:54 +00:00
+								    <!-- Only change code below this line -->
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
-												fix(curriculum): Consolidated comments for JavaScript Algorithms and Data Structures challenges - part 1 of 4 (#38258)

* fix: consolidate/remove comments

* fix: remove => from comment

* fix: reverted changes to add same changes to another PR

* fix: removed 'the' from sentence

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: removed 'the' from the sentence

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

											
										
										
											2020-03-04 19:08:54 +00:00
+								    <!-- Only change code above this line -->
-												fix/add-tests

											
										
										
											2019-05-30 14:04:11 +00:00
+								  </body>
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
+								</html>
 								```
-												Feat: add new Markdown parser (#39800)

and change all the challenges to new `md` format.
											
										
										
											2020-11-27 18:02:05 +00:00
+								# --solutions--
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
 								```html
-												fix/add-tests

											
										
										
											2019-05-30 14:04:11 +00:00
+								<html>
 								  <body>
-												fix/build-error

											
										
										
											2019-06-01 12:17:57 +00:00
+								    <script type="module" src="index.js"></script>
-												fix/add-tests

											
										
										
											2019-05-30 14:04:11 +00:00
+								  </body>
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 11:33:17 +00:00
+								</html>
 								```