Sigma-Web-Dev-Course/Video 83/Solutions/11_solve.html at a61400de658dc44c11c33d0a865027c3b4d18e09 · CodeWithHarry/Sigma-Web-Dev-Course · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #1e1e1e;
      font-family: sans-serif;
      color: white;
    }

    h2 {
      text-align: center;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th,
    td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
    }

    th {
      background-color: #000000;
    }
    #filter{
      padding: 0.5rem 0.9rem 0.5rem 0.5rem;
      cursor: pointer;
      background-color: #55fcffc7;
      border: none;
      border-radius: 0.2rem;
    }
    #filter:focus{
      outline: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>Product List</h2>
    <label for="filter">Filter Categories: </label>
    <select name="filter" id="filter">
      <option value="all">All</option>
      <option value="Electronics">Electronics</option>
      <option value="Footwear">Footwear</option>
      <option value="Accessories">Accessories</option>
      <option value="Wearable Tech">Wearable Tech</option>
    </select>
    <table id="productTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Category</th>
          <th>Price ($)</th>
          <th>Stock</th>
          <th>Rating</th>
        </tr>
      </thead>
      <tbody>
        <!-- Products will be inserted here -->
      </tbody>
    </table>
  </div>
  <script>
    let products = [
      {
        "id": 1,
        "name": "Wireless Mouse",
        "category": "Electronics",
        "price": 25.99,
        "stock": 120,
        "rating": 4.5
      },
      {
        "id": 2,
        "name": "Mechanical Keyboard",
        "category": "Electronics",
        "price": 79.99,
        "stock": 75,
        "rating": 4.7
      },
      {
        "id": 3,
        "name": "Running Shoes",
        "category": "Footwear",
        "price": 59.99,
        "stock": 200,
        "rating": 4.3
      },
      {
        "id": 4,
        "name": "Smart Watch",
        "category": "Wearable Tech",
        "price": 149.99,
        "stock": 50,
        "rating": 4.6
      },
      {
        "id": 5,
        "name": "Backpack",
        "category": "Accessories",
        "price": 39.99,
        "stock": 180,
        "rating": 4.2
      }
    ]

    function displayProducts(products) {
      let tableBody = document.querySelector("#productTable tbody");
      tableBody.innerHTML = ""; // Clear previous content

      products.forEach(product => {
        let row = `
          <tr>
            <td>${product.id}</td>
            <td>${product.name}</td>
            <td>${product.category}</td>
            <td>${product.price.toFixed(2)}</td>
            <td>${product.stock}</td>
            <td>${product.rating} ⭐</td>
          </tr>
        `;
        tableBody.innerHTML += row;
      });
    }

    displayProducts(products);

    let val = document.getElementById("filter");
    val.addEventListener("change", (e) => {
      let filterC = e.target.value;
      if (filterC === "all") {
        displayProducts(products);
      }
      else {
        let newProducts = products.filter(Element => Element.category === filterC);
        displayProducts(newProducts);
      }
    })
  </script>
</body>

</html>