adding up to adodeconnect.html

nnocj · Nov 3, 2024 · 180ade3 · 180ade3
1 parent 52f47a2
commit 180ade3
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 40 deletions.
diff --git a/project/abodeconnect.html b/project/abodeconnect.html
@@ -7,8 +7,8 @@
     <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">-->
+    <link rel="stylesheet" href="styles/abodeconnect.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">
@@ -20,12 +20,15 @@
         <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>
+            <a href="#" onclick="displayActive('home')">Home</a>
+            <a href="#" onclick="displayActive('verified')" >Verified Property</a>
+            <a href="#" onclick="displayActive('form')">List Property</a>
         </nav>
     </header>
     <main>
+        <h2 class="active" aria-label="active-header"> 
+            <span class="visually-hidden">Active Header</span>
+        </h2>
         <div class="hero">
             <picture>
                 <!--<source srcset="images/ghana-tradition-large-1200.webp" media="(min-width: 1000px)">
@@ -34,17 +37,16 @@ <h1 class="header-h1">AbodeConnect</h1>
             </picture>   
         </div>
         <section>
-            <h2>How It Works</h2>
+            <h3>How It Works</h3>
             <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>
+            <p>Sign up and create a profile.</p>
+            <p>Browse through available properties or list your own.</p>
+            <p>Connect with property owners or potential buyers.</p>
+
         </section>
 
         <section>
-            <h2>Key Benefits</h2>
+            <h3>Key Benefits</h3>
             <div class="benefits">
                 <div class="benefit">
                     <h3>Easy to Use</h3>
@@ -62,7 +64,7 @@ <h3>Wide Selection</h3>
         </section>
 
         <section>
-            <h2>Testimonials</h2>
+            <h3>Testimonials</h3>
             <div class="testimonials">
                 <div class="testimonial">
                     <p>"This app made my house hunting so much easier! Highly recommended!"</p>

diff --git a/project/scripts/abodeconnect.js b/project/scripts/abodeconnect.js
@@ -11,6 +11,14 @@ hamButton.addEventListener('click', () => {
    navigation.style.display == "contents";
 });
 
+
+//Ensuring that the active h2 element is populated or changes dynamically to click.
+const activeTitle = document.querySelector("h2.active");
+activeTitle.textContent = 'Home';
+activeTitle.textContent = 'Verified Product';
+activeTitle.textContent = 'List Product'
+
+
 //declaring the temples container
 const templesElement = document.querySelector(".temples");
 
@@ -112,39 +120,24 @@ const displayTemples = (temples) => {
    });
 };
 
-// Filter function for temples
-const filterTemples = (criteria) => {
+// Function to display the title of the active tap.
+const displayActive = (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'
+
+       case "verified":
+           activeTitle.textContent = 'Verified Properties'
            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'
+       case "form":
+           activeTitle.textContent = 'List Property'
            break;
        default:
-           filteredTemples = temples;
            activeTitle.textContent = 'Home'
    }
-   displayTemples(filteredTemples);
 };
 
-// Initial display of all temples
-displayTemples(temples);
-
 
 
 

diff --git a/project/styles/abodeconnect.css b/project/styles/abodeconnect.css
@@ -1,21 +1,45 @@
+
+
+*{
+    box-sizing: border-box;
+    margin: 0 auto;
+    max-width: 1200px;
+ }
+
+
 body {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
+    display:grid;
+    min-height:100vh;
+    grid-template-rows: auto 1fr auto;
 }
 
-header, main, footer {
+/*header, main, footer {
     max-width: 1200px;
     margin: 0rem auto; /*By using using auto the x-axis setting, what happens is that it will */
-    border: 1px solid rgb(226, 229, 232);;       /*Center the website properly on the page. But usually when 1rem is written*/
-    padding: 1em;      /*it knows that it has to leave a gap at the top and button*/
+    /*border: 1px solid rgb(226, 229, 232);;       /*Center the website properly on the page. But usually when 1rem is written*/
+   /* padding: 1em;      /*it knows that it has to leave a gap at the top and button*/
 
-}
+/*}*/
 
 
 main {
     background-color: rgb(226, 229, 232);
     color: rgb(46, 46, 119);
     font-weight: bold;
+    padding:30px;
+}
+
+h2,h3,p, strong, div {
+    padding: 10px;
+    text-align: center;
+}
+
+
+header, footer {
+    width: 100%;
+    padding: 20px;
 }
 
 header, footer, .head-nav a{
@@ -32,6 +56,15 @@ header, footer, .head-nav a{
     border: none;
 }
 
+p {
+    padding: 25px;
+   }
+
+main img {
+    width: 100%;
+
+}
+
 footer {
     text-align: center;
     font-size: larger;

diff --git a/project/styles/siteplan.css b/project/styles/siteplan.css
@@ -31,7 +31,7 @@ main {
     padding: 30px;
 }
 
-h2,h3,h4,h5,h6 {
+h2,h3 {
     font-family: var(--heading-font);
     color: var(--accent1-color);
     padding: 10px;}