Search and Filter Gallery

A gallery with keyword title search and filter terms

by ayunami2000

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://jsfiddle.net/ewebster/a81v1q46/35/href=%22https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
      <input  type="text" id="searchEntry" placeholder="Search">
      <input type="submit" id="searchBtn" class="searchButton"/>

			<ul>
		<li>	<button class="filter-button" data-filter="all">All </button></li>
			<li><button class="filter-button" data-filter="short">Short </button></li>
		<li>	<button class="filter-button" data-filter="tall">Tall </button></li>
			<li><button class="filter-button" data-filter="big">Big </button></li>
		<li>	<button class="filter-button" data-filter="small">Small </button></li>
		<li>	<button class="filter-button" data-filter="many">Many</button> </li>
    <li><button class="filter-button" data-filter="few">Few </button></li>
			</ul>
			<div class="filter hidden all">
				All of Them
				<hr />
			</div>
						<div class="filter hidden short">
				Just the Short Ones
				<hr />
			</div>
						<div class="filter hidden tall">
				All the Tall Ones
				<hr />
			</div>
						<div class="filter hidden big">
				Only the Big Ones
				<hr />
			</div>
			<div class="filter hidden small">
				All the Small Ones
				<hr />
			</div>
						<div class="filter hidden many">
				The Many Ones
				<hr />
			</div>
		 <div class="filter hidden few">
				The Few
				<hr />
			</div>
			
			
			<div class="filter item all big tall">
				Big and Tall
			</div>
				<div class="filter item all short small">
				Short and Small
			</div>
		 <div class="filter item all big short">
				Big and Short
			</div>
				 <div class="filter item all tall small">
				Tall and Small
			</div>
				 <div class="filter item all...

CSS

body{
	font-family: arial;
	font-size: small;
}
.item{
	height: 60px;
	width: 50px;
	padding: 10px;
	margin: 10px;
	background-color: grey;
	text-align: center;
	color: white;
	overflow: wrap;	
  float: left;
}
ul{
  list-style-type: none;
  
  margin-left: -35px;
}
li {
   display: inline;
}
.filter-button{
  width: 50px;
 margin-bottom: 5px;
  
}
.filter-button:hover{
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}
.hidden {
	display: none;
}

JavaScript

$(document).ready(function () {
            //declare a global variable
            var filterVal;
            //check if sessionStorage exists and if so, if there is a var called fillTerm
            //if not, set it to a default value (all)
            if (sessionStorage && sessionStorage.getItem("filTerm")) {
                filterVal = sessionStorage.getItem("filTerm");
            } else {
                filterVal = "all";
                sessionStorage.setItem("filTerm", filterVal);
            }

            //now let's attach some interaction to our buttons
            $(".filter-button").on("click", function () {
                //get the value for our filter
                filterVal = $(this).attr("data-filter");
                //store it in the session storage
                sessionStorage.setItem("filTerm", filterVal);
                console.log(sessionStorage);
                console.log(filterVal);
                //call our view update function
                updateView();
            });
            
            $("#searchBtn").on("click",function(){
                filterVal = $('#searchEntry').val();
                sessionStorage.setItem("filTerm", filterVal);
                updateView();
            });
            
            $("#searchEntry").on("keypress",function(e){
		            if (e.keyCode == 13) {
                  filterVal = $('#searchEntry').val();
                  sessionStorage.setItem("filTerm", filterVal);
                  updateView();
                }
            });

            //this is the function that manipulates the UI
            function updateView() {
                //default situation: all is visible
                if (!filterVal || filterVal === "all") {
                    $(".filter").show();
                    $(".filter").not(".all").hide();
                }
                    //hide all and show filtered values
                else {
                    $(".filter").hide();
                 ...