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

---
id: 5cddbfd622f1a59093ec611d
title: Create a Module Script
challengeType: 6
---

## Description
<section id='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 <code>module</code>. Here’s an example:

```html
<script type="module" src="filename.js"></script>
```

A script that uses this <code>module</code> type can now use the <code>import</code> and <code>export</code> features you will learn about in the upcoming challenges. 
</section>

## Instructions
<section id='instructions'>
Add a script to the HTML document of type <code>module</code> and give it the source file of <code>index.js</code>
</section>

## Tests
<section id='tests'>

```yml
tests:
  - text: You should create a <code>script</code> tag.
    testString: assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
  - text: Your <code>script</code> tag should be of type <code>module</code>.
    testString: assert(code.match(/<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g));
  - text: Your <code>script</code> tag should have a <code>src</code> of <code>index.js</code>.
    testString: assert(code.match(/<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g));
```

</section>

## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>

```html
<html>
  <body>
    <!-- add your code below -->

    <!-- add your code above -->
  </body>
</html>
```

</div>
</section>

## Solution
<section id='solution'>

```html
<html>
  <body>
    <!-- add your code below -->
    <script type="module" src="index.js"></script>
    <!-- add your code above -->
  </body>
</html>
```

</section>
-												fix/revise-es6-import-export-lessons

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

											
										
										
											2019-05-30 09:04:11 -05:00
+								challengeType: 6
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 06:33:17 -05:00
+								---
 								## Description
 								<section id='description'>
-												fix/final-draft-before-reviews

											
										
										
											2019-05-31 19:48:23 -05: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 <code>module</code>. Here’s an example:
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 06:33:17 -05:00
 								```html
 								<script type="module" src="filename.js"></script>
 								```
 								A script that uses this <code>module</code> type can now use the <code>import</code> and <code>export</code> features you will learn about in the upcoming challenges.
 								</section>
 								## Instructions
 								<section id='instructions'>
-												fix/final-draft-before-reviews

											
										
										
											2019-05-31 19:48:23 -05:00
+								Add a script to the HTML document of type <code>module</code> and give it the source file of <code>index.js</code>
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 06:33:17 -05:00
+								</section>
 								## Tests
 								<section id='tests'>
 								```yml
 								tests:
-												fix/add-tests

											
										
										
											2019-05-30 09:04:11 -05:00
+								  - text: You should create a <code>script</code> tag.
 								    testString: assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
 								  - text: Your <code>script</code> tag should be of type <code>module</code>.
-												fix/final-draft-before-reviews

											
										
										
											2019-05-31 19:48:23 -05:00
+								    testString: assert(code.match(/<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g));
-												fix/add-tests

											
										
										
											2019-05-30 09:04:11 -05:00
+								  - text: Your <code>script</code> tag should have a <code>src</code> of <code>index.js</code>.
-												fix/final-draft-before-reviews

											
										
										
											2019-05-31 19:48:23 -05:00
+								    testString: 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 06:33:17 -05:00
+								```
 								</section>
 								## Challenge Seed
 								<section id='challengeSeed'>
-												fix/add-tests

											
										
										
											2019-05-30 09:04:11 -05:00
+								<div id='html-seed'>
-												fix/revise-es6-import-export-lessons

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

											
										
										
											2019-05-30 09:04:11 -05:00
+								  <body>
 								    <!-- add your code below -->
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 06:33:17 -05:00
-												fix/add-tests

											
										
										
											2019-05-30 09:04:11 -05:00
+								    <!-- add your code above -->
 								  </body>
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 06:33:17 -05:00
+								</html>
 								```
 								</div>
 								</section>
 								## Solution
 								<section id='solution'>
 								```html
-												fix/add-tests

											
										
										
											2019-05-30 09:04:11 -05:00
+								<html>
 								  <body>
 								    <!-- add your code below -->
-												fix/build-error

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

											
										
										
											2019-05-30 09:04:11 -05:00
+								    <!-- add your code above -->
 								  </body>
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 06:33:17 -05:00
+								</html>
 								```
-												fix/final-draft-before-reviews

											
										
										
											2019-05-31 19:48:23 -05:00
-												fix/revise-es6-import-export-lessons

											
										
										
											2019-05-17 06:33:17 -05:00
+								</section>