How to add filter with Portfolio Gallery using HTML, CSS and JavaScript ?

The portfolio gallery is useful when your website contains different types of content or so many contents. With the help of a portfolio gallery, you can easily display all the contents on your front page to the user. But if user wants some specific contents then we need to attach filters on the portfolio. In this article, we will add filters using JavaScript. Before proceeding into this article you can see the article ‘how to create a Portfolio Gallery using HTML and CSS?‘.

Creating Structure: In this section, we will create the basic website structure of the portfolio. Here, we will attach the title attribute so the user can know what will be the content type on each gird of the portfolio.

  • HTML code: In this section, we will design the basic structure of Portfolio Gallery.

    html

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <meta name="viewport" content=
            "width=device-width, initial-scale=1">
    </head>
      
    <body>
      
        <!-- Title and tag -->
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <h3>A Computer Science Portal for Geeks</h3>
            <hr>
      
            <!-- Content of the body-->
            <h2>Portfolio of Languages</h2>
      
            <!-- Button foreach group -->
            <div id="filtering">
                <button class="bttn active"
                        onclick="geeksportal('all')"
                Show all
                </button>
                <button class="bttn"
                        onclick="geeksportal('Markup')"
                Markup
                </button>
                <button class="bttn"
                        onclick="geeksportal('Style')"
                Style
                </button>
                <button class="bttn"
                        onclick="geeksportal('Scripting')"
                Scripting
                </button>
            </div>
      
            <!-- Portfolio Gallery Grid -->
            <div class="row">
                <div class="column Markup">
                    <div class="content">
                        <img src=
                            alt="HTML" style="width:100%">
                        <h3><a href="#">
                            HTML Tutorials
                            </a>
                        </h3>
                        <p>
                            HTML stands for Hyper Text Markup
                            Language. It is used to design web
                            pages using markup language. HTML
                            is the combination of Hypertext
                            and Markup language. Hypertext
                            defines the link between the web
                            pages.
                        </p>
                    </div>
                </div>
                <div class="column Styleshit">
                    <div class="content">
                        <img src=
                            alt="CSS" style="width:100%">
                        <h3><a href="#">
                            CSS Tutorials
                            </a>
                        </h3>
                        <p>
                            Cascading Style Sheets, fondly
                            referred to as CSS, is a simply
                            designed language intended to
                            simplify the process of making
                            web pages presentable. CSS allows
                            you to apply styles to web pages.
                        </p>
                    </div>
                </div>
                <div class="column Scripting">
                    <div class="content">
                        <img src=
                            alt="" style="width:100%">
                        <h3><a href="#">
                            PHP Tutorials
                            </a>
                        </h3>
                        <p>
                            The term PHP is an acronym for PHP: 
                            Hypertext Preprocessor. PHP is a 
                            server-side scripting language 
                            designed specifically for web 
                            development. PHP can be easily
                            embedded in HTML files.
                        </p>
                    </div>
                </div>
                <div class="column Scripting">
                    <div class="content">
                        <img src=
                            alt="" style="width:100%">
                        <h3><a href="#">
                            JavaScript Tutorials
                            </a>
                        </h3>
                        <p>
                            Javascript was developed by Brendan
                            Eich in 1995. At first, it was called
                            LiveScript but was later name to 
                            JavaScript. JavaScript is the muscle
                            of the structure
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

