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:

<!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>Fetch: Random Picture</title>
  </head>

  <body>
    <h1>Random Picture</h1>
    <h3>Here we'll use the Unsplash API to grab a random picture every time we come to the page:</h3>
    <img src="" class="random-image">
    <script src="random-photo-fetch.js"></script>
  </body>
</html>

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.

var randomImage = document.querySelector('.random-image'); 
console.log("randomImage:", randomImage);

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

PreviousUnsplash NextUnsplash JS

Last updated 7 years ago