Image filter with javascript

I am new to web development. I am trying to create my photography webpage. I have created a basic html design. I want to filter the image when the specific button is clicked. I went through the w3schools code about it but could not get quite clear about it. Not with the JQuery. Here is my html code with buttons. Thank you

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gallery</title>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <script src="script.js"></script>
  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')">ALL</button>
    <button class="btn active" onclick="filterSelection('all')">Nature</button>
    <button class="btn active" onclick="filterSelection('all')">Animal</button>

  </div>
  <!--grid-->
  <div class="row">
    <div class="column_nature">
      <div class="content">
        <img src="images/nature.jpg" style="width:40%">
        <h4>Nature</h4>
        <p>This is me</p>
      </div>
    </div>
  </div>

  <div class="column_nature">
    <div class="content">
      <img src="images/swan.jpg" style="width:40%">
      <h4>Swan</h4>

    </div>
  </div>


</body>

</html>

Solution

Because both of your images had 'nature' on them, a filter would not have had any effect. I adapted your code to the w3schools example, but changed it so that the first image had 'nature' as a filter , and the second had 'bird' as a filter.

Incidentally, there is no underscore between the column and the filter name (If you put one in, as you did in your code) it won't work. I adapted this too.

Best of luck

/*this goes in your script.js*/

filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
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];
    }
  }
}

// Hide elements that are not selected
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("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
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";
  });
}

/*this bit will go into your style.css file*/

* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
    padding: 20px;
    font-family: Arial;
}

/* Center website */
.main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    word-break: break-all;
}

.row {
    margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    display: none; /* Hide columns by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: white;
    padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
   color: white;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gallery</title>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <script src="script.js"></script>
  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')">ALL</button>
    <button class="btn active" onclick="filterSelection('nature')">Nature</button>
    <button class="btn active" onclick="filterSelection('bird')">Animal</button>

  </div>
  <!--grid-->
  <div class="row">
    <div class="column nature">
      <div class="content">
        <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg" style="width:40%">
        <h4>Nature</h4>
        <p>This is me</p>
      </div>
    </div>
  </div>

  <div class="column bird">
    <div class="content">
      <img src="https://www.phrases.org.uk/images/swan-song-1.jpg" style="width:40%">
      <h4>Swan</h4>

    </div>
  </div>


</body>

</html>