JS-151-API
  • JavaScript Library
  • 02-DOM-Manipulation
    • Overview
    • DOM Explained
    • Example Setup
    • Selecting Elements
    • Events
    • Complete Example
  • 03-API Fundamentals
    • 0-Getting Started
      • Welcome
    • 1-Intro-To-APIs
      • Intro
      • Client
      • Requests
      • JSON
      • API Endpoints
      • Server
      • Response
      • Statelessness
      • REST
    • 2-Asynchronous-Programming
      • Intro
      • Callbacks
      • Promises
      • Promises Continued
      • Chaining Promises
    • 3-Fetch
      • Fetch Intro
      • Star Wars
        • Star Wars API
        • Star Wars Setup
        • Star Wars JS
      • Random Photo
        • Unsplash
        • Unsplash Setup
        • Unsplash JS
    • 4-Apps
      • 01-New York Times
        • 00-App Intro
        • 01-HTML/CSS/API Key
        • 02-Variables
        • 03-Event Listeners
        • 04-fetchResults
          • 01-fetchResults()
          • 02-preventDefault()
          • 03-fetch() method
          • 04-Dates
        • 05-displayResults
          • 01-Logging JSON
          • 02-Working with JSON
          • 03-Link Display
          • 04-Results Navigation
          • 05-Results Update
          • 06-Keywords
          • 07-Images
        • 06-Pagination
          • 01-Pagination Intro
          • 02-Pagination Functions
        • 07-Next Steps
      • 02-YouTube
        • html
        • youtube.css
        • youtube.js
      • 03-GoogleMaps
        • Setup
        • HTML and CSS files
        • API Key
        • JS Setup
        • Adding Your Location
        • Listeners
        • Custom Options
Powered by GitBook
On this page
  1. 03-API Fundamentals
  2. 3-Fetch
  3. Star Wars

Star Wars Setup

Before we start talking about JavaScript, we're going to create our HTML page for this application!

File Structure

We will be working with the following files:

    javascript-library
        └── 0-JavaScript-PreWork
        └── 1-JavaScript-Fundamentals
        └── 2-JavaScript-DOM-Manipulation
        └── 3-JavaScript-API-Fundamentals
            └── 1-Intro-to-APIs
            └── 2-Asynchronous-Programming
            └── 3-Fetch
                └── 01-Star-Wars
                    index.html <--
                    star-wars-scripts.js  <-----

You guys are familiar with HTML, so we're just going to set up a pretty basic HTML page. Let's look at the <head> of our HTML page. We have a lot of the normal stuff in here. The title of our application will be "Star Wars People" since that's the API endpoint we're working with. Type the following code in your index.html file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Star Wars People</title>
  </head>

  <body>

  </body>
</html>

Let's next look at the body of this page. Here, we're setting up a structure to frame and display the information we pull back from the API. Notice that we create an unordered list and say that the JavaScript items will load here. Lastly, we've put a script tag with a source of our star-wars-scripts.js.

<h1>Star Wars Characters</h1>
    <p>Here we'll use the Star Wars Api to get a list of people</p>

    <ul>
        <!--The JavaScript will load items here-->

    </ul>

    <script src="star-wars-scripts.js"></script>

This should all look pretty familiar. If you've forgotten what any of these HTML tags do, use google to refresh your memory!

Next, we'll look at the JavaScript portion of our little app and how to utilize fetch and APIs.

PreviousStar Wars APINextStar Wars JS

Last updated 7 years ago