Search filter using JavaScript

Hey, developers welcome to Day 75 of our 90Days 90Projects challenge. And today in this challenge we are going to Create a Responsive Search filter using HTML CSS and JavaScript

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

search filter using javascript, raju webdev, geeks help

HTML Code

index.html

<DOCTYPE html>
    <html>

    <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> Search Filter </title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <section class="search-container">
            <h2> Our FREE Courses </h2>
            <input type="text" id="searchInput" placeholder="Search Courses Here..." />
            <ul id="courses-lists">
                <li> <a class="html" href="#"> HTML Simplified Course </a></li>
                <li><a class="css" href="#"> CSS Mastery Course</a></li>
                <li><a class="js" href="#"> JavaScript Doctory Course</a></li>
                <li><a class="git" href="#"> Git/Github Master Course </a></li>
                <li><a class="react" href="#"> ReactJS Hunter Course </a></li>
                <li><a class="node" href="#"> NodeJS Ninja Course </a></li>
                <li><a class="express" href="#"> Express Ninja Course </a></li>
                <li><a class="mongo" href="#"> MongoDB Course </a></li>
            </ul>
        </section>
    </body>
    <script src="script.js"></script>

    </html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200; 300; 400; 500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #e65b00;
}

.search-container {
    width: 100%;
    padding: 30px 10px;
}

h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #fff;
}

#searchInput {
    border-radius: 5px;
    width: 100%;
    font-size: 1rem;
    padding: 10px 30px;
    border: none;
    outline: none;
    margin-bottom: 1rem;
}


#courses-lists {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#courses-lists li {
    border-bottom: 1px solid rbg(110, 97, 97);
    border-radius: 5px;
}

#courses-lists li a {
    border-radius: 5px;
    background-color: #f6f6f6;
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    color: black;
    display: block;
}

#courses-lists li .html:hover {
    background-color: rgba(246, 148, 123, 0.76);
}

#courses-lists li .css:hover {
    background-color: rgb(136, 156, 234);
}

#courses-lists li .js:hover {
    background-color: rgb(249, 234, 137);
}

#courses-lists li .git:hover {
    background-color: rgb(238, 153, 138);
}

#courses-lists li .react:hover {
    background-color: rgb(95, 229, 253);
}

#courses-lists li li .node:hover {
    background-color: rgb(138, 219, 135);
}

#courses-lists li .express:hover {
    background-color: rgb(122, 117, 117);
}

#courses-lists li .mongo:hover {
    background-color: rgb(89, 201, 145);
}

JavaScript

script.js

const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('keydown', () => {
    let input, lowerCase, li, a, i, searchInputValue;
    input = document.getElementById('searchInput');
    lowerCase = input.value.toLowerCase();
    courseLis = document.getElementById('courses-lists');
    li = courseLis.getElementsByTagName('li');
    for(i=0; i<li.length; i++){
        a = li[i].getElementsByTagName('a')[0];
        searchInputValue = a.textContent || a.innerText;
        if(searchInputValue.toLowerCase().indexOf(lowerCase) > -1){
            li[i].style.display = 'block';
        } else {
            li[i].style.display = 'none';
        }
    }
});

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

1 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. this given code doesnt match the output

    ReplyDelete

Top Post Ad

Below Post Ad