UrbanEats/index.js at main · prashant2007-wq/UrbanEats · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
document.addEventListener("DOMContentLoaded", function()
{
  const button = document.querySelector("#toggleBtn");
  const toggleText = document.querySelector(".toggle-text");
  const body = document.querySelector("body");
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "light-mode") {
    body.className = "light-mode";
    toggleText.textContent = "Light";
  } else {
    body.className = "dark-mode";
    toggleText.textContent = "Dark";
  }
  button.addEventListener("click", function() {
    if (body.className === "dark-mode" || body.className === "") {
      body.className = "light-mode";
      toggleText.textContent = "Light";
      localStorage.setItem("theme", "light-mode");
    } else {
      body.className = "dark-mode";
      toggleText.textContent = "Dark";
      localStorage.setItem("theme", "dark-mode");
    }
  });
  const searchInput = document.querySelector("#searchInput");
  const restaurants = document.querySelectorAll(".restaurant");

  searchInput.addEventListener("input", function() {
    const searchTerm = searchInput.value.toLowerCase().trim();

    restaurants.forEach(restaurant => {
      const name = restaurant.querySelector("h4").textContent.toLowerCase();
      const cuisine = restaurant.querySelectorAll("p")[0].textContent.toLowerCase();

      if (searchTerm === "" || name.includes(searchTerm) || cuisine.includes(searchTerm)) {
        restaurant.style.display = "block";
      } else {
        restaurant.style.display = "none";
      }
    });
  });
  const categories = document.querySelectorAll("#categories li");
  let currentCategory = "all";
  categories.forEach(category => {
    category.addEventListener("click", function() {
      categories.forEach(cat => cat.classList.remove("active-category"));
      this.classList.add("active-category");
      currentCategory = this.getAttribute("data-category");
      filterRestaurants();
    });
  });
  const ratingFilterBtn = document.querySelector("#ratingFilter");
  let ratingFilterActive = false;
  ratingFilterBtn.addEventListener("click", function() {
    ratingFilterActive = !ratingFilterActive;
    if (ratingFilterActive) {
      ratingFilterBtn.classList.add("active");
      ratingFilterBtn.textContent = "⭐ Clear Filter";
    } else {
      ratingFilterBtn.classList.remove("active");
      ratingFilterBtn.textContent = "⭐ 4.5+ Filter";
    }
    filterRestaurants();
  });
  function filterRestaurants() {
    restaurants.forEach(restaurant => {
      const restaurantCategory = restaurant.getAttribute("data-category");
      const restaurantRating = parseFloat(restaurant.getAttribute("data-rating"));

      let showByCategory = currentCategory === "all" || restaurantCategory === currentCategory;
      let showByRating = !ratingFilterActive || restaurantRating >= 4.5;

      if (showByCategory && showByRating) {
        restaurant.style.display = "block";
      } else {
        restaurant.style.display = "none";
      }
    });
  }
  const loadMoreBtn = document.querySelector("#loadMore");
  loadMoreBtn.addEventListener("click", function() {
    const hiddenRestaurants = document.querySelectorAll(".restaurant.hidden");
    hiddenRestaurants.forEach(restaurant => {
      restaurant.classList.remove("hidden");
      restaurant.style.display = "block";
    });
    if (hiddenRestaurants.length > 0) {
      loadMoreBtn.style.display = "none";
    }
  });
  const hiddenCount = document.querySelectorAll(".restaurant.hidden").length;
  if (hiddenCount === 0) {
    loadMoreBtn.style.display = "none";
  }

});