From 339ece6c6d61391fea6f3ad5d2e110598345d173 Mon Sep 17 00:00:00 2001 From: commey180 Date: Mon, 4 Nov 2024 20:50:27 +0000 Subject: [PATCH] verified product responsiveness corrected --- project/scripts/verifiedabode-data-loader.js | 78 ++++++----- project/scripts/verifiedabode.js | 132 ------------------- project/styles/verifiedabode.css | 2 +- project/verifiedabode.html | 3 +- 4 files changed, 44 insertions(+), 171 deletions(-) diff --git a/project/scripts/verifiedabode-data-loader.js b/project/scripts/verifiedabode-data-loader.js index c721117..d687995 100644 --- 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 = ` + Image of property at ${listing.propertyAddress} +
+

$${listing.rentPrice}

+

Location: ${listing.propertyAddress}, ${listing.city}

+

Rent Duration: ${listing.rentDuration}

+
+ `; + 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 index ef61882..9d5b81b 100644 --- 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 = ` -

${temple.templeName}

-

Location: ${temple.location}

-

Dedicated: ${temple.dedicated}

-

Size: ${temple.area} sq. ft

- ${temple.templeName} loading= - `; - 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 index 6f35296..e08be0c 100644 --- 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 index 6a2d776..2050e88 100644 --- a/project/verifiedabode.html +++ b/project/verifiedabode.html @@ -29,11 +29,10 @@

AbodeConnect

Verified Properties

- -