update data

vwolfley · Apr 7, 2024 · 5948043 · 5948043
1 parent 463644a
commit 5948043
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/scoots/data/rentals.json b/scoots/data/rentals.json
@@ -36,15 +36,6 @@
             "walk_in_half_day": 60,
             "walk_in_full_day": 80
         },
-        {
-            "class": "jeep",
-            "type": "Jeep Wrangler - 4 door a/c",
-            "persons": 5,
-            "reservation_half_day": 70,
-            "reservation_full_day": 100,
-            "walk_in_half_day": 85,
-            "walk_in_full_day": 125
-        },
         {
             "class": "jeep",
             "type": "Jeep Wrangler - 2 door",
@@ -53,6 +44,15 @@
             "reservation_full_day": 85,
             "walk_in_half_day": 70,
             "walk_in_full_day": 90
+        },
+        {
+            "class": "jeep",
+            "type": "Jeep Wrangler - 4 door a/c",
+            "persons": 5,
+            "reservation_half_day": 70,
+            "reservation_full_day": 100,
+            "walk_in_half_day": 85,
+            "walk_in_full_day": 125
         }
     ]
 }
diff --git a/scoots/rentals.html b/scoots/rentals.html
@@ -166,6 +166,17 @@ <h3>Jeep Wrangler - 4 door</h3>
                     <tbody></tbody>
                 </table>
             </section>
+            <section class="reservations-banner banner-one">
+                <article>
+                    <h2 class="">Choose an Hourly or Multi-Day Rental</h2>
+                    <p>
+                        Whether you are in Cozumel for 2 hours or 7 days, you can get an option to choose an hourly or daily rental option so you can
+                        enjoy the flexibility of exploring the island however you want.
+                    </p>
+                    <button class="btn btn-primary"><a href="./reservations.html">Reservations</a></button>
+                </article>
+                <img src="./images/heros/scooter_rental_cozumel.webp" alt="scooter rental guy" loading="lazy"/>
+            </section>
         </main>
         <!-- /End Content -->
         <!-- Footer  -->

diff --git a/scoots/scripts/rentals.js b/scoots/scripts/rentals.js
@@ -12,7 +12,8 @@ async function getRentalData() {
         }
         const data = await response.json();
         // console.log(data);
-        displayRates(data.rentals);
+        displayRatesTable(data.rentals);
+        displayRatesCards(data.rentals);
         return data;
     } catch (error) {
         console.error("Error fetching data:", error);
@@ -21,11 +22,9 @@ async function getRentalData() {
 }
 getRentalData();
 
-const displayRates = (rentals) => {
+const displayRatesTable = (rentals) => {
     // console.log(rentals);
-
     const priceTable = document.querySelector(".pricing tbody");
-    const priceCard = document.querySelector(".rental-rides-info .card-body h3");
 
     rentals.forEach((type) => {
         const row = document.createElement("tr");
@@ -38,14 +37,25 @@ const displayRates = (rentals) => {
             <td>$${type.walk_in_half_day}</td>
         `;
         priceTable.appendChild(row);
+    });
+};
 
-        const cardInfo = `
-        <p>Riders: ${type.persons}</p>
-        <p>Full Day: $${type.reservation_full_day}</p>
-        <p>Half Day: $${type.reservation_half_day}</p>
-        <p>Walk-in Full Day: $${type.walk_in_full_day}</p>
-        <p>Walk-in Half Day: $${type.walk_in_half_day}</p>
-        `;
-        priceCard.innerHTML = cardInfo;
+const displayRatesCards = (rentals) => {
+    const priceCards = document.querySelectorAll(".rental-rides-info .card-body h3");
+
+    priceCards.forEach((priceCard, index) => {
+        const type = rentals[index];
+
+            const cardInfo = document.createElement("div");
+
+            cardInfo.innerHTML = `
+            <p>Riders: ${type.persons}</p>
+            <p>Full Day: $${type.reservation_full_day}</p>
+            <p>Half Day: $${type.reservation_half_day}</p>
+            <p>Walk-in Full Day: $${type.walk_in_full_day}</p>
+            <p>Walk-in Half Day: $${type.walk_in_half_day}</p>
+            `;
+            priceCard.appendChild(cardInfo);
     });
 };
+