Hi, I'm a college student who is studying frontend web development thing in Canada!
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.
- Make a button with click event (This is a trigger)
Fetchan API and get a response
- Make a function to get some properties with values from API. Use
innerHTMLto bring them to HTML).
For 1 and 2, I simply used
addEventListener and basic JS
Fetch syntax (there are nothing special things).
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.
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.
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!
Copyright (c) 2022 David Katz
Top comments (0)