Create Image Gallery in 10 minutes!

Responsive with Filter Buttons

HTML

CSS

JAVASCRIPT

HTML button with [data-key] attribute

Create 4 HTML buttons and wrap it inside the div. Apply [data-kay] value to each button to pass value through event handler when button clicks.

create images with [data-key] attribute

Create all <img> tags and wrap it inside div. Apply [data-key] value to each image as it will be helpful to filter the image basis on which button pressed.

Apply display grid on image container

Apply display:gid on image wrapper & make 2 columns for small device & 3 columns for large screen. Change height, width, object fit for each image

Create DOM elem Variable - JS

Create 2 DOM element variables. One variable to capture all buttons and another to capture all images. Later we can access each with forEach loop 

Click event on button variable 

Apply forEach loop on button variable  and run click event listener on each selected element.  It will help select each element clicked.

Collect and store value [data-key]

Collect and store the value of each [data-key] attribute of clicked button with the help of getAttribute() function of javascript.  Store value in variable.

forEach on DOM image variable

Apply forEach on DOM image variable, capture and store the [data-key] attribute value of each image in variable.

Final logic to filter the images

Use if statement to check if value of button [data-key] and image [data-key] match. If matches then add show class to selected image.  (show is CSS class with display : block)

Thanks for reading!

Also Read : 10 Steps to write CSS faster for new web developer