ADDING TAX-SWITCH

 A TAX-SWITCH IS ADDED INORDER TO DISPLAY THE TAXES OF THE LISTINGS AFTER A CLICK

IT IS ADDED IN THE SAME <div> BLOCK OF filter 

COMPLETE FILTER.EJS

<nav

  class="navbar-bottom navbar-expand-md bg-body-light border-bottom sticky-top"

>

<%- include("../includes/flash.ejs") %>

  <div class="container-fluid">

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

      <div class="navbar-nav">

        <div id="filters" class="nav-link sticky-top">

          <a href="/listings?category=Trending" class="filter">

            <div><i class="fa-solid fa-fire"></i></div>

            <p>Trending</p>

          </a>

          <a href="/listings?category=Beaches" class="filter">

            <div><i class="fa-solid fa-umbrella-beach"></i></div>

            <p>Beaches</p>

          </a>

          <a href="/listings?category=Skyscrapers" class="filter">

            <div><i class="fa-solid fa-city"></i></div>

            <p>Skyscrapers</p>

          </a>

          <a href="/listings?category=Apartments" class="filter">

            <div><i class="fa-solid fa-building"></i></div>

            <p>Apartments</p>

          </a>

          <a href="/listings?category=Rooms" class="filter">

            <div><i class="fa-solid fa-bed"></i></div>

            <p>Rooms</p>

          </a>

          <a href="/listings?category=Mountains" class="filter">

            <div><i class="fa-solid fa-mountain-sun"></i></div>

            <p>Mountains</p>

          </a>

          <a href="/listings?category=Pools" class="filter">

            <div><i class="fa-solid fa-person-swimming"></i></div>

            <p>Pools</p>

          </a>

          <a href="/listings?category=Arctic" class="filter">

            <div><i class="fa-solid fa-snowflake"></i></div>

            <p>Arctic</p>

          </a>

          <a href="/listings?category=Farms" class="filter">

            <div><i class="fa-solid fa-wheat-awn"></i></div>

            <p>Farms</p>

          </a>

          <a href="/listings?category=Hotels" class="filter">

            <div><i class="fa-solid fa-hotel"></i></div>

            <p>Hotels</p>

          </a>

          <a href="/listings?category=Lakes" class="filter">

            <div><i class="fa-solid fa-water"></i></div>

            <p>Lakes</p>

          </a>

          <a href="/listings?category=Camps" class="filter">

            <div><i class="fa-solid fa-tents"></i></div>

            <p>Camps</p>

          </a>

          <a href="/listings?category=Forts" class="filter">

            <div><i class="fa-solid fa-building-columns"></i></div>

            <p>Forts</p>

          </a>

         

          <div class="tax-switch nav-link">

            <div class="form-check-reverse form-switch">

              <input

                class="form-check-input btn-tax"

                type="checkbox"

                role="switch"

                id="flexSwitchCheckDefault"

              />

              <label class="form-check-label" for="flexSwitchCheckDefault"

                >Display total after taxes</label

              >

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</nav>

<script>

  let taxSwitch = document.getElementById("flexSwitchCheckDefault");

  taxSwitch.addEventListener("click", () => {

    let taxInfo = document.getElementsByClassName("tax-info");

    for (info of taxInfo) {

      if (info.style.display != "inline") {

        info.style.display = "inline";

      } else {

        info.style.display = "none";

      }

    }

  });

</script>

WE USE EVENT LISTENERS TO MAKE IT FUNCTIONAL.

<script>

  let taxSwitch = document.getElementById("flexSwitchCheckDefault");

  taxSwitch.addEventListener("click", () => {

    let taxInfo = document.getElementsByClassName("tax-info");

    for (info of taxInfo) {

      if (info.style.display != "inline") {

        info.style.display = "inline";

      } else {

        info.style.display = "none";

      }

    }

  });

</script>

WE USE A LOOP AS THE SWITCH ONLY FUNCTIONS ONCE.THE STYLING OF THE SWITCH IS SET TO NONE . AS SOON AS THE STYLING IS NOT INCLINE IF CONDITION IS APPLIED.

.tax-info{

  display: none;

}

.tax-switch{

  border: 1px solid black !important;

  border-radius: 1rem;

  height: 3rem;

  width:15.5rem;

  padding: 1rem;

  align-items: center;

  justify-content: center;

  margin-right: 2rem !important;

}