HackYourFuture-CPH
diff --git a/‎javascript2/week2/inclass/ex2.html
Lines changed: 9 additions & 1 deletion b/‎javascript2/week2/inclass/ex2.html
Lines changed: 9 additions & 1 deletion
diff --git a/‎javascript2/week2/inclass/ex2.js
Lines changed: 25 additions & 4 deletions b/‎javascript2/week2/inclass/ex2.js
Lines changed: 25 additions & 4 deletions
@@ -8,11 +8,19 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 </head>
-<body class="bg-light">
+<body>
     <div class="container">
         <h1 class="text-center">
             Listings
         </h1>
+        <div class="card">
+            <div class="card-body">
+                <h5 class="card-title">Filter options</h5>
+                <p class="card-text" id="filter">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+            </div>
+        </div>
+          
+        <div class="card" id="filter"></div>
         <div class="table-responsive">
             <table class="table table-hover">
                 <thead class="table-info">
 
@@ -34,15 +34,25 @@ function generateListings(numberOfListings) {
     return listings;
 }
 const tableBodyTag = document.getElementById("tableBody")
-const listings = generateListings(37);
+const listings = generateListings(1000);
 
 // Filter listings
 const filter = {
     type: 'farm',
+    facilities: ['Parkering', 'Husdyr'],
     minPrice: 1500,
     maxPrice: 8000,
+    hasGarden: false,
+    minSize: 50,
+    maxSize: 700
 };
 
+// add filter do DOM with id filter
+const filterTag = document.getElementById("filter")
+// JSON stringify with line breaks and spaces
+filterTag.innerHTML = JSON.stringify(filter, null, 2)
+
+
 // const filterListings = (listings, filter) => {
 //     const filteredItems = listings
 //         .filter(listing => listing.type.toLowerCase() === filter.type)
@@ -53,13 +63,24 @@ const filter = {
 const filterListings = (listings, filter) => {
     const allowedKeys = ["type", "facilities", "minPrice", "maxPrice", "hasGarden", "minSize", "maxSize"]
     const filteredKeys = Object.keys(filter).filter(element => allowedKeys.includes(element))
-    // console.log(filteredKeys)
+    console.log(filteredKeys)
 
     const filterFunctions = {
-        type: listing => listing.type.toLowerCase() === filter.type,
+        type: listing => listing.type.toLowerCase() === filter.type.toLowerCase(),
+        // next line is a bit more complicated, but it works
+        // it checks if the filter.facilities array includes any of the listing.facilities
+        // for filter.facilities.every see:
+        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every
+        facilities: listing => filter.facilities.every(facility => {
+            const listingFacilities = listing.facilities.map(facility => facility.toLowerCase())
+            const filterFacility = facility.toLowerCase()
+            return listingFacilities.includes(filterFacility)
+        }),
         minPrice: listing => listing.price >= filter.minPrice,
         maxPrice: listing => listing.price <= filter.maxPrice,
-        // add key and filtering function for each allowedKey from allowedKeys
+        hasGarden: listing => listing.hasGarden === filter.hasGarden,
+        minSize: listing => listing.size >= filter.minSize,
+        maxSize: listing => listing.size <= filter.maxSize,
     }
 
     filteredKeys.forEach(key => {