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 movie objects from the Star Wars API web service,
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>

# You might need ...

fetch
getElementBy
createElement
appendChild
array map
array sort
template strings

main.js - Don't peek yet!

Hey, I said don't peek!

The solution will be posted after class.

← 1.1 JavaScript Review HTML5 App with Forms →