Share your repls and programming experiences

← Back to all posts
🖼️ Fluid Grid of Random Images! 🖼️
RolandJLevy (635)

I set myself the challenge of making a fluid grid of random images which is fully responsive on any device 💻

All the images are generated on the fly using the Unsplash API and are resized using media queries. Try resizing the browser to see the fluidity of the grid 🍯

Features 💡

  • Choose any number of images (from 1 to 999!) and press enter
  • The input field is fully validated with error handling
  • Each random image is fetched from Unsplash API
  • All the images load into a scrollable container
  • Resize your browser to see media queries adjust the size of the images and number of columns per row
  • Click on an image to see full-size image on the Unsplash website
  • This is made from scratch with vanilla JavaScript and CSS - no frameworks or libraries
  • All works with just 80 lines of JavaScript! ⚡️

Links 🔗

Commentshotnewtop
Coder100 (10601)

goodbye network bandwidth!

RolandJLevy (635)

@Coder100 hmmm... you're right, good point. I'll see if I can implement infinite scrolling. Do you think that's a good option or something else? I could use pagination instead but I find it clunky in terms of usability

python88 (193)

remember the ted talk you asked for a long time ago? Here it is! : https://www.youtube.com/watch?v=VMIpxqeoI1c @rjlevy

RolandJLevy (635)

Hi @python88, thanks for sharing the Ted talk. It was awesome!

RolandJLevy (635)

Hey @python88, how are you doing and how is your coding going?

python88 (193)

@rjlevy I just posted a Pokemon game. It's not finished, but can you check it out?

python88 (193)

Also, I noticed that a game called among us is getting popular. Do you know that [email protected]

Coder100 (10601)

ahhh no do not spread it onto repl.it @python88

RolandJLevy (635)

Sounds good @python88. Can you send me a link to your Pokemon game?

RolandJLevy (635)

Hi @python88, well done on your Pokemon game. I can see you spent a lot of time on it :)

RolandJLevy (635)

Hi @OrangeJooce123, thanks! Any suggestions for improving or adding to it?

RolandJLevy (635)

Hey @ZDev1, thanks! Any ideas for improvement?

ZDev1 (693)

@rjlevy no! it is very cool :)

RolandJLevy (635)

Hi @python88, thanks. How do you think it could be improved?

python88 (193)

maybe if there are alot of pictures, the images are a little bit smaller than if you had only a few. @rjlevy

RolandJLevy (635)

Hi @python88, that's a good idea but might be a lot of work to implement :)

Bookie0 (4494)

pretty cool!

A tip could be to make is so that if the user chooses a number like 1 or 2 or 3, or another small number like that, the grid could kinda close around so that there's less of that white empty space! ;)

RolandJLevy (635)

Hi @Bookie0, thanks for your feedback! It's a good idea although it might be a bit tricky to achieve. I'll take a look...

techde (117)

Wow, it doesn't doesn't look responsive on the iPhone 7 though...

techde (117)

It's an awesome project never the less!

RolandJLevy (635)

@techde, ah thanks for your feedback. What do you see on your iPhone? I thought you would get something like this:

fuzzyastrocat (1225)

Pretty cool! Is it suppose to only crop/scale on the X-axis? I'm guessing yes because there's a vertical scrollbar, but just checking.

RolandJLevy (635)

@fuzzyastrocat, good to hear from you! Yes, good point. The scaling only happens horizontally. People can load up to 999 images so vertical scaling wouldn't be possible.

fuzzyastrocat (1225)

@rjlevy Ah right, didn't think about that. Once again, nicely done!

RolandJLevy (635)

@fuzzyastrocat thanks - it's good to have your positive feedback :)

techde (117)

@rjlevy I am 9 I dont have an iPhone I used the inspect tool which might look different...

fuzzyastrocat (1225)

@techde @rjlevy Interesting, I tried the inspect tool on Chrome and it seems to respond nicely.