# Unsplash Random Image

**URL:** https://forum.kirupa.com/t/unsplash-random-image/659712
**Category:** programming
**Created:** [June 28, 2023, 8:41pm UTC](https://forum.kirupa.com/t/unsplash-random-image/659712 "2023-06-28T20:41:28Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![toucandesign](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/toucandesign/32/22545_2.png) [@toucandesign](https://forum.kirupa.com/u/toucandesign)
#### Post date: [June 28, 2023, 8:41pm UTC](https://forum.kirupa.com/t/unsplash-random-image/659712/1 "2023-06-28T20:41:28Z")

</div>

Good afternoon,

I enjoyed your video on Unsplash Random Image but using [Codepen.io](http://Codepen.io) I get no image to load. I’ve been over this many times, including copying solutions from other posts like [653866](http://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866). Can you please give me some insight of what may be the issue?

```auto
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Random Image</title>
</head>
<style>
  body {
    background-color: yellow;
    text-align: center;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #unsplashImage {
    max-height: 500px;
    border: 20px solid black;
    transform: rotate(3deg);
  }

  h1 {
    font-size: 56px;
  }

  .imageDetails {
    background-color: black;
    margin-top: 50px;
    padding: 10px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    width: fit-content;
  }

  .imageDetails a {
    color: #FFF;
  }

  .imageDetails a:hover {
    color: yellow;
  }
</style>

<body>
  <h1>Random Unsplash Image</h1>
  <div class="imageContainer">
    <a id="imageLink" href="#">
      <img alt="" id="unsplashImage"/>
    </a>
  </div>
  <p class="imageDetails">Photo by <a id="creator" href="#">NAME</a> on <a href="https://www.unsplash.com">Unsplash</a>!</p>
  
  <script>
    let clientID = "SkboUPrymrHxVKoIAe_hoCWJTlgvevsT3IZlK9eK8J0";
    let endpoint = `https://api.unsplash.com/photos/random/?client_id=${clientID}`;
    
    let imageElement = document.querySelector("#unsplashImage");
    let imageLink = document.querySelector("#imageLink");
    let creator = document.querySelector("#creator");
    
    fetch(endpoint)
      .then(function (response) {
        return response.json();
      })
     .then(function (jsaonData) {
        imageElement.src = jsonData.urls.regular;
        imageLink.setAttribute("href", jsonData.links.html);
      
        creator.innerText = jsonData.user.name;
        creator.setAttribute("href, jsonData.user.portfolio_url");
     })
    .catch(function (error) {
      console.log("Error: " + error);
    });
  </script>
</body>

</html>

```

---

<div class="post-metadata">

### Author: ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)
#### Post date: [June 29, 2023, 3:58am UTC](https://forum.kirupa.com/t/unsplash-random-image/659712/2 "2023-06-29T03:58:23Z")

</div>

Just a small typo on your part…  
`.then(function (jsaonData) {` …should be… `.then(function (jsonData) {` … you just typed an extra `a` in `json`.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 29, 2023, 6:13am UTC](https://forum.kirupa.com/t/unsplash-random-image/659712/3 "2023-06-29T06:13:41Z")

</div>

One way to catch errors like what @PAEz highlighted is to bring up the console and see if there are any errors 😀

> **[Console Logging Basics](https://www.kirupa.com/html5/console.htm)**
>
> Go beyond silly alert statements and learn how to use the console to get a better view into what your code is doing.

---

<div class="post-metadata">

### Author: ![toucandesign](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/toucandesign/32/22545_2.png) [@toucandesign](https://forum.kirupa.com/u/toucandesign)
#### Post date: [June 29, 2023, 1:49pm UTC](https://forum.kirupa.com/t/unsplash-random-image/659712/4 "2023-06-29T13:49:57Z")

</div>

Thanks for finding that, must have read it 20 times and missed it. I’ll respond to the console reply below.

One last question, please:  
Clearly I’m not a programmer but doing this by necessity as Unsplash has depreciated their random images without using an API by URL like this example “[https://source.unsplash.com/1024x480/?locksmith](https://source.unsplash.com/1024x480/?locksmith)”  
Is there a way to add in the above script a category or search term? And if so, could you use multiple, like “locksmith & locks” to pull up locksmith and lock images?

Thanks again for your assistance.

---

<div class="post-metadata">

### Author: ![toucandesign](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/toucandesign/32/22545_2.png) [@toucandesign](https://forum.kirupa.com/u/toucandesign)
#### Post date: [June 29, 2023, 1:51pm UTC](https://forum.kirupa.com/t/unsplash-random-image/659712/5 "2023-06-29T13:51:57Z")

</div>

Thank you, was looking for a way to check this code for simple errors as I published. Is this possible in [codepen.io](http://codepen.io) or do I have to publish this and check in a browser?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [July 1, 2023, 8:10am UTC](https://forum.kirupa.com/t/unsplash-random-image/659712/6 "2023-07-01T08:10:14Z")

</div>

Codepen does have a console tab that can bring up errors as they appear 😀
