Unsplash Random Image

programming
1

Good afternoon,

I enjoyed your video on Unsplash Random Image but using Codepen.io I get no image to load. I’ve been over this many times, including copying solutions from other posts like 653866. Can you please give me some insight of what may be the issue?

<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>
2

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

1 Like
3

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

4

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”
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.

5

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

6

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