Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 31, 2021 05:26 pm GMT

Image Search App in 10 MINUTES Challenge - Unsplash Api and CSS grid

I made an image search app that in 10 MINUTES, can search a list of images using a keyword from the Unsplash API.

Checkout the deployed project here:
https://photosearch-unsplash.netlify.app/

Watch the YouTube video:

Hello, and welcome to my blog!

In this video, I make a photo search app, that takes in a keyword and return 10 images that is taken from the unsplash.com API. The user can search with any keyword and scroll through to the next / previous page. This is a challenge, and my fourth attempt when I finally managed to code the app in less than 10 minutes!

You can view all the code on Github: https://github.com/SebCodesTheWeb/photosearch

--How it works--

It's quite simple. I align everything using css grid, and have 10 empty images when the website first loades. I use a css background pattern and some hover effect to make everything look nice. When the user types in a keyword and clicks on submit the code makes a request to the unsplash api, and returns a list of urls related to that keyword. It then sets the src attribute of those images to the urls returned.

The fetch call looks like this:

function displayImages(keyword, page) {    fetch(`https://apis.scrimba.com/unsplash/search/photos?query=${keyword}&page=${page}`)        .then(res => res.json())        .then(data => {            for(let i = 0; i < 10; i++) {                images[i].setAttribute("src", `${data.results[i].urls.small}`)            }        })}

And that's more or less it, the only hard part is making everything come together in 10 minutes ;)

--About me--

Hello! My name is Sebastian, and I'm a high-school student from Sweden. I have dabbled with some front-end development for the past few months. And since Christmas brake finally arrived, I've decided to start a challenge for myself! I'm going to code for the coming 20 days.

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch)

By the end of the 20 days I'm hoping to have finished the front-end career path and have started with some backend Node.js development. I will be documenting my progress for the coming days, and filming myself on my Youtube-channel, so feel free to follow along my journey and learn with me!

--Social Media--


Original Link: https://dev.to/sebcodestheweb/image-search-app-in-10-minutes-challenge-unsplash-api-and-css-grid-ako

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To