Built with CSS and Javascript
Javascript
CSS3
HTML5
This is a relatively simple component that displays images in a visually attractive way. different versions of this idea were making the rounds of social media in June 2022. As an exercise I decided to implement it from scratch.
This version improves in important ways the more simple versions available at the time of writing this (mid June 2022). First, it uses Scrimba API to get images from Unsplash. In this way, new images are displayed whenever the page is refreshed. In addition, using a simple if statement in javascript, the app fetches landscape-orientated photos when used in small screens (less than 1300px) and fetches portrait-orientated photos in bigger screens.
Second, most versions of this component don't shrink enlarged photos when clicking on it. This is isn't the best behaviour - it's impossible to go back to the initial state. To deal with this I simply added an if statement in javascript to check, first of all, if the clicked images is enlarged - if it is, then javascript will shrink it back to its initial size.
Third, I added credits for all the images with links to the photographers and to the unsplsh website. The information is displayed when hovering at the bottom of the images.
The component uses grid to display the images and uses media queries to responsively display the photos in small and large screens.