Designing Structure: In the previous section, we have created the structure of the basic website and now we are going to use CSS to design the structure of the web-page.



  • CSS code:

    CSS

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
           
        /* Wildcard styling */
        * {
            box-sizing: border-box;
        }
               
        /* Padding for whole body */
        body {
            padding: 15px;
        }
               
        .container {
            max-width: 1200px;
            margin: auto;
        }
               
        /* Styling h2 tag */
        h1 {
            Color: green;
            word-break: break-all;
        }
               
        /* Anchor tag decoration */
        a {
            text-decoration: none;
            color: #5673C8;
        }
               
        a:hover {
            color: lightblue;
        }
               
        .row {
            margin: 0px -14px;
            padding: 8px;
        }
               
        .row > .column {
            padding: 6px;
        }
               
        .column {
            float: left;
            width: 25%;
            display: none;
        }
               
        /* Content decoration */
        .content {
            background-color: white;
            padding: 10px;
            border: 1px solid gray;
        }
               
        /* Paragraph decoration */
        p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }
               
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
               
        .content {
            background-color: white;
            padding: 10px;
            border: 1px solid gray;
        }
               
        .show {
            display: block;
        }
               
        /* Style the filter buttons */
        .bttn {
            border: none;
            padding: 8px 14px;
            background-color: gray;
        }
               
        .bttn:hover {
            background-color: #007EE5;
            opacity: 0.8;
        }
               
        .bttn.active {
            background-color: #007EE5;
            color: white;
        }
           
        /* Window size 850 width set */
        @media screen and (max-width: 850px) {
            .column {
                width: 50%;
            }
        }
           
        /* Window size 400 width set */
        @media screen and (max-width: 400px) {
            .column {
                width: 100%;
            }
        }
    </style>

    chevron_right

    
    

  • JavaScript code:

    javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        geeksportal("all")
       
        function geeksportal(c) {
            var x, i;
              
            x = document.getElementsByClassName("column");
              
            if (c == "all") c = "";
              
            for (i = 0; i < x.length; i++) {
                w3RemoveClass(x[i], "show");
                  
                if (x[i].className.indexOf(c) > -1) 
                    w3AddClass(x[i], "show");
            }
        }
       
        function w3AddClass(element, name) {
            var i, arr1, arr2;
            arr1 = element.className.split(" ");
            arr2 = name.split(" ");
              
            for (i = 0; i < arr2.length; i++) {
                if (arr1.indexOf(arr2[i]) == -1) {
                    element.className += " " + arr2[i];
                }
            }
        }
       
        function w3RemoveClass(element, name) {
            var i, arr1, arr2;
            arr1 = element.className.split(" ");
            arr2 = name.split(" ");
            for (i = 0; i < arr2.length; i++) {
                while (arr1.indexOf(arr2[i]) > -1) {
                    arr1.splice(arr1.indexOf(arr2[i]), 1);
                }
            }
            element.className = arr1.join(" ");
        }
       
        // Add active class to the current
        // button (highlight it)
        var btnContainer = document.getElementById("filtering");
        var btns = btnContainer.getElementsByClassName("bttn");
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function() {
                  
                var current = 
                    document.getElementsByClassName("active");
                  
                current[0].className = 
                    current[0].className.replace(" active", "");
                  
                this.className += " active";
            });
        }
    </script>

    chevron_right

    
    

Combining the HTML, CSS and JavaScript Code: Combining HTML, CSS and JavaScript section code to make a complete Portfolio Gallery with the filter.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <style>
           
        /* Wildcard styling */
        * {
            box-sizing: border-box;
        }
               
        /* Padding for whole body */
        body {
            padding: 15px;
        }
               
        .container {
            max-width: 1200px;
            margin: auto;
        }
               
        /* Styling h2 tag */
        h1 {
            Color: green;
            word-break: break-all;
        }
               
        /* Anchor tag decoration */
        a {
            text-decoration: none;
            color: #5673C8;
        }
               
        a:hover {
            color: lightblue;
        }
               
        .row {
            margin: 0px -14px;
            padding: 8px;
        }
               
        .row > .column {
            padding: 6px;
        }
               
        .column {
            float: left;
            width: 25%;
            display: none;
        }
               
        /* Content decoration */
        .content {
            background-color: white;
            padding: 10px;
            border: 1px solid gray;
        }
               
        /* Paragraph decoration */
        p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }
               
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
               
        .content {
            background-color: white;
            padding: 10px;
            border: 1px solid gray;
        }
               
        .show {
            display: block;
        }
               
        /* Style the filter buttons */
        .bttn {
            border: none;
            padding: 8px 14px;
            background-color: gray;
        }
               
        .bttn:hover {
            background-color: #007EE5;
            opacity: 0.8;
        }
               
        .bttn.active {
            background-color: #007EE5;
            color: white;
        }
           
        /* Window size 850 width set */
        @media screen and (max-width: 850px) {
            .column {
                width: 50%;
            }
        }
           
        /* Window size 400 width set */
        @media screen and (max-width: 400px) {
            .column {
                width: 100%;
            }
        }
    </style>
