Using the Unsplash API to Display Random Images
Tags: showdev, javascript
Published: 2019-06-21 18:40:56

---
title: Using the Unsplash API to Display Random Images
published: true
description: Use the Unsplash API to generate random images for your projects as placeholders!
tags: #showdev, #javascript
cover_image: https://images.unsplash.com/photo-1529675641475-78780f1fd4b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80
---

About three years ago I [bought a domain name](http://blondeandthebeach.com), intending, as always, to launch a project with it. Here we are three years later and I've done exactly _no_ work on the project ¯\_(ツ)_/¯ 

To practice some JavaScript, I decided to explore Unsplash's API to create an interactive placeholder in the meantime.

{% codepen https://codepen.io/desilove/pen/zXPpVY %}

### Breaking it down

```javascript
const numItemsToGenerate = 1;
```
This just sets us up for the number of items we’ll request from the service.

```javascript
function renderItem(){
  fetch(`https://source.unsplash.com/1600x900/?beach`).then((response) => {   
    let item = document.createElement('div');
    item.classList.add('item');
    item.innerHTML = `<img class="beach-image" src="${response.url}" alt="beach image"/>`     
    document.body.appendChild(item);
  }) 
}
```
This actually pulls the photo in and passes it to the `div` it created (`item`). In the URL `https://source.unsplash.com/1600x900/?beach` you could remove the slug or input another search term instead. [Use their documentation](https://source.unsplash.com/) to further customize, including images from specific users, particular sizes of image, or lots of other parameters.

Because I just wanted to set the image as the full background, I’m appending the `img` to `innerHTML`, rather than targeting a particular div or section on the page. 


If you wanted to target a specific ID or class, you’d add something like this to the script:

```javascript
    let item = document.getElementByID('existing');
    item.existing = `<img class="beach-image" src="${response.url}" alt="beach image"/>`   
```

Then to pass through and render the image:

```javascript
for(let i=0;i<numItemsToGenerate;i++){
  renderItem();
}
```

### In retrospect

At first, it was wild to think about using JS only and not building in any HTML to display the image, so first I tried building a `div` into the HTML body. I tried using class names and setting IDs, and I couldn't seem to target it, so I flipped to this different strategy [using a tutorial as a guide](https://medium.com/quick-code/how-to-quickly-generate-a-random-gallery-of-images-from-an-unsplash-collection-in-javascript-4ddb2a6a4faf).

Once I got the API working and displaying, the image dimensions were wild - turns out I was including the image dimensions in the source URL, so I pulled that out and created a CSS class for `img` since there was only going to be one displaying.

I made this just as a way to practice JavaScript and generate random  images that would make me happy to look at. It's also the first time I've explored an API or read up on documentation for a purpose other than proofing/editing/writing. 

In revisiting it now, I'm seeing another way I could have set the image as the `body-background` rather than creating a `div` and using a CSS class to size the photo which is kind of exciting - I'm *~ learning ~*!