College-Saver/script.js at main · JAE20/College-Saver · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// Filter products by category
const categoryButtons = document.querySelectorAll('.category-button');
const cards = document.querySelectorAll('.card');
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const searchMessage = document.getElementById('search-message');

categoryButtons.forEach(button => {
  button.addEventListener('click', () => {
    const category = button.getAttribute('data-category');

    // Show all cards if the category is "all"
    if (category === 'all') {
      cards.forEach(card => {
        card.style.display = 'block';
      });
    } else {
      cards.forEach(card => {
        const cardCategory = card.getAttribute('data-category');
        card.style.display = cardCategory === category ? 'block' : 'none';
      });
    }
  });
});

// Sort products by price
const sortSelect = document.getElementById('sort-select');
const productsContainer = document.querySelector('.products');

sortSelect.addEventListener('change', () => {
  const selectedValue = sortSelect.value;
  const cardsArray = Array.from(cards);

  if (selectedValue === 'price-low-high') {
    cardsArray.sort((a, b) => {
      const aPrice = parseInt(a.querySelector('.price').textContent.replace('₱', ''));
      const bPrice = parseInt(b.querySelector('.price').textContent.replace('₱', ''));
      return aPrice - bPrice;
    });
  } else if (selectedValue === 'price-high-low') {
    cardsArray.sort((a, b) => {
      const aPrice = parseInt(a.querySelector('.price').textContent.replace('₱', ''));
      const bPrice = parseInt(b.querySelector('.price').textContent.replace('₱', ''));
      return bPrice - aPrice;
    });
  }

  // Remove existing cards
  cards.forEach(card => {
    card.remove();
  });

  // Append sorted cards
  cardsArray.forEach(card => {
    productsContainer.appendChild(card);
  });
});

// Search products
searchButton.addEventListener('click', () => {
  const searchText = searchInput.value.toLowerCase();

  cards.forEach(card => {
    const title = card.querySelector('.title').textContent.toLowerCase();
    const category = card.querySelector('.cty').textContent.toLowerCase();

    if (title.includes(searchText) || category.includes(searchText)) {
      card.style.display = 'block';
    } else {
      card.style.display = 'none';
    }
  });

  if (searchText === '') {
    searchMessage.textContent = '';
  } else if (document.querySelectorAll('.card[style="display: block;"]').length === 0) {
    searchMessage.textContent = `No product is named '${searchText}'`;
  } else {
    searchMessage.textContent = '';
  }
});

// Update product display as you type
searchInput.addEventListener('input', () => {
  const searchText = searchInput.value.toLowerCase();

  cards.forEach(card => {
    const title = card.querySelector('.title').textContent.toLowerCase();
    const category = card.querySelector('.cty').textContent.toLowerCase();

    if (searchText === '') {
      card.style.display = 'block'; // Restore original state
    } else if (title.includes(searchText) || category.includes(searchText)) {
      card.style.display = 'block';
    } else {
      card.style.display = 'none';
    }
  });

  if (searchText === '') {
    searchMessage.textContent = '';
  } else if (document.querySelectorAll('.card[style="display: block;"]').length === 0) {
    searchMessage.textContent = `No product is named '${searchText}'`;
  } else {
    searchMessage.textContent = '';
  }
});