Get an Unsplash image dynamically according to the random keyword API

Introduction

Hi, I'm a college student who is studying frontend web development thing in Canada!

Last week, I did a school homework “Random Joke Website”, which is the website that users can simply generate new random joke by clicking button (it's very simple web service - that's the only feature I need to make). To get random jokes, I used This API (For this assignment, we(students) needed to use random API like this) and wrote a simple Javascript codes, html and CSS. It was good practice to learn basic API management with JS syntax.

But, this is not the main topic to talk to you on this post. This is a little bit out of this homework’s point, but while I was working on this homework, I got an unique idea for this website.

Actually, this joke generator gives users joke text only. But what if users can see the image which fits in the topic, at the same time? I imagined, and felt sounds cool.

I thought that I can get an Unsplash image according to Random Joke API, dynamically. This is the main topic of this post.

But let's say, it is not a great idea actually - it is very small minor technic, and not perfectly working (I will explain about it later). But still I believe it's an inspirational for something. And also it is fun thing.

On this post, I share what I did - hope you guys enjoy!

Main part of Random Jokes codes

First of all, I write about the fundamental of random jokes codes before I talk about Unsplash thing.

Here is my Demo.

The concept of this homework is simple - make a button to generate random joke. For make it so, the process is like below.

1. Make a button with click event (This is a trigger)
2. Fetch an API and get a response
3. Make a function to get some properties with values from API. Use innerHTML to bring them to HTML).

For 1 and 2, I simply used addEventListener and basic JS Fetch syntax (there are nothing special things).

Before I mention about 3, let me show you the core part of my Javascript codes. See below image.

To get and place API props, simply I used innerHTML as you can see above.

You want know result? Yes, it worked properly!
Now users can generate random joke by clicking button.

By the way, I’m sorry for my code is not clean...

Get an Unsplash image dynamically according to keywords

Up until 3, it supposed to be good enough as a homework assignment. But as I mentioned above, while I was writing above codes I got an idea to make this website looks more eye-catching by using an Unsplash (Again, here is the main topic of this post!).

As many of you guys know, Unsplash is an amazing website to get many kinds of free-to-use photos from their large collection. The point is, there some tricks to access their collection by depending on purpose.

Basic Commands

If you want to get an image from Unsplash, you can copy URL address link directly by right click from Unsplash website and you can use this URL to put in to somewhere you wish to use. For example, background-image in CSS code, img tag in HTML, etc.

Also, besides that you designate specific URL on the code, you can get image randomly by using https://source.unsplash.com/random URL address. This URL would literally pick a random photo from their collection and useful.

Also you can add some filters to this URL. For example, https://source.unsplash.com/random?blue sky means pick random image from blue sky images in collection. Does it sound cool, right?

(There are more technics. If you want to know about other features and technics, search it in Dev.to or use google)

Use Punchline as a filter

As I wrote on Main part of Random Jokes codes, now I can access all props and its value from fetched API. My idea is, add API's Punchline (props) to this Unsplash URL address. I thought that Punchline can be used to interactively search image from collection in the meantime.

Result? - Try the Demo!

It looks working! But sometimes the image looks like not fitting to Punchline. Maybe if the Punchline is too long, or doesn't contain common keyword in Unsplash library, it is going to be hard to detect proper image.

Conclusion

I think this idea is not so practical and perfect, but it is very easy to try and enjoyable for me.

If you have any ideas to share with me about this topic, let me know.

Thank you for reading!

My Resources

https://github.com/koshirok096/CICCC_Homework_random-jokes/
https://ciccc-homework-random-jokes.vercel.app/

API

https://github.com/15Dkatz/official_joke_api
Copyright (c) 2022 David Katz