This project contains start code and some challenges that work with modules and creating libraries.
The sample JS code here uses <script type="module">
to load JS code using ES6 modules. Modules give you a powerful way to organize code.
Modules provide scope, all variables and functions defined in a module scoped to that module.
Values can be shared across modules using import
and export
. When exporting a value you are exporting that binding not a copy. If the value is a Array, Object, or Function you are exporting a reference to source.
Modules organize code into logical groups by file. Use modules to keep code that is related in one place.
Export only what is relavant to the rest of your code base.
How compatible are modules? Check out the usage here:
https://caniuse.com/#search=modules
The sample code requests data from SWAPI (Star Wars API) and displays it in the browser. You can open index.html
in your browser. Type number of a Star Wars character in the field and hit return or click Submit to load that characters information.
Open index.html and look at the code here. Notice the script tag:
<script type="module" src="index.js"></script>
The type
attribute notifies the browser that this script is a module
. A script marked with type="module"
can use the import
and export
key words to share bindings across files.
The code in the example is organized across these JS files:
index.js
- Entry point and developer codedom-elements.js
- Get references to DOM elementsswapi-helper.js
- Contains code to load data from SWAPIconstants.js
- Contains some constants shared by the program
constants.js
, dom-elements.js
, and swapi-helper.js
all export something. constants.js
and dom-elements.js
both export multiple things with export
.
swap-helper.js
exports only a single function and exports this with export default
. A file may only export one element as default
.
index.js
import from swap-helper.js
and dom-elements.js
.
import getPeople from './swapi-helper.js'
import { displayEl, formEl, inputID } from './dom-elements.js'
First line imports the default
export from swapi-helper
.
The second line imports from dom-elements.js
these are not default exports and they are wrapped in the {
and }
While you work on the challenges below use the modules to your advantage. Continue with the pattern used by the existing modules. Add new modules when and if you think they are needed.
The code here could be improved. Take a look at the code. examine it to get comfortable with how it works.
In a nutshell getPeople()
takes the person id and a callback function. When the data is loaded it calls the callback and passes a JSON object as an argument.
getPeople()
takes a callback and retrieves a person. Using a Promise
here would be better than using a callback.
If you haven't already getPeople()
might be best as an async
function.
Use the async
and await
key words to handle your network transaction.
The current app searches for people in the Star Wars stories the API also has data on:
- people
- films
- starships
- vehicles
- planets
Your goal with this challenge is to handle loading data from any of these routes.
This challenge is open ended. You can solve it in anyway that makes sense to you.
Don't worry about adding to the interface. Instead just allow the input to search for one category at a time.
When searching for a person the results show a single url or an array of urls for:
- films
- vehicles
- starships
- homeworld
Your goal with this challenge is to request each of these from the SWAPI server and display the results.
You'll need to delay displaying the results until all of the data has arived.
You'll also need to get the person data first before you can request the other things.
Use Promise.all()