verified product responsiveness corrected

nnocj · Nov 4, 2024 · 339ece6 · 339ece6
1 parent 929b1d5
commit 339ece6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 171 deletions.
diff --git a/project/scripts/verifiedabode-data-loader.js b/project/scripts/verifiedabode-data-loader.js
@@ -1,46 +1,52 @@
 
+// Fetch and render the rental listings
 // Fetch and render the rental listings
 async function loadListings() {
     try {
         const response = await fetch('https://nnocj.github.io/wdd131/project/rents.json');
         const data = await response.json();
         const container = document.getElementById('rents');
-
-        data.rentalListings.forEach(listing => {
-            // Create listing card
-            const card = document.createElement('div');
-            card.className = 'listing-card';
-
-            // Add image
-            const img = document.createElement('img');
-            img.className = 'listing-image';
-            img.src = listing.propertyImages[0];
-            img.alt = `Image of property at ${listing.propertyAddress}`;
-            card.appendChild(img);
-
-            // Add listing info
-            const info = document.createElement('div');
-            info.className = 'listing-info';
-
-            // Add rent price
-            const price = document.createElement('h3');
-            price.textContent = `$${listing.rentPrice}`;
-            info.appendChild(price);
-
-            // Add location and city
-            const location = document.createElement('p');
-            location.textContent = `Location: ${listing.propertyAddress}, ${listing.city}`;
-            info.appendChild(location);
-
-            // Add rent duration
-            const duration = document.createElement('p');
-            duration.textContent = `Rent Duration: ${listing.rentDuration}`;
-            info.appendChild(duration);
-
-            // Append info to card and card to container
-            card.appendChild(info);
-            container.appendChild(card);
-        });
+
+        // Function to render listings
+        const renderListings = (listings) => {
+            container.innerHTML = ''; // Clear the container first
+            listings.forEach(listing => {
+                const card = document.createElement('div');
+                card.className = 'listing-card';
+                card.innerHTML = `
+                    <img class="listing-image" src="${listing.propertyImages[0]}" alt="Image of property at ${listing.propertyAddress}" loading="lazy">
+                    <div class="listing-info">
+                        <h3>$${listing.rentPrice}</h3>
+                        <p>Location: ${listing.propertyAddress}, ${listing.city}</p>
+                        <p>Rent Duration: ${listing.rentDuration}</p>
+                    </div>
+                `;
+                container.appendChild(card);
+            });
+        };
+
+        // Initial render of all listings
+        renderListings(data.rentalListings);
+
+        // Filter function by city
+        const filterHomesByCity = (city) => {
+            let filteredHomes;
+            if (city === 'all') {
+                filteredHomes = data.rentalListings; // Show all listings
+            } else {
+                filteredHomes = data.rentalListings.filter(listing => listing.city.toLowerCase() === city.toLowerCase());
+            }
+            renderListings(filteredHomes);
+        };
+
+        // Event listeners for filtering by city
+       // Event listener for the select dropdown
+       const homeFilter = document.getElementById('homeFilter');
+       homeFilter.addEventListener('change', (event) => {
+           const selectedCity = event.target.value;
+           filterHomesByCity(selectedCity);
+       });
+
     } catch (error) {
         console.error('Error loading listings:', error);
     }

diff --git a/project/scripts/verifiedabode.js b/project/scripts/verifiedabode.js
@@ -11,139 +11,7 @@ hamButton.addEventListener('click', () => {
    navigation.style.display == "contents";
 });
 
-//declaring the temples container
-const templesElement = document.querySelector(".temples");
 
-const temples = [
-   {
-     templeName: "Aba Nigeria",
-     location: "Aba, Nigeria",
-     dedicated: "2005, August, 7",
-     area: 11500,
-     imageUrl:
-     "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/aba-nigeria/400x250/aba-nigeria-temple-lds-273999-wallpaper.jpg"
-   },
-   {
-     templeName: "Manti Utah",
-     location: "Manti, Utah, United States",
-     dedicated: "1888, May, 21",
-     area: 74792,
-     imageUrl:
-     "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/manti-utah/400x250/manti-temple-768192-wallpaper.jpg"
-   },
-   {
-     templeName: "Payson Utah",
-     location: "Payson, Utah, United States",
-     dedicated: "2015, June, 7",
-     area: 96630,
-     imageUrl:
-     "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/payson-utah/400x225/payson-utah-temple-exterior-1416671-wallpaper.jpg"
-   },
-   {
-     templeName: "Yigo Guam",
-     location: "Yigo, Guam",
-     dedicated: "2020, May, 2",
-     area: 6861,
-     imageUrl:
-     "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/yigo-guam/400x250/yigo_guam_temple_2.jpg"
-   },
-   {
-     templeName: "Washington D.C.",
-     location: "Kensington, Maryland, United States",
-     dedicated: "1974, November, 19",
-     area: 156558,
-     imageUrl:
-     "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/washington-dc/400x250/washington_dc_temple-exterior-2.jpeg"
-   },
-   {
-     templeName: "Lima Perú",
-     location: "Lima, Perú",
-     dedicated: "1986, January, 10",
-     area: 9600,
-     imageUrl:
-     "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/lima-peru/400x250/lima-peru-temple-evening-1075606-wallpaper.jpg"
-   },
-   {
-     templeName: "Mexico City Mexico",
-     location: "Mexico City, Mexico",
-     dedicated: "1983, December, 2",
-     area: 116642,
-     imageUrl:
-     "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/mexico-city-mexico/400x250/mexico-city-temple-exterior-1518361-wallpaper.jpg"
-   },
-   // Add more temple objects here...
-   {
-      templeName: "Ghana Accra",
-      location: "Accra, Ghana",
-      dedicated: "2004, January, 11 ",
-      area: 17500,
-      imageUrl: "https://churchofjesuschristtemples.org/assets/img/temples/accra-ghana-temple/accra-ghana-temple-13760-main.jpg"
-   },
-   {
-      templeName: "Adelaide Australia Temple",
-      location: "Abidjan, Ivory Coast",
-      dedicated: "2000, June, 15",
-      area: 10700,
-      imageUrl: "https://churchofjesuschristtemples.org/assets/img/temples/adelaide-australia-temple/adelaide-australia-temple-4359-main.jpg"
-   },
-   {
-      templeName: "Apia Samoa",
-      location: "Pesega Apia, Samoa",
-      dedicated: "1984,August, 5-7",
-      area:  18691,
-      imageUrl: "https://churchofjesuschristtemples.org/assets/img/temples/apia-samoa-temple/apia-samoa-temple-13905-main.jpg"
-   }
- ];
-
-
-// Display temple images dynamically
-const displayTemples = (temples) => {
-   templesElement.innerHTML = ""; // Clear current content
-   temples.forEach(temple => {
-       const article = document.createElement("article");
-       article.innerHTML = `
-           <h3><b>${temple.templeName}</b></h3>
-           <p><span>Location:</span> ${temple.location}</p>
-           <p><span>Dedicated:</span> ${temple.dedicated}</p>
-           <p><span>Size:</span> ${temple.area} sq. ft</p>
-           <img src="${temple.imageUrl || 'placeholder.jpg'}" alt="${temple.templeName} loading="lazy"">
-       `;
-       templesElement.appendChild(article);
-   });
-};
-
-// Filter function for temples
-const filterTemples = (criteria) => {
-   /*To ensure that the active tab's name appear in the h2 element text content */
-   const activeTitle = document.querySelector("h2.active");
-
-   let filteredTemples;
-   switch(criteria) {
-       case "old":
-           filteredTemples = temples.filter(t => parseInt(t.dedicated.split(",")[0]) < 1900);
-           activeTitle.textContent = 'Old'
-           break;
-       case "new":
-           filteredTemples = temples.filter(t => parseInt(t.dedicated.split(",")[0]) > 2000);
-           activeTitle.textContent = 'New'
-           break;
-       case "large":
-           filteredTemples = temples.filter(t => t.area > 90000);
-           activeTitle.textContent = 'Large'
-           break;
-       case "small":
-           filteredTemples = temples.filter(t => t.area < 9000);
-           activeTitle.textContent = 'Small'
-           break;
-       default:
-           filteredTemples = temples;
-           activeTitle.textContent = 'Home'
-   }
-   displayTemples(filteredTemples);
-};
-
-// Initial display of all temples
-displayTemples(temples);
 
 
 

diff --git a/project/styles/verifiedabode.css b/project/styles/verifiedabode.css
@@ -143,7 +143,7 @@ h2, .active {
 }
 
 
-.temples img {
+#rents img {
     width: 100%;
 }
 

diff --git a/project/verifiedabode.html b/project/verifiedabode.html
@@ -29,11 +29,10 @@ <h1 class="header-h1">AbodeConnect</h1>
     <main>
         <h2 class="active" aria-label="active-header">Verified Properties</h2>
         <label for="homeFilter">Search by city:</label>
-        <select id="homeFilter" onchange="filterHomes(this.value)">
+        <select id="homeFilter">
             <option value="all">View All</option>
             <option value="accra">Accra</option>
             <option value="kumasi">Kumasi</option>
-            <option value="cape-coast">Cape Coast</option>
         </select>
         <div class="grid-view rents" id="rents">