add filter elements

HectorVilas · Apr 25, 2023 · 1ce14ae · 1ce14ae
1 parent 2651105
commit 1ce14ae
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/modules/pages/shop.js b/modules/pages/shop.js
@@ -1,3 +1,5 @@
+const shopCategories = ['All Collections', 'Cacti', 'Plants', 'Succulents'];
+
 export default function home() {
   const shop = [categories(), banner(), catalog()];
 
@@ -7,9 +9,8 @@ export default function home() {
 function categories() {
   const section = document.createElement('section');
   const categoriesList = document.createElement('ul');
-  const categories = ['All Collections', 'Cacti', 'Plants', 'Succulents'];
 
-  categories.forEach((category, i) => {
+  shopCategories.forEach((category, i) => {
     const li = document.createElement('li');
     li.textContent = category;
 
@@ -29,7 +30,7 @@ function banner() {
   const section = document.createElement('section');
   const title = document.createElement('h1');
 
-  title.textContent = 'All Collections';
+  title.textContent = shopCategories[0];
 
   section.classList.add('shop-banner');
 
@@ -40,8 +41,25 @@ function banner() {
 
 function catalog() {
   const section = document.createElement('section');
+  const filterDiv = document.createElement('div');
+  const filter = document.createElement('p');
+  const dropdown = document.createElement('select');
+  const dropdownOptions = ['Best Selling', 'Lorem Ipsum', 'Dolor Sit', 'Amet Consectetur'];
+
+  dropdownOptions.forEach(category => {
+    const option = document.createElement('option');
+    option.textContent = category;
+
+    dropdown.append(option);
+  });
+
+  filter.textContent = 'Filter';
 
   section.classList.add('shop-catalog');
+  filterDiv.classList.add('shop-filter');
+
+  filterDiv.append(filter, dropdown);
+  section.append(filterDiv);
 
   return section;
 }