Search Bar Filter Using Vanilla Javascript

#javascript #html #css #vanillajs

We can achieve simple things like search products and filter them using simple vanilla javascript. jQuery, Ajax might make things simple, the same time it makes the app bulky. I have used only 40 lines of js code to achieve this.
I think nowadays rather than depending on libraries we should focus more on how to accomplish our task using vanilla javascript as much as we can.

Try this small project on - https://lnkd.in/diS5S2T

Code-
javaScript

//Defining Ui
const filter = document.querySelector('.searchBar');
const fruitList = document.querySelector('.collection');

//Load Event Listners
loadEventListners();

//Load all event listners  function
function loadEventListners(){
    //filter fruit
    filter.addEventListener('keyup', filterFruit);
    //search Bar cross malfunction
    filter.addEventListener("search", closeSearch);
}

//filter function
function filterFruit(e){
    //Accessing input data from input field
    const text = e.target.value.toLowerCase();

    document.querySelectorAll('.collection-item').forEach
    (function (fruit){
        const item = fruit.textContent;
        if(item.toLowerCase().indexOf(text) != -1){
            fruit.style.display = 'block';
        }else{
            fruit.style.display = 'none';
            noResult.style.display ='block';
        }
    });
}

//Search cross malfunction closeSearch
function closeSearch(e){
    document.location.reload();
}

//just for fun
const heading = document.querySelector('#heading');
heading.style.cssText= "font-family: 'Langar', cursive;";

Html

<!-- boiler template -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruit Search</title>
    <link rel="stylesheet" href="style.css">

<!-- google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">

<!-- fontawesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

</head>

<body>

<!-- heading -->
    <h1 id="heading">Fruit Search</h1>

<!-- Search Bar -->
    <input type="search" class="searchBar" name="Search" results="5" placeholder="Search">

<!-- Product Template -->
    <div>
        <ul class="collection">
<!-- apple -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Apple">
                    <img src="https://isurojit.github.io/fruitsearch/img/apple.png" alt="apple">
                </a>
                <h1>Apple</h1>
            </li>

<!-- orange -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Orange_(fruit)">
                    <img src="https://isurojit.github.io/fruitsearch/img/orange.jpg" alt="orange">
                </a>
                <h1>Orange</h1>
            </li>

<!-- mango -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Mango">
                    <img src="https://isurojit.github.io/fruitsearch/img/mango.jpeg" alt="mango">
                </a>
                <h1>Mango</h1>
            </li>

<!-- banana -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Banana">
                    <img src="https://isurojit.github.io/fruitsearch/img/banana.jpg" alt="banana">
                </a>
                <h1>Banana</h1>
            </li>

<!-- pomegranate -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Pomegranate">
                    <img src="https://isurojit.github.io/fruitsearch/img/pomegranate.png" alt="pomegranate">
                </a>
                <h1>Pomegranate</h1>
            </li>

<!-- pitaya -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Pitaya">
                    <img src="https://isurojit.github.io/fruitsearch/img/dragonfruit.jpg" alt="pitaya">
                </a>
                <h1>Pitaya</h1>
            </li>

<!-- kiwi -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Kiwifruit">
                    <img src="https://isurojit.github.io/fruitsearch/img/kiwi.png" alt="kiwi">
                </a>
                <h1>Kiwi</h1>
            </li>

<!-- papaya -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Papaya">
                    <img src="https://isurojit.github.io/fruitsearch/img/papaya.jpg" alt="papaya">
                </a>
                <h1>Papaya</h1>
            </li>

<!-- strawberry -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Strawberry">
                    <img src="https://isurojit.github.io/fruitsearch/img/strawberry.jpg" alt="strawberry">
                </a>
                <h1>Strawberry</h1>
            </li>

<!-- watermelon -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Watermelon">
                    <img src="https://isurojit.github.io/fruitsearch/img/watermellon.jpg" alt="watermellon">
                </a>
                <h1>Watermelon</h1>
            </li>

<!-- pear -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Pear">
                    <img src="https://isurojit.github.io/fruitsearch/img/pears.png" alt="pear">
                </a>
                <h1>Pear</h1>
            </li>

<!-- cherry -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Cherry">
                    <img src="https://isurojit.github.io/fruitsearch/img/cherry.jpg" alt="cherry">
                </a>
                <h1>Cherry</h1>
            </li>

 <!-- end of products -->           
        </ul>
<!-- end of list -->
    </div>
<!-- end of product template -->

  <footer>

        <h4>Made With <i class="fas fa-heart"></i> by <a href="https://www.linkedin.com/in/surojit-manna">isuro</a></h4>

  </footer>

    <script src="app.js"></script>
</body>
</html>

Css

body{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.collection-item:hover{
    transform: scale(.9);
    transition: all .5s ease-in-out;
    cursor: pointer;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    img{
        width: 90%;
    }
    .collection{
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
    }
    .collection-item{
        list-style: none;
        flex: 0 0 24.3333%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 15%;
        padding: 2%;
        margin: 2% 2%;
    }
    h1{
        text-align: center;
    }
    input{
        width: 75%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 40px;
        padding: 1.5%;
        outline:none;
        margin: 1% 12%;
        font-size: 3rem;
    }

}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .collection-item{
        list-style: none;
        flex: 0 0 95%;
    }
    img{
        width: 100%;
    }
    input{
        width: 75%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 40px;
        padding: 1.5%;
        outline:none;
        margin: 2% 10%;
        font-size: 3rem;
    }
    h1{
        text-align: center;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 900px) and (min-width: 600px){
    .collection-item{
        list-style: none;
        flex: 0 0 45%;
    }
    img{
        width: 100%;
    }
    input{
        width: 75%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 40px;
        padding: 1.5%;
        outline:none;
        margin: 2% 10%;
        font-size: 3rem;
    }
    h1{
        text-align: center;
    }
}

/* Scroll bar */

  /* width */
  ::-webkit-scrollbar {
    width: 20px;
  }

  /* Track */

    ::-webkit-scrollbar-track {
    background: rgb(255, 0, 0); 
  }

  /* Handle */

    ::-webkit-scrollbar-thumb {
    background: rgb(38, 0, 255); 
    border-radius: 50px;
  }


  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: rgb(0, 255, 42); 
  } 
  footer{
      text-align: center;
  }

[ps:- didn't work on CSS. so kept it messy.]

Any suggestions welcome.