1.2 DOM APIs Review

Basic HTML5 App

# Star Wars Movie Example

Let's put some of these JavaScript language features that we have been reviewing to use in a practical example.

# Requirements

Retrieve an array of films objects from the Star Wars API web service (opens new window),
Display only the Episode Number, Title, and Release Date for each movie object in an unordered list.
The displayed list should be presented in order of episode number.

# Starter Code - HTML Markup

<!DOCTYPE html>
<html lang="en-CA">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>SWAPI Example</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <h1>Star Wars Films</h1>
      <section id="movie-list"></section>
    </div>

    <script src="./main.js"></script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# You might need ...

fetch
getElementBy...
createElement
appendChild
array map
array sort
template strings
array join

main.js - Don't peek yet!

Hey, I said don't peek!

The solution will be posted after class.

# Star Wars API Video

Here is a review of how the Star Wars API works.

← 1.1 JavaScript Review HTML5 App with Forms →