</head>
  
<body>
  
    <!-- Title and tag -->
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <h3>A Computer Science Portal for Geeks</h3>
        <hr>
  
        <!-- Content of the body-->
        <h2>Portfolio of Languages</h2>
  
        <!-- button foreach group -->
        <div id="filtering">
            <button class="bttn active"
                    onclick="geeksportal('all')"
            Show all
            </button>
            <button class="bttn"
                    onclick="geeksportal('Markup')"
            Markup
            </button>
            <button class="bttn"
                    onclick="geeksportal('Style')"
            Style
            </button>
            <button class="bttn"
                    onclick="geeksportal('Scripting')"
            Scripting
            </button>
        </div>
  
        <!-- Portfolio Gallery Grid -->
        <div class="row">
            <div class="column Markup">
                <div class="content">
                    <img src=
                        alt="HTML" style="width:100%">
                    <h3><a href="#">
                        HTML Tutorials
                        </a>
                    </h3>
                    <p>
                        HTML stands for Hyper Text Markup
                        Language. It is used to design web
                        pages using markup language. HTML
                        is the combination of Hypertext
                        and Markup language. Hypertext
                        defines the link between the web
                        pages.
                    </p>
                </div>
            </div>
            <div class="column Styleshit">
                <div class="content">
                    <img src=
                        alt="CSS" style="width:100%">
                    <h3><a href="#">
                        CSS Tutorials
                        </a>
                    </h3>
                    <p>
                        Cascading Style Sheets, fondly
                        referred to as CSS, is a simply
                        designed language intended to
                        simplify the process of making
                        web pages presentable. CSS allows
                        you to apply styles to web pages.
                    </p>
                </div>
            </div>
            <div class="column Scripting">
                <div class="content">
                    <img src=
                        alt="" style="width:100%">
                    <h3><a href="#">
                        PHP Tutorials
                        </a>
                    </h3>
                    <p>
                        The term PHP is an acronym for PHP: 
                        Hypertext Preprocessor. PHP is a 
                        server-side scripting language 
                        designed specifically for web 
                        development. PHP can be easily
                        embedded in HTML files.
                    </p>
                </div>
            </div>
            <div class="column Scripting">
                <div class="content">
                    <img src=
                        alt="" style="width:100%">
                    <h3><a href="#">
                        JavaScript Tutorials
                        </a>
                    </h3>
                    <p>
                        Javascript was developed by Brendan
                        Eich in 1995. At first, it was called
                        LiveScript but was later name to 
                        JavaScript. JavaScript is the muscle
                        of the structure
                    </p>
                </div>
            </div>
        </div>
    </div>
      
    <script>
        geeksportal("all")
       
        function geeksportal(c) {
            var x, i;
              
            x = document.getElementsByClassName("column");
              
            if (c == "all") c = "";
              
            for (i = 0; i < x.length; i++) {
                w3RemoveClass(x[i], "show");
                  
                if (x[i].className.indexOf(c) > -1) 
                    w3AddClass(x[i], "show");
            }
        }
       
        function w3AddClass(element, name) {
            var i, arr1, arr2;
            arr1 = element.className.split(" ");
            arr2 = name.split(" ");
              
            for (i = 0; i < arr2.length; i++) {
                if (arr1.indexOf(arr2[i]) == -1) {
                    element.className += " " + arr2[i];
                }
            }
        }
       
        function w3RemoveClass(element, name) {
            var i, arr1, arr2;
            arr1 = element.className.split(" ");
            arr2 = name.split(" ");
            for (i = 0; i < arr2.length; i++) {
                while (arr1.indexOf(arr2[i]) > -1) {
                    arr1.splice(arr1.indexOf(arr2[i]), 1);
                }
            }
            element.className = arr1.join(" ");
        }
       
        // Add active class to the current
        // button (highlight it)
        var btnContainer = document.getElementById("filtering");
        var btns = btnContainer.getElementsByClassName("bttn");
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function() {
                  
                var current
                    document.getElementsByClassName("active");
                  
                current[0].className
                    current[0].className.replace(" active", "");
                  
                this.className += " active";
            });
        }
    </script>
</body>
  
</html>

chevron_right



Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.