Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Responsive Image Gallery With Search Box" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Responsive Image Gallery With Search Box" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below.
Responsive Image Gallery With Search Box [Source Code]
To get the following HTML, CSS & JS code for the Responsive Image Gallery With Search Box project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.
You can also download all source code files from the given download button.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image Gallery With Search Box</title> <link rel="stylesheet" href="style.css"> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/ebb335c6c8.js" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h1>Responsive Image Gallery With Search Box</h1> <div class="inputContainer"> <input type="text"> <i class="fa-solid fa-magnifying-glass"></i> </div> <div class="imagesContainer"> <div class="imageBox" data-name="rcb"> <img src="images/virat_rcb.webp" alt=""> <div class="shadow"></div> <p>Virat Kohli</p> </div> <div class="imageBox" data-name="mi"> <img src="images/rohith_mi.webp" alt=""> <div class="shadow"></div> <p>Rohith Sharma</p> </div> <div class="imageBox" data-name="csk"> <img src="images/dhoni_csK.jpg" alt=""> <div class="shadow"></div> <p>Dhoni</p> </div> <div class="imageBox" data-name="srh"> <img src="images/bhuvi_srh.jpg" alt=""> <div class="shadow"></div> <p>Bhuvaneshvar Kumar</p> </div> <div class="imageBox" data-name="rcb"> <img src="images/duplessis_rcb.jpg" alt=""> <div class="shadow"></div> <p>Faf Duplessis</p> </div> <div class="imageBox" data-name="mi"> <img src="images/surya_mi.jpg" alt=""> <div class="shadow"></div> <p>Surya Kumar Yadav</p> </div> <div class="imageBox" data-name="csk"> <img src="images/jadeja_csk.jpg" alt=""> <div class="shadow"></div> <p>Ravindra Jadeja</p> </div> <div class="imageBox" data-name="srh"> <img src="images/markram_srh.jpg" alt=""> <div class="shadow"></div> <p>Aiden Markram</p> </div> </div> </div> <script src="index.js"></script> </body> </html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #998fc7; max-width: 1000px; margin: 2px auto; } .container { display: flex; justify-content: center; flex-direction: column; align-items: center; } h1 { color: #28262c; text-align: center; } .inputContainer { width: 400px; margin: 20px 0; position: relative; } .inputContainer input { font-size: 20px; width: 100%; height: 50px; outline: none; padding: 0 20px; color: whitesmoke; background-color: #28262c; border-radius: 50px; border: 3px solid whitesmoke; } .inputContainer i { font-size: 24px; color: #998fc7; position: absolute; right: 20px; top: 50%; transform: translate(-50%, -50%); cursor: pointer; } .imagesContainer { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .imagesContainer .imageBox { position: relative; width: 200px; height: 290px; border: 3px solid white; border-radius: 20px; overflow: hidden; } .imagesContainer .imageBox img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out; } .imagesContainer .imageBox:hover img { transform: scale(1.1); } .shadow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 20px; box-shadow: inset 0 0 50px black, inset 0 0 100px black; } p { font-size: 12px; font-weight: 600; position: absolute; bottom: 8px; left: 15px; color: whitesmoke; opacity: 0.8; }
const inputEl = document.querySelector("input"); const searchEl = document.querySelector(".inputContainer i"); const imageBoxEl = document.querySelectorAll(".imageBox"); // when we press ENTER button or when we click search button this function will start executing. function handleSearch(event){ if(event.key==="Enter" || event==="search"){ const inputValue = inputEl.value; const value = inputValue.toLowerCase(); // if the entered value is equal to dataset name then it shows (i.e block) or else it display none. imageBoxEl.forEach((image)=>{ if(value===image.dataset.name){ image.style.display = "block" }else{ image.style.display = "none" } }) } } // when we click on the search button it call the handleSearch function. searchEl.addEventListener("click",()=>{ handleSearch("search"); }) inputEl.addEventListener("keyup",()=>{ if(inputEl.value!="") return; // if there is empty value then it shows all the images. imageBoxEl.forEach((image)=>{ image.style.display = "block" }) }) // when we press the ENTER button then it calls the handleSearch function. inputEl.addEventListener("keyup",handleSearch)