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.
Last updated