Responsive Image Gallery With Search Box Using HTML, CSS and JavaScript

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.

HTML
<!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>
CSS
@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;
}
JavaScript
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)
You have to wait 15 seconds.

Generating Download Link...

Post a Comment

Previous Post Next Post