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