Unsplash Setup

Next, let's go ahead and set up our HTML file, and get our JS file started.

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
               └── 02-Unsplash
                 └── index.html <--- You will be working in these files
                 └── random-photo-fetch.js <---

HTML File

Let's start with our HTML file. Make your index.html look like the below code:

JavaScript

Now let's start our random-photo-fetch.js file. We'll start with document.querySelector() just like in the Star Wars API JS file. This is grabbing our .random-image img tag and saving it to the variable randomImage.

Next, we'll dive into working with our API and fetch!

PreviousUnsplashNextUnsplash JS

Last updated