working in progress

nnocj · Nov 1, 2024 · 52f47a2 · 52f47a2
1 parent 5ed36db
commit 52f47a2
Show file tree

Hide file tree

Showing 5 changed files with 501 additions and 0 deletions.
diff --git a/project/abodeconnect.html b/project/abodeconnect.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<!--Date: 16th October, 2024-->
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="description" content="Home page of AbodeConnect House Rental & Services App">
+    <meta name="author" content="Nicholas Oblitey Commey">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AbodeConnect</title>
+    <link rel="stylesheet" href="styles/siteplan.css">
+    <!--<link rel="stylesheet" href="styles/abodeconnect-large.css">-->
+    <script src="scripts/abodeconnect.js" defer></script>
+    <script src="scripts/getdates.js" defer></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header class="header-grid">
+        <button type="button" id="menu" aria-label="Toggle navigation"></button>
+        <h1 class="header-h1">AbodeConnect</h1>
+        <nav class="filter-nav head-nav">
+            <a href="#">Home</a>
+            <a href="#">Verified Property</a>
+            <a href="#">List Property</a>
+        </nav>
+    </header>
+    <main>
+        <div class="hero">
+            <picture>
+                <!--<source srcset="images/ghana-tradition-large-1200.webp" media="(min-width: 1000px)">
+                <source srcset="images/ghana-people-medium-600.webp" media="(min-width: 500px)">-->
+                <img src="images/housing.webp" alt="A picture a house" width="100">
+            </picture>   
+        </div>
+        <section>
+            <h2>How It Works</h2>
+            <p>Our app simplifies your housing search. Here’s how:</p>
+            <ol>
+                <li>Sign up and create a profile.</li>
+                <li>Browse through available properties or list your own.</li>
+                <li>Connect with property owners or potential buyers.</li>
+            </ol>
+        </section>
+
+        <section>
+            <h2>Key Benefits</h2>
+            <div class="benefits">
+                <div class="benefit">
+                    <h3>Easy to Use</h3>
+                    <p>Our user-friendly interface makes finding or listing homes a breeze.</p>
+                </div>
+                <div class="benefit">
+                    <h3>Secure Transactions</h3>
+                    <p>We prioritize your safety with secure and reliable transaction options.</p>
+                </div>
+                <div class="benefit">
+                    <h3>Wide Selection</h3>
+                    <p>Access a large database of properties tailored to your needs.</p>
+                </div>
+            </div>
+        </section>
+
+        <section>
+            <h2>Testimonials</h2>
+            <div class="testimonials">
+                <div class="testimonial">
+                    <p>"This app made my house hunting so much easier! Highly recommended!"</p>
+                    <strong>- Jane Doe</strong>
+                </div>
+                <div class="testimonial">
+                    <p>"I was able to find a buyer for my property in just a few days. Great experience!"</p>
+                    <strong>- John Smith</strong>
+                </div>
+                <div class="testimonial">
+                    <p>"The app's interface is intuitive, and I love the secure payment options."</p>
+                    <strong>- Sarah Lee</strong>
+                </div>
+            </div>
+        </section>
+
+    </main>
+    <footer>
+        <p>©<span id="year"></span> 🌴 - Nicholas Oblitey Commey - Accra 🌴</p> 
+        <p>Last modification: <span id="lastModified"></span></p>
+    </footer>
+</body>
+</html>
diff --git a/project/images/housing.webp b/project/images/housing.webp
diff --git a/project/scripts/abodeconnect.js b/project/scripts/abodeconnect.js
@@ -0,0 +1,153 @@
+/*menu should show content only when the hamburger button is pressed.*/
+const hamButton = document.querySelector('#menu');
+const navigation = document.querySelector('.head-nav');
+const headerTitle = document.querySelector('.header-h1');
+
+hamButton.addEventListener('click', () => {
+	navigation.classList.toggle('open');
+	hamButton.classList.toggle('open');
+   headerTitle.classList.toggle('hide');// to hide the title when the hamburger is open
+
+   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/abodeconnect-large.css b/project/styles/abodeconnect-large.css
@@ -0,0 +1,116 @@
+@media (min-width: 768px) {
+    .grid-view {
+        display:grid;
+        gap: 20px;
+        grid-template-columns: 1fr 1fr; 
+    }
+    figure img {
+        height: 350px;
+    }
+
+    .head-nav {
+        display:flex;
+        flex-direction:row;
+        justify-content: space-between;
+        align-items: center;
+        font-size: large;
+        font-weight: 500;
+        list-style: none;
+    }
+
+
+    .head-nav a:hover {
+        text-decoration: underline;
+    }
+
+    /*To ensure that even when the user do not close the hamburger button,
+    it the navigation content will flex horizontally when the screen is large*/
+    .head-nav.open {
+        display:flex;
+        font-size: large;
+        justify-content: space-between;
+        flex-direction: row;
+        list-style: none;
+    }
+
+    /*To ensure that even when the title will hide on small screen it would not hide
+    on large screen*/
+    .header-h1.hide {
+        display: contents;
+    }
+
+    #menu {
+        display: none; /*hide burger*/
+    }
+
+    .header-grid {
+        display: grid;
+        gap: 20px;
+        grid-template-columns: 1fr 1fr; 
+    }
+
+}
+
+@media (min-width: 1024px) {
+
+    header, footer,.header-h1, .head-nav a{
+        background-color: black;
+        color: rgb(226, 229, 232);
+        text-decoration: none;
+    }
+    .grid-view {
+        display:grid;
+        gap: 20px;
+        grid-template-columns: 1fr 1fr 1fr; 
+    }
+
+    figure img {
+        min-height: 350px;
+    }
+
+    #menu {
+        display:none; /*hide burger*/
+    }
+
+    .head-nav a, .head-nav button {
+        background-color: black;
+    }
+
+
+    .head-nav {
+        display:flex;
+        flex-direction:row;
+        justify-content: space-between;
+        align-items: center;
+        font-size: large;
+        font-weight: 500;
+        list-style: none;
+    }
+
+    .head-nav a:hover {
+        text-decoration: underline;
+    }
+
+    /*To ensure that even when the user do not close the hamburger button,
+    it the navigation content will flex horizontally when the screen is large*/
+    .head-nav.open {
+        display:flex;
+        font-size: large;
+        justify-content: space-between;
+        flex-direction: row;
+        list-style: none;
+    }
+
+    /*To ensure that even when the title will hide on small screen it would not hide
+    on large screen*/
+    .header-h1.hide {
+        display: contents;
+    }
+
+    .header-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr; 
+    }
+}
+
+