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
---

# --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 be of type `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
-												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--
 								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));
 								```
 								Your `script` tag should be of type `module`.
 								```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>
 								```