From 3ae0f167cc5435624cc3d74dc9ca7bf560592d77 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Tue, 16 Apr 2024 19:04:07 -0600
Subject: [PATCH 01/29] create mock data for user tests

---
 src/user.js       |  0
 test/mock-data.js | 90 +++++++++++++++++++++++++++++++++++++++++++++++
 test/user-test.js |  2 ++
 3 files changed, 92 insertions(+)
 create mode 100644 src/user.js
 create mode 100644 test/mock-data.js
 create mode 100644 test/user-test.js

diff --git a/src/user.js b/src/user.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/test/mock-data.js b/test/mock-data.js
new file mode 100644
index 000000000..00e78bfef
--- /dev/null
+++ b/test/mock-data.js
@@ -0,0 +1,90 @@
+export const bookings = [
+  {
+    id: "aaa",
+    userID: 1,
+    date: "2022/04/22",
+    roomNumber: 10,
+  },
+  {
+    id: "bbb",
+    userID: 2,
+    date: "2022/01/24",
+    roomNumber: 11,
+  },
+  {
+    id: "ccc",
+    userID: 3,
+    date: "2022/01/10",
+    roomNumber: 12,
+  },
+  {
+    id: "ddd",
+    userID: 3,
+    date: "2022/01/10",
+    roomNumber: 13,
+  },
+  {
+    id: "eee",
+    userID: 1,
+    date: "2022/01/10",
+    roomNumber: 14,
+  },
+];
+
+export const rooms = [
+  {
+    number: 10,
+    roomType: "residential suite",
+    bidet: true,
+    bedSize: "queen",
+    numBeds: 1,
+    costPerNight: 358.4,
+  },
+  {
+    number: 11,
+    roomType: "suite",
+    bidet: false,
+    bedSize: "full",
+    numBeds: 2,
+    costPerNight: 477.38,
+  },
+  {
+    number: 12,
+    roomType: "single room",
+    bidet: false,
+    bedSize: "king",
+    numBeds: 1,
+    costPerNight: 491.14,
+  },
+  {
+    number: 13,
+    roomType: "single room",
+    bidet: false,
+    bedSize: "queen",
+    numBeds: 1,
+    costPerNight: 429.44,
+  },
+  {
+    number: 14,
+    roomType: "single room",
+    bidet: true,
+    bedSize: "queen",
+    numBeds: 2,
+    costPerNight: 340.17,
+  },
+];
+
+export const customers = [
+    {
+    "id": 1,
+    "name": "Leatha Ullrich"
+    },
+    {
+    "id": 2,
+    "name": "Rocio Schuster"
+    },
+    {
+    "id": 3,
+    "name": "Kelvin Schiller"
+    }
+]
diff --git a/test/user-test.js b/test/user-test.js
new file mode 100644
index 000000000..c83c1dddc
--- /dev/null
+++ b/test/user-test.js
@@ -0,0 +1,2 @@
+import {} from './mock-data';
+import {} from '../src/user';

From 50b990116e51d8da2351823728543ace7e77321e Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Tue, 16 Apr 2024 19:26:01 -0600
Subject: [PATCH 02/29] add tests for viewing user bookings

---
 test/mock-data.js | 30 +++++++++++++++++-------------
 test/user-test.js | 24 +++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/test/mock-data.js b/test/mock-data.js
index 00e78bfef..a28d9c015 100644
--- a/test/mock-data.js
+++ b/test/mock-data.js
@@ -75,16 +75,20 @@ export const rooms = [
 ];
 
 export const customers = [
-    {
-    "id": 1,
-    "name": "Leatha Ullrich"
-    },
-    {
-    "id": 2,
-    "name": "Rocio Schuster"
-    },
-    {
-    "id": 3,
-    "name": "Kelvin Schiller"
-    }
-]
+  {
+    id: 1,
+    name: "Leatha Ullrich",
+  },
+  {
+    id: 2,
+    name: "Rocio Schuster",
+  },
+  {
+    id: 3,
+    name: "Kelvin Schiller",
+  },
+  {
+    id: 12,
+    name: "Rocio Schuster",
+  },
+];
diff --git a/test/user-test.js b/test/user-test.js
index c83c1dddc..e2fbf4b68 100644
--- a/test/user-test.js
+++ b/test/user-test.js
@@ -1,2 +1,24 @@
-import {} from './mock-data';
+import chai from 'chai';
+const expect = chai.expect;
+
+import {bookings, rooms, customers} from './mock-data';
 import {} from '../src/user';
+
+describe('Show all customer bookings', function() {
+  it.skip('should show all of a customers bookings, past and future', function() {
+    const customer = customers[0];
+    const allRooms = rooms
+    const allBookings = getAllCustomerRoomBookings(customer, bookings, allRooms);
+    expect(allBookings).to.deep.equal(rooms[0], rooms[4])
+  })
+  it.skip('Should notify a customer if they have no bookings', function() {
+    const customer = customers[3];
+    const allRooms = rooms;
+    const allBookings = getAllCustomerRoomBookings(customer, bookings, allRooms);
+    expect(allBookings).to.deep.equal('You currently have no bookings')
+  });
+});
+
+export {
+    getAllCustomerRoomBookings
+}
\ No newline at end of file

From 35803dd3de1045f69ab52759c02a0ce5aaee0945 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Tue, 16 Apr 2024 19:37:38 -0600
Subject: [PATCH 03/29] add test for total amount spent by user

---
 test/user-test.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/test/user-test.js b/test/user-test.js
index e2fbf4b68..c9b03d843 100644
--- a/test/user-test.js
+++ b/test/user-test.js
@@ -19,6 +19,22 @@ describe('Show all customer bookings', function() {
   });
 });
 
+describe('Show total costs of bookings', function() {
+    it.skip('Should show the total amount a user has spent on bookings', function(){
+        const customer = customers[2];
+        const allRoomBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+        const totalSpent = getTotalCostForAllBookings(allRoomBookings);
+        expect(totalSpent).to.equal(920.58)
+    })
+    it.skip('Should show zero if a customer has no bookings', function() {
+        const customer = customer[3];
+        const allRoomBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+        const totalSpent = getTotalCostForAllBookings(allRoomBookings);
+        expect(totalSpent).to.equal(0)
+    })
+})
+
 export {
-    getAllCustomerRoomBookings
+    getAllCustomerRoomBookings,
+    getTotalCostForAllBookings
 }
\ No newline at end of file

From 266c87869e6fac8cf8a2f5335ea2fdcdd53b4cbd Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Tue, 16 Apr 2024 20:17:32 -0600
Subject: [PATCH 04/29] write functions to solve getAllCustomerRoomBookings
 test

---
 src/user.js         | 24 ++++++++++++++++++++++++
 test/sample-test.js | 14 +++++++-------
 test/user-test.js   | 26 +++++++++++---------------
 3 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/user.js b/src/user.js
index e69de29bb..89905c3ab 100644
--- a/src/user.js
+++ b/src/user.js
@@ -0,0 +1,24 @@
+function getAllCustomerRoomBookings(customer, bookings, rooms) {
+  const customerBookings = bookings.filter(
+    (booking) => booking.userID === customer.id
+  );
+  const roomsBooked = customerBookings.reduce((bookedRooms, curBooking) => {
+    const allRooms = rooms.forEach((room) => {
+      if (curBooking.roomNumber === room.number) {
+        bookedRooms.push(room);
+      }
+    });
+    return bookedRooms;
+  }, []);
+  if (roomsBooked.length === 0) {
+    return "You currently have no bookings";
+  } else {
+    return roomsBooked;
+  }
+}
+
+function getTotalCostForAllBookings(customerBookings) {
+   
+}
+
+export { getAllCustomerRoomBookings, getTotalCostForAllBookings };
diff --git a/test/sample-test.js b/test/sample-test.js
index e756b0fb3..85d267ed6 100644
--- a/test/sample-test.js
+++ b/test/sample-test.js
@@ -1,8 +1,8 @@
-import chai from 'chai';
-const expect = chai.expect;
+// import chai from 'chai';
+// const expect = chai.expect;
 
-describe('See if the tests are running', function() {
-  it('should return true', function() {
-    expect(true).to.equal(true);
-  });
-});
+// describe('See if the tests are running', function() {
+//   it('should return true', function() {
+//     expect(true).to.equal(true);
+//   });
+// });
diff --git a/test/user-test.js b/test/user-test.js
index c9b03d843..425040707 100644
--- a/test/user-test.js
+++ b/test/user-test.js
@@ -2,39 +2,35 @@ import chai from 'chai';
 const expect = chai.expect;
 
 import {bookings, rooms, customers} from './mock-data';
-import {} from '../src/user';
+import {getAllCustomerRoomBookings, getTotalCostForAllBookings} from '../src/user';
 
 describe('Show all customer bookings', function() {
-  it.skip('should show all of a customers bookings, past and future', function() {
+  it('should show all of a customers bookings, past and future', function() {
     const customer = customers[0];
-    const allRooms = rooms
-    const allBookings = getAllCustomerRoomBookings(customer, bookings, allRooms);
-    expect(allBookings).to.deep.equal(rooms[0], rooms[4])
+    // const allRooms = rooms
+    const allBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+    expect(allBookings).to.deep.equal([rooms[0], rooms[4]])
   })
-  it.skip('Should notify a customer if they have no bookings', function() {
+  it('Should notify a customer if they have no bookings', function() {
     const customer = customers[3];
-    const allRooms = rooms;
-    const allBookings = getAllCustomerRoomBookings(customer, bookings, allRooms);
+    // const allRooms = rooms;
+    const allBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
     expect(allBookings).to.deep.equal('You currently have no bookings')
   });
 });
 
 describe('Show total costs of bookings', function() {
-    it.skip('Should show the total amount a user has spent on bookings', function(){
+    it('Should show the total amount a user has spent on bookings', function(){
         const customer = customers[2];
         const allRoomBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
         const totalSpent = getTotalCostForAllBookings(allRoomBookings);
         expect(totalSpent).to.equal(920.58)
     })
-    it.skip('Should show zero if a customer has no bookings', function() {
-        const customer = customer[3];
+    it('Should show zero if a customer has no bookings', function() {
+        const customer = customers[3];
         const allRoomBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
         const totalSpent = getTotalCostForAllBookings(allRoomBookings);
         expect(totalSpent).to.equal(0)
     })
 })
 
-export {
-    getAllCustomerRoomBookings,
-    getTotalCostForAllBookings
-}
\ No newline at end of file

From a8891e20021cc361cf2671e55ff58957544a2f3b Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Tue, 16 Apr 2024 20:18:21 -0600
Subject: [PATCH 05/29] write function to solve getTotalCostForAllBookings test

---
 src/user.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/user.js b/src/user.js
index 89905c3ab..3bb98b637 100644
--- a/src/user.js
+++ b/src/user.js
@@ -18,7 +18,15 @@ function getAllCustomerRoomBookings(customer, bookings, rooms) {
 }
 
 function getTotalCostForAllBookings(customerBookings) {
-   
+    if (customerBookings === 'You currently have no bookings') {
+        return 0
+    } else {
+    const totalSpent = customerBookings.reduce((total, booking) => {
+        total += booking.costPerNight;
+        return total;
+    }, 0)
+    return parseFloat(totalSpent.toFixed(2))
+}
 }
 
 export { getAllCustomerRoomBookings, getTotalCostForAllBookings };

From 63848e2beff37c46598291008580da9aa70fa679 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Wed, 17 Apr 2024 12:06:08 -0600
Subject: [PATCH 06/29] add logo file

---
 src/images/Overlook-logo.png | Bin 0 -> 10392 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/images/Overlook-logo.png

diff --git a/src/images/Overlook-logo.png b/src/images/Overlook-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..286b72eb58a2bcb9c29822d8bd33149d4fa38d3e
GIT binary patch
literal 10392
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

literal 0
HcmV?d00001


From c8e25bb598b821e9ef31cf3504f07cd5dd13f722 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Wed, 17 Apr 2024 12:06:46 -0600
Subject: [PATCH 07/29] add logo to html

---
 dist/index.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 35332a6f9..5b9f778d9 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -4,10 +4,14 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Webpack Starter Kit</title>
+  <title>Overlook Hotel</title>
 </head>
 <body>
-  <img src="./images/turing-logo.png" alt="turing logo">
+  <header class="header">
+    <h1>Overlook Hotel</h1>
+    <img src="./images/Overlook-logo.png" alt="Overlook logo, 3 sweeping colored lines wiht an o in the middle">
+  </header>
+  <img src="https://cdn.kiwicollection.com/media/property/PR119439/xl/119439-01-Pool_Sunset_Beach_Villa_Baglioni_Resort_Maldives%201-Baglioni%20Maldives.jpg?cb=1634851275" alt="turing logo">
   
   <!-- Do not include the scripts.js or class files here - it is done by the webpack server -->
   <script src="bundle.js"></script>

From c568f2cfc6fde6a9b5ee78b5d34ae1059a0f7c9b Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Wed, 17 Apr 2024 13:17:10 -0600
Subject: [PATCH 08/29] add basic boilerplate html

---
 dist/index.html      |  21 +++++++++++++++++----
 src/css/styles.scss  |  20 ++++++++++++++++++--
 src/images/.DS_Store | Bin 0 -> 6148 bytes
 3 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 src/images/.DS_Store

diff --git a/dist/index.html b/dist/index.html
index 5b9f778d9..870d43a7b 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,12 +7,25 @@
   <title>Overlook Hotel</title>
 </head>
 <body>
-  <header class="header">
+  <header class="title-heading">
     <h1>Overlook Hotel</h1>
-    <img src="./images/Overlook-logo.png" alt="Overlook logo, 3 sweeping colored lines wiht an o in the middle">
+    <div aria-label="Overlook logo, 3 colored stripes">
+      <div class="stripe1"></div>
+      <div class="stripe2"></div>
+      <div class="stripe3"></div>
+    </div>  
   </header>
-  <img src="https://cdn.kiwicollection.com/media/property/PR119439/xl/119439-01-Pool_Sunset_Beach_Villa_Baglioni_Resort_Maldives%201-Baglioni%20Maldives.jpg?cb=1634851275" alt="turing logo">
-  
+  <!-- <img src="https://cdn.kiwicollection.com/media/property/PR119439/xl/119439-01-Pool_Sunset_Beach_Villa_Baglioni_Resort_Maldives%201-Baglioni%20Maldives.jpg?cb=1634851275" alt="turing logo"> -->
+  <section class="content">
+    <nav class="nav-bar">
+      <button class="buttons" id="my-bookings-button">My Bookings</button>
+      <button class="buttons" id="book-a-room-button">Book a Room</button>
+    </nav>
+    <main class="main-section">
+      <section class="content-display"></section>
+    </main>
+  </section>
+  <footer class="footer">brandon j. doza designs</footer>
   <!-- Do not include the scripts.js or class files here - it is done by the webpack server -->
   <script src="bundle.js"></script>
 
diff --git a/src/css/styles.scss b/src/css/styles.scss
index d0637ec3a..c3e1543a0 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -1,4 +1,20 @@
-
+@mixin logoStripes($color) {
+  background: $color;
+  width: 100%;
+  height: 15px
+}
 body {
-  background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
+  margin: 0
+}
+
+.stripe1 {
+  @include logoStripes(rgb(248, 241, 13))
 }
+
+.stripe2 {
+  @include logoStripes(orange)
+}
+
+.stripe3 {
+  @include logoStripes(rgb(255, 0, 0))
+}
\ No newline at end of file
diff --git a/src/images/.DS_Store b/src/images/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I

literal 0
HcmV?d00001


From 838c335d305c1bc8864927640a22b3acd55a3809 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Wed, 17 Apr 2024 14:26:13 -0600
Subject: [PATCH 09/29] add basic css styling to dashboard

---
 dist/index.html     | 11 +++++--
 src/css/styles.scss | 78 +++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 870d43a7b..73388e6bc 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -4,6 +4,12 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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=Monoton&display=swap" rel="stylesheet">
+<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=Monoton&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
   <title>Overlook Hotel</title>
 </head>
 <body>
@@ -15,7 +21,6 @@ <h1>Overlook Hotel</h1>
       <div class="stripe3"></div>
     </div>  
   </header>
-  <!-- <img src="https://cdn.kiwicollection.com/media/property/PR119439/xl/119439-01-Pool_Sunset_Beach_Villa_Baglioni_Resort_Maldives%201-Baglioni%20Maldives.jpg?cb=1634851275" alt="turing logo"> -->
   <section class="content">
     <nav class="nav-bar">
       <button class="buttons" id="my-bookings-button">My Bookings</button>
@@ -25,7 +30,9 @@ <h1>Overlook Hotel</h1>
       <section class="content-display"></section>
     </main>
   </section>
-  <footer class="footer">brandon j. doza designs</footer>
+  <footer class="footer">
+    <p>©brandon j. doza designs</p>
+  </footer>
   <!-- Do not include the scripts.js or class files here - it is done by the webpack server -->
   <script src="bundle.js"></script>
 
diff --git a/src/css/styles.scss b/src/css/styles.scss
index c3e1543a0..a7cace0b2 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -3,8 +3,26 @@
   width: 100%;
   height: 15px
 }
+
 body {
-  margin: 0
+  margin: 0;
+}
+
+.title-heading {
+  background-color: rgb(123, 243, 243);
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  color: red;
+  margin-top: 25px;
+  margin-left: 50px;
+  font-family: Monoton, sans-serif;
 }
 
 .stripe1 {
@@ -16,5 +34,61 @@ body {
 }
 
 .stripe3 {
-  @include logoStripes(rgb(255, 0, 0))
+  @include logoStripes(rgb(255, 0, 0));
+}
+
+.content  {
+  display: flex;
+  margin-top: 9.4px;
+}
+
+.nav-bar {
+  background-color: rgb(240, 226, 148);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 25%;
+  height: 100vh;
+}
+
+.main-section {
+  background-image: url("https://cdn.kiwicollection.com/media/property/PR119439/xl/119439-01-Pool_Sunset_Beach_Villa_Baglioni_Resort_Maldives%201-Baglioni%20Maldives.jpg?cb=1634851275");
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+}
+
+.content-display {
+  background-color: rgba(123, 243, 243, 0.7);
+  border-radius: 25px;
+  width: 60%;
+  height: 600px;
+  margin-top: 150px;
+}
+
+.buttons {
+  background-color: rgb(123, 243, 243);
+  font-family: Roboto, sans-serif;
+  font-weight: 600;
+  color: red;
+  margin-top: 60px;
+  width: 175px;
+  height: 50px;
+  border-radius: 25px;
+}
+
+.footer {
+  background-color: orange;
+  color: rgb(244, 124, 19);
+  text-align: center;
+  font-family: Monoton, sans-serif;
+}
+
+p {
+  margin-top: 0;
+  margin-left: 250px;
 }
\ No newline at end of file

From 4171da7444b683da65fc5fd2af95c965a47849d5 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Wed, 17 Apr 2024 19:00:25 -0600
Subject: [PATCH 10/29] add functionality to get data to load with the dom load

---
 src/api-calls.js   | 21 +++++++++++++++++++++
 src/dom-updates.js | 33 +++++++++++++++++++++++++++++++++
 src/scripts.js     | 18 ++++++++++++++++--
 3 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 src/api-calls.js
 create mode 100644 src/dom-updates.js

diff --git a/src/api-calls.js b/src/api-calls.js
new file mode 100644
index 000000000..b59e501b9
--- /dev/null
+++ b/src/api-calls.js
@@ -0,0 +1,21 @@
+//<><>fetch calls<><>
+const getAllUsers = fetch('http://localhost:3001/api/v1/customers')
+.then(response => response.json());
+const getAllRooms = fetch('http://localhost:3001/api/v1/rooms')
+.then(response => response.json());
+const getAllBookings = fetch('http://localhost:3001/api/v1/bookings')
+.then(response => response.json());
+const promises = [getAllUsers, getAllRooms, getAllBookings];
+
+
+function getAllData() {
+    return Promise.all(promises)
+    .then(data => {
+        // console.log('fuck', data)
+        return data})
+    .catch(error => console.log(error))
+    }
+
+export {
+    getAllData
+}
\ No newline at end of file
diff --git a/src/dom-updates.js b/src/dom-updates.js
new file mode 100644
index 000000000..fe7800eb6
--- /dev/null
+++ b/src/dom-updates.js
@@ -0,0 +1,33 @@
+import { getAllCustomerRoomBookings, getTotalCostForAllBookings } from './user.js';
+// import { allData } from './scripts.js';
+import { getAllData } from './api-calls.js';
+
+//<><>query selectors<><>
+const myBookingsButton = document.getElementById('my-bookings-button');
+const bookRoomButton = document.getElementById('book-a-room-button');
+const bookingDisplay = document.querySelector('.content-display');
+let allData;
+// console.log('yo', allData)
+//<><>event handlers<><>
+export const load = () => {
+    document.addEventListener('DOMContentLoaded', function() {
+    // console.log('here')
+getAllData()
+.then(apiData => {
+    allData = apiData;
+    console.log('all', allData)
+    // let customer = getRandomUser(allData[0].customers);
+    // let bookings = allData[2].bookings;
+    // let rooms = allData[1].rooms;
+    // console.log('user', customer) 
+    // let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+    // console.log(userBookings)
+})
+// console.log('1', allData)
+// customer, bookings, rooms
+})
+}
+
+
+
+//<><>functions<><>
diff --git a/src/scripts.js b/src/scripts.js
index 1e4d0f75c..bf45fc852 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -5,7 +5,21 @@
 import './css/styles.scss';
 
 // An example of how you tell webpack to use an image (also need to link to it in the index.html)
-import './images/turing-logo.png'
+// import './images/turing-logo.png'
+// import {getAllData, getAllUsers, getAllRooms, getAllBookings} from './api-calls.js'
 
 
-console.log('This is the JavaScript entry file - your code begins here.');
+// console.log('This is the JavaScript entry file - your code begins here.');
+// export let allData;
+import { getAllData } from './api-calls.js';
+import {load} from './dom-updates.js';
+load()
+// getAllData()
+// .then(apiData => {
+//     allData = apiData;
+//      console.log('all', allData)
+//     return allData
+   
+//     const user = getRandomUser(allData)  
+// })
+// console.log('yessir', allData)

From 325c179a40539402b4fae055923eec722fd541e3 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Wed, 17 Apr 2024 20:02:10 -0600
Subject: [PATCH 11/29] refactor getAllCustomerBookings function to return a
 custom object

---
 src/dom-updates.js | 28 ++++++++++++++++++++++++++++
 src/user.js        | 35 +++++++++++++++++++----------------
 test/mock-data.js  | 17 +++++++++++++++++
 test/user-test.js  |  4 ++--
 4 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/src/dom-updates.js b/src/dom-updates.js
index fe7800eb6..b0cf11832 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -6,7 +6,11 @@ import { getAllData } from './api-calls.js';
 const myBookingsButton = document.getElementById('my-bookings-button');
 const bookRoomButton = document.getElementById('book-a-room-button');
 const bookingDisplay = document.querySelector('.content-display');
+
+//<><>data model<><>
 let allData;
+
+//<><>global variables<><>
 // console.log('yo', allData)
 //<><>event handlers<><>
 export const load = () => {
@@ -28,6 +32,30 @@ getAllData()
 })
 }
 
+myBookingsButton.addEventListener('click', () => {
+    let customer = getRandomUser(allData[0].customers);
+    let bookings = allData[2].bookings;
+    let rooms = allData[1].rooms;
+    let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+    console.log(userBookings)
+})
+
 
 
 //<><>functions<><>
+function getRandomUser(users) {
+    let randomIndex = Math.floor(Math.random() * users.length);
+    let randomUser = users[randomIndex];
+    return randomUser
+}
+
+function createBookingCard(booking) {
+    return `<div class="booking-card">
+            <h2></h2>
+    </div>`
+}
+
+function populateContentDisplay(element) {
+    bookingDisplay.innerHTML += element
+}
+
diff --git a/src/user.js b/src/user.js
index 3bb98b637..57f2e1f91 100644
--- a/src/user.js
+++ b/src/user.js
@@ -2,31 +2,34 @@ function getAllCustomerRoomBookings(customer, bookings, rooms) {
   const customerBookings = bookings.filter(
     (booking) => booking.userID === customer.id
   );
-  const roomsBooked = customerBookings.reduce((bookedRooms, curBooking) => {
-    const allRooms = rooms.forEach((room) => {
-      if (curBooking.roomNumber === room.number) {
-        bookedRooms.push(room);
-      }
-    });
-    return bookedRooms;
-  }, []);
+  const roomsBooked = customerBookings.map((booking) => {
+    const room = rooms.find((room) => room.number === booking.roomNumber);
+    return {
+      title: room.roomType,
+      numBeds: room.numBeds,
+      bedSize: room.bedSize,
+      dateBooked: booking.date,
+      costPerNight: room.costPerNight,
+    };
+  });
   if (roomsBooked.length === 0) {
     return "You currently have no bookings";
   } else {
+    console.log("here", roomsBooked);
     return roomsBooked;
   }
 }
 
 function getTotalCostForAllBookings(customerBookings) {
-    if (customerBookings === 'You currently have no bookings') {
-        return 0
-    } else {
+  if (customerBookings === "You currently have no bookings") {
+    return 0;
+  } else {
     const totalSpent = customerBookings.reduce((total, booking) => {
-        total += booking.costPerNight;
-        return total;
-    }, 0)
-    return parseFloat(totalSpent.toFixed(2))
-}
+      total += booking.costPerNight;
+      return total;
+    }, 0);
+    return parseFloat(totalSpent.toFixed(2));
+  }
 }
 
 export { getAllCustomerRoomBookings, getTotalCostForAllBookings };
diff --git a/test/mock-data.js b/test/mock-data.js
index a28d9c015..0c4bd7d37 100644
--- a/test/mock-data.js
+++ b/test/mock-data.js
@@ -92,3 +92,20 @@ export const customers = [
     name: "Rocio Schuster",
   },
 ];
+
+export const userBookings = [
+  {
+    title: "residential suite",
+    numBeds: 1,
+    bedSize: "queen",
+    dateBooked: "2022/04/22",
+    costPerNight: 358.4,
+  },
+  {
+    title: "single room",
+    numBeds: 2,
+    bedSize: "queen",
+    dateBooked: "2022/01/10",
+    costPerNight: 340.17,
+  },
+];
diff --git a/test/user-test.js b/test/user-test.js
index 425040707..28f9d7a9d 100644
--- a/test/user-test.js
+++ b/test/user-test.js
@@ -1,7 +1,7 @@
 import chai from 'chai';
 const expect = chai.expect;
 
-import {bookings, rooms, customers} from './mock-data';
+import {bookings, rooms, customers, userBookings} from './mock-data';
 import {getAllCustomerRoomBookings, getTotalCostForAllBookings} from '../src/user';
 
 describe('Show all customer bookings', function() {
@@ -9,7 +9,7 @@ describe('Show all customer bookings', function() {
     const customer = customers[0];
     // const allRooms = rooms
     const allBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
-    expect(allBookings).to.deep.equal([rooms[0], rooms[4]])
+    expect(allBookings).to.deep.equal([userBookings[0], userBookings[1]])
   })
   it('Should notify a customer if they have no bookings', function() {
     const customer = customers[3];

From c209db31d1925e836097f04851d088208073276d Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Wed, 17 Apr 2024 20:47:45 -0600
Subject: [PATCH 12/29] add functionality to view all of a users bookings

---
 src/api-calls.js    |  3 +-
 src/css/styles.scss | 34 +++++++++++++++----
 src/dom-updates.js  | 82 +++++++++++++++++++++------------------------
 src/scripts.js      | 10 +-----
 src/user.js         |  1 -
 test/user-test.js   |  2 --
 6 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/src/api-calls.js b/src/api-calls.js
index b59e501b9..93def634b 100644
--- a/src/api-calls.js
+++ b/src/api-calls.js
@@ -7,11 +7,10 @@ const getAllBookings = fetch('http://localhost:3001/api/v1/bookings')
 .then(response => response.json());
 const promises = [getAllUsers, getAllRooms, getAllBookings];
 
-
+//<><>functions<><>
 function getAllData() {
     return Promise.all(promises)
     .then(data => {
-        // console.log('fuck', data)
         return data})
     .catch(error => console.log(error))
     }
diff --git a/src/css/styles.scss b/src/css/styles.scss
index a7cace0b2..4b871b8cb 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -1,7 +1,7 @@
 @mixin logoStripes($color) {
   background: $color;
   width: 100%;
-  height: 15px
+  height: 15px;
 }
 
 body {
@@ -26,18 +26,18 @@ h1 {
 }
 
 .stripe1 {
-  @include logoStripes(rgb(248, 241, 13))
+  @include logoStripes(rgb(248, 241, 13));
 }
 
 .stripe2 {
-  @include logoStripes(orange)
+  @include logoStripes(orange);
 }
 
 .stripe3 {
   @include logoStripes(rgb(255, 0, 0));
 }
 
-.content  {
+.content {
   display: flex;
   margin-top: 9.4px;
 }
@@ -66,8 +66,12 @@ h1 {
   background-color: rgba(123, 243, 243, 0.7);
   border-radius: 25px;
   width: 60%;
-  height: 600px;
-  margin-top: 150px;
+  height: 700px;
+  overflow: auto;
+  margin-top: 75px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .buttons {
@@ -91,4 +95,20 @@ h1 {
 p {
   margin-top: 0;
   margin-left: 250px;
-}
\ No newline at end of file
+}
+
+.booking-card {
+  font-family: Roboto, sans-serif;
+  background-color: rgb(240, 226, 148);
+  border: 2px solid orange;
+  color: red;
+  width: 400px;
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin-top: 15px;
+  border-radius: 25px;
+}
diff --git a/src/dom-updates.js b/src/dom-updates.js
index b0cf11832..05f59ec5c 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -1,61 +1,57 @@
-import { getAllCustomerRoomBookings, getTotalCostForAllBookings } from './user.js';
+import {
+  getAllCustomerRoomBookings,
+  getTotalCostForAllBookings,
+} from "./user.js";
 // import { allData } from './scripts.js';
-import { getAllData } from './api-calls.js';
+import { getAllData } from "./api-calls.js";
 
 //<><>query selectors<><>
-const myBookingsButton = document.getElementById('my-bookings-button');
-const bookRoomButton = document.getElementById('book-a-room-button');
-const bookingDisplay = document.querySelector('.content-display');
+const myBookingsButton = document.getElementById("my-bookings-button");
+const bookRoomButton = document.getElementById("book-a-room-button");
+const bookingDisplay = document.querySelector(".content-display");
 
 //<><>data model<><>
 let allData;
 
-//<><>global variables<><>
-// console.log('yo', allData)
+//<><>event listeners<><>
+myBookingsButton.addEventListener("click", () => {
+  let customer = getRandomUser(allData[0].customers);
+  let bookings = allData[2].bookings;
+  let rooms = allData[1].rooms;
+  let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+  populateContentDisplay(userBookings);
+});
+
 //<><>event handlers<><>
 export const load = () => {
-    document.addEventListener('DOMContentLoaded', function() {
-    // console.log('here')
-getAllData()
-.then(apiData => {
-    allData = apiData;
-    console.log('all', allData)
-    // let customer = getRandomUser(allData[0].customers);
-    // let bookings = allData[2].bookings;
-    // let rooms = allData[1].rooms;
-    // console.log('user', customer) 
-    // let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
-    // console.log(userBookings)
-})
-// console.log('1', allData)
-// customer, bookings, rooms
-})
-}
-
-myBookingsButton.addEventListener('click', () => {
-    let customer = getRandomUser(allData[0].customers);
-    let bookings = allData[2].bookings;
-    let rooms = allData[1].rooms;
-    let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
-    console.log(userBookings)
-})
-
-
+  document.addEventListener("DOMContentLoaded", function () {
+    getAllData().then((apiData) => {
+      allData = apiData;
+      console.log("all", allData);
+    });
+  });
+};
 
 //<><>functions<><>
 function getRandomUser(users) {
-    let randomIndex = Math.floor(Math.random() * users.length);
-    let randomUser = users[randomIndex];
-    return randomUser
+  let randomIndex = Math.floor(Math.random() * users.length);
+  let randomUser = users[randomIndex];
+  return randomUser;
 }
 
 function createBookingCard(booking) {
-    return `<div class="booking-card">
-            <h2></h2>
-    </div>`
+  return `<div class="booking-card">
+            <h3>${booking.title.toUpperCase()} - ${booking.bedSize.toUpperCase()}BED</h3>
+            <article>Number of Beds: ${booking.numBeds}</article>
+            <article>You have booked this on ${
+              booking.dateBooked
+            } at a cost of $${booking.costPerNight} per night</article>
+    </div>`;
 }
 
-function populateContentDisplay(element) {
-    bookingDisplay.innerHTML += element
+function populateContentDisplay(bookings) {
+  bookings.forEach((booking) => {
+    let book = createBookingCard(booking);
+    bookingDisplay.innerHTML += book;
+  });
 }
-
diff --git a/src/scripts.js b/src/scripts.js
index bf45fc852..b57bd43c4 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -14,12 +14,4 @@ import './css/styles.scss';
 import { getAllData } from './api-calls.js';
 import {load} from './dom-updates.js';
 load()
-// getAllData()
-// .then(apiData => {
-//     allData = apiData;
-//      console.log('all', allData)
-//     return allData
-   
-//     const user = getRandomUser(allData)  
-// })
-// console.log('yessir', allData)
+
diff --git a/src/user.js b/src/user.js
index 57f2e1f91..05bc4dcd8 100644
--- a/src/user.js
+++ b/src/user.js
@@ -15,7 +15,6 @@ function getAllCustomerRoomBookings(customer, bookings, rooms) {
   if (roomsBooked.length === 0) {
     return "You currently have no bookings";
   } else {
-    console.log("here", roomsBooked);
     return roomsBooked;
   }
 }
diff --git a/test/user-test.js b/test/user-test.js
index 28f9d7a9d..fe43fe638 100644
--- a/test/user-test.js
+++ b/test/user-test.js
@@ -7,13 +7,11 @@ import {getAllCustomerRoomBookings, getTotalCostForAllBookings} from '../src/use
 describe('Show all customer bookings', function() {
   it('should show all of a customers bookings, past and future', function() {
     const customer = customers[0];
-    // const allRooms = rooms
     const allBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
     expect(allBookings).to.deep.equal([userBookings[0], userBookings[1]])
   })
   it('Should notify a customer if they have no bookings', function() {
     const customer = customers[3];
-    // const allRooms = rooms;
     const allBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
     expect(allBookings).to.deep.equal('You currently have no bookings')
   });

From fceb023ffd34e28b236d2cc1315986928df78196 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Thu, 18 Apr 2024 09:51:39 -0600
Subject: [PATCH 13/29] add functionality so a user sees total spent

---
 dist/index.html     |  1 +
 src/css/styles.scss | 21 ++++++++++++++++++++-
 src/dom-updates.js  | 21 ++++++++++++++++++++-
 src/user.js         |  4 +---
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 73388e6bc..8a5b77dc1 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -25,6 +25,7 @@ <h1>Overlook Hotel</h1>
     <nav class="nav-bar">
       <button class="buttons" id="my-bookings-button">My Bookings</button>
       <button class="buttons" id="book-a-room-button">Book a Room</button>
+      <article class="total-spent hidden"></article>
     </nav>
     <main class="main-section">
       <section class="content-display"></section>
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 4b871b8cb..ec8e2e666 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -66,9 +66,10 @@ h1 {
   background-color: rgba(123, 243, 243, 0.7);
   border-radius: 25px;
   width: 60%;
-  height: 700px;
+  height: auto;
   overflow: auto;
   margin-top: 75px;
+  margin-bottom: 25px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -112,3 +113,21 @@ p {
   margin-top: 15px;
   border-radius: 25px;
 }
+
+.total-spent {
+  font-family: Roboto, sans-serif;
+  background-color: rgb(123, 243, 243);
+  color: red;
+  width: 175px;
+  height: 100px;
+  margin-top: 50px;
+  border: 2px solid black;
+  border-radius: 25px;
+  text-align: center;
+  padding-top: 15px;
+
+}
+
+.hidden {
+  display: none;
+}
diff --git a/src/dom-updates.js b/src/dom-updates.js
index 05f59ec5c..ae2e8b8b5 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -9,17 +9,23 @@ import { getAllData } from "./api-calls.js";
 const myBookingsButton = document.getElementById("my-bookings-button");
 const bookRoomButton = document.getElementById("book-a-room-button");
 const bookingDisplay = document.querySelector(".content-display");
+const totalSpentDisplay = document.querySelector('.total-spent')
 
 //<><>data model<><>
 let allData;
+let customer;
 
 //<><>event listeners<><>
 myBookingsButton.addEventListener("click", () => {
-  let customer = getRandomUser(allData[0].customers);
+//   let customer = getRandomUser(allData[0].customers);
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
   let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
   populateContentDisplay(userBookings);
+  showElements([totalSpentDisplay])
+  let totalSpentByCustomer = getTotalCostForAllBookings(userBookings);
+  totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${userBookings.length} rooms`;
+  console.log('cust', customer)
 });
 
 //<><>event handlers<><>
@@ -27,6 +33,7 @@ export const load = () => {
   document.addEventListener("DOMContentLoaded", function () {
     getAllData().then((apiData) => {
       allData = apiData;
+      customer = getRandomUser(allData[0].customers);
       console.log("all", allData);
     });
   });
@@ -55,3 +62,15 @@ function populateContentDisplay(bookings) {
     bookingDisplay.innerHTML += book;
   });
 }
+
+function showElements(elements) {
+    const showElement = elements.forEach((element) => {
+        element.classList.remove('hidden')
+    })
+}
+
+function hideElements(elements) {
+    const hideElement = elements.forEach((element) => {
+        element.classList.add('hidden')
+    })
+}
diff --git a/src/user.js b/src/user.js
index 05bc4dcd8..01b530568 100644
--- a/src/user.js
+++ b/src/user.js
@@ -1,7 +1,5 @@
 function getAllCustomerRoomBookings(customer, bookings, rooms) {
-  const customerBookings = bookings.filter(
-    (booking) => booking.userID === customer.id
-  );
+  const customerBookings = bookings.filter((booking) => booking.userID === customer.id);
   const roomsBooked = customerBookings.map((booking) => {
     const room = rooms.find((room) => room.number === booking.roomNumber);
     return {

From 7f2352ffdbeb5ac3ffc87f323c6a90ae31685108 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Thu, 18 Apr 2024 12:05:28 -0600
Subject: [PATCH 14/29] add tests for room booking by date functionality

---
 src/booking.js       |  0
 test/booking-test.js | 19 +++++++++++++++++++
 test/mock-data.js    | 15 +++++++++++++++
 3 files changed, 34 insertions(+)
 create mode 100644 src/booking.js
 create mode 100644 test/booking-test.js

diff --git a/src/booking.js b/src/booking.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/test/booking-test.js b/test/booking-test.js
new file mode 100644
index 000000000..96e1fe411
--- /dev/null
+++ b/test/booking-test.js
@@ -0,0 +1,19 @@
+import chai from 'chai';
+const expect = chai.expect;
+
+import {bookings, rooms, bookedRoomsForSadPath} from './mock-data';
+import {getAvailableRooms} from './booking.js'
+
+describe('Get available bookings', function() {
+    it.skip('Should return all bookings available for a given date', function() {
+        const date = "2022/01/10";
+        const availableRooms = getAvailableRooms(bookings, rooms, date);
+        expect(availableRooms).to.deep.equal([bookings[0], bookings[1]])
+    })
+    it.skip('Should notify a customer if no rooms are available on a given date', function() {
+        const date = "2022/01/10";
+        const availableRooms = getAvailableRooms(bookedRoomsForSadPath, rooms, date);
+        expect(availableRooms).to.equal('Unfortunately there are no rooms for your selected date')
+    })
+})
+
diff --git a/test/mock-data.js b/test/mock-data.js
index 0c4bd7d37..b06a684e1 100644
--- a/test/mock-data.js
+++ b/test/mock-data.js
@@ -109,3 +109,18 @@ export const userBookings = [
     costPerNight: 340.17,
   },
 ];
+
+export const bookedRoomsForSadPath =[
+    {
+        id: "ccc",
+        userID: 3,
+        date: "2022/01/10",
+        roomNumber: 12,
+      },
+      {
+        id: "ddd",
+        userID: 3,
+        date: "2022/01/10",
+        roomNumber: 13,
+      }
+]

From 2ea9aa95cb84754d75ecc4b2dbc0807ff742dedc Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Thu, 18 Apr 2024 12:26:58 -0600
Subject: [PATCH 15/29] create fnction to pass first series of booking tests

---
 src/booking.js       | 21 +++++++++++++++++++++
 test/booking-test.js | 10 +++++-----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/booking.js b/src/booking.js
index e69de29bb..9d16ab8f6 100644
--- a/src/booking.js
+++ b/src/booking.js
@@ -0,0 +1,21 @@
+function getAvailableRooms(bookings, rooms, date) {
+    const filteredRoomsByDate = bookings.filter((booking) => {
+        return date !== booking.date
+    })
+    const getRooms = filteredRoomsByDate.map((room) => {
+        const foundRoom = rooms.find((eachRoom) => {
+            return eachRoom.number === room.roomNumber
+        })
+        return foundRoom
+    })
+    if (getRooms.length === 0) {
+        return 'We apologize, but unfortunately there are no rooms for your selected date'
+    } else {
+    return getRooms
+    }
+}
+
+
+
+
+export {getAvailableRooms}
\ No newline at end of file
diff --git a/test/booking-test.js b/test/booking-test.js
index 96e1fe411..7c17bf2b1 100644
--- a/test/booking-test.js
+++ b/test/booking-test.js
@@ -2,18 +2,18 @@ import chai from 'chai';
 const expect = chai.expect;
 
 import {bookings, rooms, bookedRoomsForSadPath} from './mock-data';
-import {getAvailableRooms} from './booking.js'
+import {getAvailableRooms} from '../src/booking.js'
 
 describe('Get available bookings', function() {
-    it.skip('Should return all bookings available for a given date', function() {
+    it('Should return all bookings available for a given date', function() {
         const date = "2022/01/10";
         const availableRooms = getAvailableRooms(bookings, rooms, date);
-        expect(availableRooms).to.deep.equal([bookings[0], bookings[1]])
+        expect(availableRooms).to.deep.equal([rooms[0], rooms[1]])
     })
-    it.skip('Should notify a customer if no rooms are available on a given date', function() {
+    it('Should notify a customer if no rooms are available on a given date', function() {
         const date = "2022/01/10";
         const availableRooms = getAvailableRooms(bookedRoomsForSadPath, rooms, date);
-        expect(availableRooms).to.equal('Unfortunately there are no rooms for your selected date')
+        expect(availableRooms).to.equal('We apologize, but unfortunately there are no rooms for your selected date')
     })
 })
 

From 3aa94e32e3e7684d0505e87a9c2c9a7c99b531e7 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Thu, 18 Apr 2024 12:43:25 -0600
Subject: [PATCH 16/29] create tests for filtereing through rooms by type

---
 src/booking.js       |  1 +
 test/booking-test.js | 17 +++++++++++++++++
 test/mock-data.js    |  4 ++--
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/booking.js b/src/booking.js
index 9d16ab8f6..b1bd7ffc4 100644
--- a/src/booking.js
+++ b/src/booking.js
@@ -11,6 +11,7 @@ function getAvailableRooms(bookings, rooms, date) {
     if (getRooms.length === 0) {
         return 'We apologize, but unfortunately there are no rooms for your selected date'
     } else {
+        console.log('get', getRooms)
     return getRooms
     }
 }
diff --git a/test/booking-test.js b/test/booking-test.js
index 7c17bf2b1..9ec733f15 100644
--- a/test/booking-test.js
+++ b/test/booking-test.js
@@ -17,3 +17,20 @@ describe('Get available bookings', function() {
     })
 })
 
+describe('Filter rooms by their room type', function() {
+    it.skip('Should return a list of rooms that fit a given room type and that are available on the date chosen', function() {
+        const date = "2022/01/10";
+        const availableRooms = getAvailableRooms(bookings, rooms, date);
+        const type = 'suite'
+        const roomsByType = filterAvailableRoomsByType(availableRooms, type)
+        expect(roomsByType).to.deep.equal([rooms[0], rooms[1]])
+    })
+    it.skip('Should notify user if there are no rooms by that type available', function() {
+        const date = "2022/01/10";
+        const availableRooms = getAvailableRooms(bookings, rooms, date);
+        const type = 'single room';
+        const roomsByType = filterAvailableRoomsByType(availableRooms, type);
+        expect(roomsByType).to.equal('We apologize, but unfortunately there are no rooms by that type available')
+    })
+})
+
diff --git a/test/mock-data.js b/test/mock-data.js
index b06a684e1..30c96eb91 100644
--- a/test/mock-data.js
+++ b/test/mock-data.js
@@ -66,7 +66,7 @@ export const rooms = [
   },
   {
     number: 14,
-    roomType: "single room",
+    roomType: "suite",
     bidet: true,
     bedSize: "queen",
     numBeds: 2,
@@ -102,7 +102,7 @@ export const userBookings = [
     costPerNight: 358.4,
   },
   {
-    title: "single room",
+    title: "suite",
     numBeds: 2,
     bedSize: "queen",
     dateBooked: "2022/01/10",

From ae48ec98335460d244ab308d6193b973815125c6 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Thu, 18 Apr 2024 12:49:23 -0600
Subject: [PATCH 17/29] create function to pass test for filteredByType
 bookings

---
 src/booking.js       | 13 ++++++++++++-
 test/booking-test.js |  6 +++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/booking.js b/src/booking.js
index b1bd7ffc4..6dc37bafa 100644
--- a/src/booking.js
+++ b/src/booking.js
@@ -16,7 +16,18 @@ function getAvailableRooms(bookings, rooms, date) {
     }
 }
 
+function filterAvailableRoomsByType(availableBookings, type) {
+    const filteredBookings = availableBookings.filter((booking) => {
+        return booking.roomType.includes(type)
+    })
+    if (filteredBookings.length === 0) {
+        return 'We apologize, but unfortunately there are no rooms by that type available'
+    } else {
+    return filteredBookings
+    }
+}
+
 
 
 
-export {getAvailableRooms}
\ No newline at end of file
+export {getAvailableRooms, filterAvailableRoomsByType}
\ No newline at end of file
diff --git a/test/booking-test.js b/test/booking-test.js
index 9ec733f15..7830c2279 100644
--- a/test/booking-test.js
+++ b/test/booking-test.js
@@ -2,7 +2,7 @@ import chai from 'chai';
 const expect = chai.expect;
 
 import {bookings, rooms, bookedRoomsForSadPath} from './mock-data';
-import {getAvailableRooms} from '../src/booking.js'
+import {getAvailableRooms, filterAvailableRoomsByType} from '../src/booking.js'
 
 describe('Get available bookings', function() {
     it('Should return all bookings available for a given date', function() {
@@ -18,14 +18,14 @@ describe('Get available bookings', function() {
 })
 
 describe('Filter rooms by their room type', function() {
-    it.skip('Should return a list of rooms that fit a given room type and that are available on the date chosen', function() {
+    it('Should return a list of rooms that fit a given room type and that are available on the date chosen', function() {
         const date = "2022/01/10";
         const availableRooms = getAvailableRooms(bookings, rooms, date);
         const type = 'suite'
         const roomsByType = filterAvailableRoomsByType(availableRooms, type)
         expect(roomsByType).to.deep.equal([rooms[0], rooms[1]])
     })
-    it.skip('Should notify user if there are no rooms by that type available', function() {
+    it('Should notify user if there are no rooms by that type available', function() {
         const date = "2022/01/10";
         const availableRooms = getAvailableRooms(bookings, rooms, date);
         const type = 'single room';

From b6fcc0b198a8a8d158e6dcf13d83d013212cd375 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Thu, 18 Apr 2024 14:58:00 -0600
Subject: [PATCH 18/29] add date form and css styling for it

---
 dist/index.html     |  5 +++++
 src/css/styles.scss | 22 ++++++++++++++++++++++
 src/dom-updates.js  | 18 +++++++++++-------
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 8a5b77dc1..a574a317e 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -26,6 +26,11 @@ <h1>Overlook Hotel</h1>
       <button class="buttons" id="my-bookings-button">My Bookings</button>
       <button class="buttons" id="book-a-room-button">Book a Room</button>
       <article class="total-spent hidden"></article>
+      <form class="date-form">
+        <label for="date">Select a date:</label>
+        <input type="date" id="date" name="date">
+        <input class="submit-button" type="submit" value="Submit">
+      </form>
     </nav>
     <main class="main-section">
       <section class="content-display"></section>
diff --git a/src/css/styles.scss b/src/css/styles.scss
index ec8e2e666..3070180b2 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -86,6 +86,13 @@ h1 {
   border-radius: 25px;
 }
 
+.submit-button {
+  background-color: rgb(244, 124, 19);
+  color:rgb(123, 243, 243);
+  border-radius: 10px;
+  width: 150px;
+}
+
 .footer {
   background-color: orange;
   color: rgb(244, 124, 19);
@@ -125,7 +132,22 @@ p {
   border-radius: 25px;
   text-align: center;
   padding-top: 15px;
+}
 
+.date-form {
+  font-family: Roboto, sans-serif;
+  font-weight: 600;
+  margin-top: 60px;
+  background-color: rgb(123, 243, 243);
+  color: red;
+  height: 100px;
+  width: 90%;
+  border: 2px solid black;
+  border-radius: 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
 }
 
 .hidden {
diff --git a/src/dom-updates.js b/src/dom-updates.js
index ae2e8b8b5..01f133461 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -2,6 +2,7 @@ import {
   getAllCustomerRoomBookings,
   getTotalCostForAllBookings,
 } from "./user.js";
+import {getAvailableRooms, filterAvailableRoomsByType} from './booking.js'
 // import { allData } from './scripts.js';
 import { getAllData } from "./api-calls.js";
 
@@ -9,7 +10,8 @@ import { getAllData } from "./api-calls.js";
 const myBookingsButton = document.getElementById("my-bookings-button");
 const bookRoomButton = document.getElementById("book-a-room-button");
 const bookingDisplay = document.querySelector(".content-display");
-const totalSpentDisplay = document.querySelector('.total-spent')
+const totalSpentDisplay = document.querySelector('.total-spent');
+const submitButton = document.querySelector('.submit-button');
 
 //<><>data model<><>
 let allData;
@@ -17,17 +19,18 @@ let customer;
 
 //<><>event listeners<><>
 myBookingsButton.addEventListener("click", () => {
-//   let customer = getRandomUser(allData[0].customers);
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
   let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
-  populateContentDisplay(userBookings);
+  populateContentDisplay(userBookings, createUserBookedRoomsCard);
   showElements([totalSpentDisplay])
   let totalSpentByCustomer = getTotalCostForAllBookings(userBookings);
   totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${userBookings.length} rooms`;
   console.log('cust', customer)
 });
 
+
+
 //<><>event handlers<><>
 export const load = () => {
   document.addEventListener("DOMContentLoaded", function () {
@@ -46,7 +49,7 @@ function getRandomUser(users) {
   return randomUser;
 }
 
-function createBookingCard(booking) {
+function createUserBookedRoomsCard(booking) {
   return `<div class="booking-card">
             <h3>${booking.title.toUpperCase()} - ${booking.bedSize.toUpperCase()}BED</h3>
             <article>Number of Beds: ${booking.numBeds}</article>
@@ -56,10 +59,11 @@ function createBookingCard(booking) {
     </div>`;
 }
 
-function populateContentDisplay(bookings) {
+
+function populateContentDisplay(bookings, cardsToBeCreated) {
   bookings.forEach((booking) => {
-    let book = createBookingCard(booking);
-    bookingDisplay.innerHTML += book;
+    let card = cardsToBeCreated(booking);
+    bookingDisplay.innerHTML += card;
   });
 }
 

From 0fdaf950cdf9d631c14c2efedf45257fc183b46c Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Thu, 18 Apr 2024 20:21:37 -0600
Subject: [PATCH 19/29] add functionality to allow a user to search bookings by
 date

---
 src/booking.js     | 13 +++++----
 src/dom-updates.js | 72 ++++++++++++++++++++++++++++++----------------
 2 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/booking.js b/src/booking.js
index 6dc37bafa..3ca702310 100644
--- a/src/booking.js
+++ b/src/booking.js
@@ -1,7 +1,11 @@
-function getAvailableRooms(bookings, rooms, date) {
-    const filteredRoomsByDate = bookings.filter((booking) => {
-        return date !== booking.date
-    })
+function getAvailableRooms(bookings, rooms, date) { 
+    date = date.split('-').join('/')
+    const filteredRoomsByDate = bookings.reduce((availableBookings, booking) => {
+        if (booking.date.toString() !== date) {
+            availableBookings.push(booking)
+        }
+        return availableBookings
+    }, [])
     const getRooms = filteredRoomsByDate.map((room) => {
         const foundRoom = rooms.find((eachRoom) => {
             return eachRoom.number === room.roomNumber
@@ -11,7 +15,6 @@ function getAvailableRooms(bookings, rooms, date) {
     if (getRooms.length === 0) {
         return 'We apologize, but unfortunately there are no rooms for your selected date'
     } else {
-        console.log('get', getRooms)
     return getRooms
     }
 }
diff --git a/src/dom-updates.js b/src/dom-updates.js
index 01f133461..f6b565265 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -16,8 +16,19 @@ const submitButton = document.querySelector('.submit-button');
 //<><>data model<><>
 let allData;
 let customer;
+let bookingsByDate;
 
 //<><>event listeners<><>
+export const load = () => {
+    document.addEventListener("DOMContentLoaded", function () {
+      getAllData().then((apiData) => {
+        allData = apiData;
+        customer = getRandomUser(allData[0].customers);
+        console.log("all", allData);
+      });
+    });
+  };
+
 myBookingsButton.addEventListener("click", () => {
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
@@ -29,18 +40,38 @@ myBookingsButton.addEventListener("click", () => {
   console.log('cust', customer)
 });
 
-
+submitButton.addEventListener('click', function(event) {
+    event.preventDefault();
+    bookingDisplay.innerHTML = ''
+    const dateInput = document.getElementById('date');
+    const date = dateInput.value.toString()
+    let bookings = allData[2].bookings;
+    let rooms = allData[1].rooms;
+    bookingsByDate = getAvailableRooms(bookings, rooms, date);
+    console.log('avail', bookingsByDate.length)
+    populateContentDisplay(bookingsByDate, createAvailableBookingsCard);
+})
 
 //<><>event handlers<><>
-export const load = () => {
-  document.addEventListener("DOMContentLoaded", function () {
-    getAllData().then((apiData) => {
-      allData = apiData;
-      customer = getRandomUser(allData[0].customers);
-      console.log("all", allData);
+function populateContentDisplay(bookings, cardsToBeCreated) {
+    bookings.forEach((booking) => {
+      let card = cardsToBeCreated(booking);
+      bookingDisplay.innerHTML += card;
     });
-  });
-};
+  }
+  
+  function showElements(elements) {
+      const showElement = elements.forEach((element) => {
+          element.classList.remove('hidden')
+      })
+  }
+  
+  function hideElements(elements) {
+      const hideElement = elements.forEach((element) => {
+          element.classList.add('hidden')
+      })
+  }
+  
 
 //<><>functions<><>
 function getRandomUser(users) {
@@ -59,22 +90,13 @@ function createUserBookedRoomsCard(booking) {
     </div>`;
 }
 
-
-function populateContentDisplay(bookings, cardsToBeCreated) {
-  bookings.forEach((booking) => {
-    let card = cardsToBeCreated(booking);
-    bookingDisplay.innerHTML += card;
-  });
+function createAvailableBookingsCard(booking) {
+    return `<div class="booking-card">
+            <h3>${booking.roomType.toUpperCase()}</h3>
+            <article>Number of Beds: ${booking.numBeds}</article>
+            <article>Bidet in Room: ${booking.bidet}</article>
+            <article>Cost Per Night: ${booking.costPerNight}</article>
+    </div>`
 }
 
-function showElements(elements) {
-    const showElement = elements.forEach((element) => {
-        element.classList.remove('hidden')
-    })
-}
 
-function hideElements(elements) {
-    const hideElement = elements.forEach((element) => {
-        element.classList.add('hidden')
-    })
-}

From 5581b37516bf757baba8bbc8a20a3b247c054f1f Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Fri, 19 Apr 2024 15:18:38 -0600
Subject: [PATCH 20/29] add functionality to show rooms filtered by type

---
 dist/index.html      | 11 +++++--
 src/css/styles.scss  | 17 ++++++++--
 src/dom-updates.js   | 75 +++++++++++++++++++++++++++++++++++---------
 test/booking-test.js |  1 +
 4 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index a574a317e..5b3e9e01d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -26,10 +26,15 @@ <h1>Overlook Hotel</h1>
       <button class="buttons" id="my-bookings-button">My Bookings</button>
       <button class="buttons" id="book-a-room-button">Book a Room</button>
       <article class="total-spent hidden"></article>
-      <form class="date-form">
+      <form class=" date-form hidden">
         <label for="date">Select a date:</label>
-        <input type="date" id="date" name="date">
-        <input class="submit-button" type="submit" value="Submit">
+        <input class="input-forms" type="date" id="date" name="date">
+        <input class="submit-button" type="submit" value="Submit" disabled>
+      </form>
+      <form class="type-search-form hidden">
+        <label for="date">Search By Room Type</label>
+        <input class="input-forms" type="text" id="room-type" name="room-type">
+        <input class="filter-submit-button" type="submit" value="Submit" disabled>
       </form>
     </nav>
     <main class="main-section">
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 3070180b2..cf0b7f0a0 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -84,13 +84,15 @@ h1 {
   width: 175px;
   height: 50px;
   border-radius: 25px;
+  cursor: pointer;
 }
 
-.submit-button {
+.submit-button, .filter-submit-button {
   background-color: rgb(244, 124, 19);
   color:rgb(123, 243, 243);
   border-radius: 10px;
   width: 150px;
+  cursor: pointer;
 }
 
 .footer {
@@ -134,7 +136,7 @@ p {
   padding-top: 15px;
 }
 
-.date-form {
+.date-form, .type-search-form {
   font-family: Roboto, sans-serif;
   font-weight: 600;
   margin-top: 60px;
@@ -150,6 +152,17 @@ p {
   justify-content: space-evenly;
 }
 
+.input-forms {
+  background-color: rgb(240, 226, 148);
+  color: red;
+  border-radius: 25px;
+  cursor: pointer;
+}
+
 .hidden {
   display: none;
 }
+
+.disabled-button {
+  cursor: not-allowed;
+}
diff --git a/src/dom-updates.js b/src/dom-updates.js
index f6b565265..2d84bea8d 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -9,9 +9,15 @@ import { getAllData } from "./api-calls.js";
 //<><>query selectors<><>
 const myBookingsButton = document.getElementById("my-bookings-button");
 const bookRoomButton = document.getElementById("book-a-room-button");
+const dateInput = document.getElementById('date');
+const roomTypeInput = document.getElementById('room-type');
+
 const bookingDisplay = document.querySelector(".content-display");
 const totalSpentDisplay = document.querySelector('.total-spent');
 const submitButton = document.querySelector('.submit-button');
+const filterSubmitButton = document.querySelector('.filter-submit-button')
+const dateForm = document.querySelector('.date-form');
+const filterByRoomTypeDisplay = document.querySelector('.type-search-form');
 
 //<><>data model<><>
 let allData;
@@ -19,30 +25,27 @@ let customer;
 let bookingsByDate;
 
 //<><>event listeners<><>
-export const load = () => {
-    document.addEventListener("DOMContentLoaded", function () {
-      getAllData().then((apiData) => {
-        allData = apiData;
-        customer = getRandomUser(allData[0].customers);
-        console.log("all", allData);
-      });
-    });
-  };
-
 myBookingsButton.addEventListener("click", () => {
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
   let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
   populateContentDisplay(userBookings, createUserBookedRoomsCard);
   showElements([totalSpentDisplay])
+  hideElements([dateForm])
   let totalSpentByCustomer = getTotalCostForAllBookings(userBookings);
   totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${userBookings.length} rooms`;
   console.log('cust', customer)
 });
 
+bookRoomButton.addEventListener('click', () => {
+    showElements([dateForm]);
+    hideElements([totalSpentDisplay]);
+});
+
 submitButton.addEventListener('click', function(event) {
     event.preventDefault();
-    bookingDisplay.innerHTML = ''
+    bookingDisplay.innerHTML = '';
+    showElements([filterByRoomTypeDisplay]);
     const dateInput = document.getElementById('date');
     const date = dateInput.value.toString()
     let bookings = allData[2].bookings;
@@ -52,24 +55,60 @@ submitButton.addEventListener('click', function(event) {
     populateContentDisplay(bookingsByDate, createAvailableBookingsCard);
 })
 
+filterSubmitButton.addEventListener('click', (event) => {
+    event.preventDefault();
+    bookingDisplay.innerHTML = ''
+    const filteredType = document.getElementById('room-type');
+    const roomType = filteredType.value
+    let filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
+    console.log('filter', filteredBookings)
+    populateContentDisplay(filteredBookings, createAvailableBookingsCard);
+    filterByRoomTypeDisplay.reset();
+});
+
+dateInput.addEventListener('input', () => {
+    disableButton(dateInput, submitButton)
+})
+
+roomTypeInput.addEventListener('input', () => {
+    disableButton(roomTypeInput, filterSubmitButton)
+})
+
 //<><>event handlers<><>
+export const load = () => {
+    document.addEventListener("DOMContentLoaded", function () {
+      getAllData().then((apiData) => {
+        allData = apiData;
+        customer = getRandomUser(allData[0].customers);
+        console.log("all", allData);
+      });
+    });
+  };
+
 function populateContentDisplay(bookings, cardsToBeCreated) {
+    console.log('books', bookings)
+    if (bookings === 'We apologize, but unfortunately there are no rooms by that type available') {
+        bookingDisplay.innerHTML = `<h2>${bookings}</h2>`
+    } else {
     bookings.forEach((booking) => {
       let card = cardsToBeCreated(booking);
       bookingDisplay.innerHTML += card;
     });
+}
   }
   
   function showElements(elements) {
-      const showElement = elements.forEach((element) => {
+      const shownElement = elements.forEach((element) => {
           element.classList.remove('hidden')
       })
+      return shownElement
   }
   
   function hideElements(elements) {
-      const hideElement = elements.forEach((element) => {
+      const hiddenElement = elements.forEach((element) => {
           element.classList.add('hidden')
       })
+      return hiddenElement
   }
   
 
@@ -94,9 +133,17 @@ function createAvailableBookingsCard(booking) {
     return `<div class="booking-card">
             <h3>${booking.roomType.toUpperCase()}</h3>
             <article>Number of Beds: ${booking.numBeds}</article>
-            <article>Bidet in Room: ${booking.bidet}</article>
+            <article>Bed Size: ${booking.bedSize}</article>
             <article>Cost Per Night: ${booking.costPerNight}</article>
     </div>`
 }
 
+function disableButton(field, button) {
+    if (field.value !== '') {
+        button.disabled = false
+    } else {
+        button.disabled = true;
+    }
+}
+
 
diff --git a/test/booking-test.js b/test/booking-test.js
index 7830c2279..426326c8b 100644
--- a/test/booking-test.js
+++ b/test/booking-test.js
@@ -34,3 +34,4 @@ describe('Filter rooms by their room type', function() {
     })
 })
 
+

From bf87193e7b24e7023bdb491e596f8b474f0af838 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Sat, 20 Apr 2024 11:49:39 -0600
Subject: [PATCH 21/29] minor refactor to give booking cards an id

---
 dist/index.html     |  6 ++--
 src/css/styles.scss |  1 +
 src/dom-updates.js  | 87 +++++++++++++++++++++++++++++++++------------
 src/user.js         |  1 +
 test/mock-data.js   |  2 ++
 5 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 5b3e9e01d..9da70c843 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -27,14 +27,14 @@ <h1>Overlook Hotel</h1>
       <button class="buttons" id="book-a-room-button">Book a Room</button>
       <article class="total-spent hidden"></article>
       <form class=" date-form hidden">
-        <label for="date">Select a date:</label>
+        <label for="date">Select a Date:</label>
         <input class="input-forms" type="date" id="date" name="date">
         <input class="submit-button" type="submit" value="Submit" disabled>
       </form>
       <form class="type-search-form hidden">
-        <label for="date">Search By Room Type</label>
+        <label for="date">Search by Room Type</label>
         <input class="input-forms" type="text" id="room-type" name="room-type">
-        <input class="filter-submit-button" type="submit" value="Submit" disabled>
+        <input class="filter-submit-button" type="submit" value="Search" disabled>
       </form>
     </nav>
     <main class="main-section">
diff --git a/src/css/styles.scss b/src/css/styles.scss
index cf0b7f0a0..d870a4816 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -121,6 +121,7 @@ p {
   text-align: center;
   margin-top: 15px;
   border-radius: 25px;
+  cursor: pointer;
 }
 
 .total-spent {
diff --git a/src/dom-updates.js b/src/dom-updates.js
index 2d84bea8d..c24a7e90d 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -15,7 +15,7 @@ const roomTypeInput = document.getElementById('room-type');
 const bookingDisplay = document.querySelector(".content-display");
 const totalSpentDisplay = document.querySelector('.total-spent');
 const submitButton = document.querySelector('.submit-button');
-const filterSubmitButton = document.querySelector('.filter-submit-button')
+const filterSearchButton = document.querySelector('.filter-submit-button')
 const dateForm = document.querySelector('.date-form');
 const filterByRoomTypeDisplay = document.querySelector('.type-search-form');
 
@@ -28,12 +28,16 @@ let bookingsByDate;
 myBookingsButton.addEventListener("click", () => {
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
-  let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
-  populateContentDisplay(userBookings, createUserBookedRoomsCard);
+//   let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+  customer.bookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+  console.log('userbooks', customer.bookings)
+//   populateContentDisplay(userBookings, createUserBookedRoomsCard);
+let bookingCards = createUserBookedRoomsCard(customer.bookings)
+  populateContentDisplay(bookingCards);
   showElements([totalSpentDisplay])
   hideElements([dateForm])
-  let totalSpentByCustomer = getTotalCostForAllBookings(userBookings);
-  totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${userBookings.length} rooms`;
+  let totalSpentByCustomer = getTotalCostForAllBookings(customer.bookings);
+  totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${customer.bookings.length} rooms`;
   console.log('cust', customer)
 });
 
@@ -51,18 +55,20 @@ submitButton.addEventListener('click', function(event) {
     let bookings = allData[2].bookings;
     let rooms = allData[1].rooms;
     bookingsByDate = getAvailableRooms(bookings, rooms, date);
+    let bookingCards = createAvailableBookingsCard(bookingsByDate);
     console.log('avail', bookingsByDate.length)
-    populateContentDisplay(bookingsByDate, createAvailableBookingsCard);
+    populateContentDisplay(bookingCards);
 })
 
-filterSubmitButton.addEventListener('click', (event) => {
+filterSearchButton.addEventListener('click', (event) => {
     event.preventDefault();
     bookingDisplay.innerHTML = ''
     const filteredType = document.getElementById('room-type');
     const roomType = filteredType.value
     let filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
     console.log('filter', filteredBookings)
-    populateContentDisplay(filteredBookings, createAvailableBookingsCard);
+    let bookingCards = createAvailableBookingsCard(filteredBookings)
+    populateContentDisplay(bookingCards);
     filterByRoomTypeDisplay.reset();
 });
 
@@ -71,9 +77,17 @@ dateInput.addEventListener('input', () => {
 })
 
 roomTypeInput.addEventListener('input', () => {
-    disableButton(roomTypeInput, filterSubmitButton)
+    disableButton(roomTypeInput, filterSearchButton)
 })
 
+bookingDisplay.addEventListener('click', (event) => {
+    if (event.target.classList.contains('booking-card')){
+        console.log('here', event.target.id);
+    }
+})
+//the event.target.id is accesses the index of the element clicked on in the array it cam from
+//how do I find it in the array? 
+
 //<><>event handlers<><>
 export const load = () => {
     document.addEventListener("DOMContentLoaded", function () {
@@ -85,14 +99,25 @@ export const load = () => {
     });
   };
 
-function populateContentDisplay(bookings, cardsToBeCreated) {
+// function populateContentDisplay(bookings, cardsToBeCreated) {
+//     console.log('books', bookings)
+//     if (bookings === 'We apologize, but unfortunately there are no rooms by that type available') {
+//         bookingDisplay.innerHTML = `<h2>${bookings}</h2>`
+//     } else {
+//     bookings.forEach((booking) => {
+//       let card = cardsToBeCreated(booking);
+//       bookingDisplay.innerHTML += card;
+//     });
+// }
+//   }
+
+function populateContentDisplay(bookings) {
     console.log('books', bookings)
     if (bookings === 'We apologize, but unfortunately there are no rooms by that type available') {
         bookingDisplay.innerHTML = `<h2>${bookings}</h2>`
     } else {
     bookings.forEach((booking) => {
-      let card = cardsToBeCreated(booking);
-      bookingDisplay.innerHTML += card;
+      bookingDisplay.innerHTML += booking;
     });
 }
   }
@@ -119,23 +144,39 @@ function getRandomUser(users) {
   return randomUser;
 }
 
-function createUserBookedRoomsCard(booking) {
-  return `<div class="booking-card">
-            <h3>${booking.title.toUpperCase()} - ${booking.bedSize.toUpperCase()}BED</h3>
-            <article>Number of Beds: ${booking.numBeds}</article>
-            <article>You have booked this on ${
-              booking.dateBooked
-            } at a cost of $${booking.costPerNight} per night</article>
-    </div>`;
-}
+// function createUserBookedRoomsCard(booking) {
+//   return `<div class="booking-card" id=${i}>
+//             <h3>${booking.title.toUpperCase()} - ${booking.bedSize.toUpperCase()}BED</h3>
+//             <article>Number of Beds: ${booking.numBeds}</article>
+//             <article>You have booked this on ${
+//               booking.dateBooked
+//             } at a cost of $${booking.costPerNight} per night</article>
+//     </div>`;
+// }
+
+function createUserBookedRoomsCard(bookings) {
+    const userBookingsCards = bookings.map((booking, i) => {
+        return `<div class="booking-card" id=${i}>
+        <h3>${booking.title.toUpperCase()} - ${booking.bedSize.toUpperCase()}BED</h3>
+        <article>Number of Beds: ${booking.numBeds}</article>
+        <article>You have booked this on ${
+          booking.dateBooked
+        } at a cost of $${booking.costPerNight} per night</article>
+</div>`;
+    })
+    return userBookingsCards
+  }
 
-function createAvailableBookingsCard(booking) {
-    return `<div class="booking-card">
+function createAvailableBookingsCard(bookings) {
+    const availableBookingCards = bookings.map((booking, i) =>{
+    return `<div class="booking-card" id${i}>
             <h3>${booking.roomType.toUpperCase()}</h3>
             <article>Number of Beds: ${booking.numBeds}</article>
             <article>Bed Size: ${booking.bedSize}</article>
             <article>Cost Per Night: ${booking.costPerNight}</article>
     </div>`
+})
+return availableBookingCards
 }
 
 function disableButton(field, button) {
diff --git a/src/user.js b/src/user.js
index 01b530568..4656d3fe7 100644
--- a/src/user.js
+++ b/src/user.js
@@ -8,6 +8,7 @@ function getAllCustomerRoomBookings(customer, bookings, rooms) {
       bedSize: room.bedSize,
       dateBooked: booking.date,
       costPerNight: room.costPerNight,
+      id: booking.id
     };
   });
   if (roomsBooked.length === 0) {
diff --git a/test/mock-data.js b/test/mock-data.js
index 30c96eb91..87dbb7ebf 100644
--- a/test/mock-data.js
+++ b/test/mock-data.js
@@ -100,6 +100,7 @@ export const userBookings = [
     bedSize: "queen",
     dateBooked: "2022/04/22",
     costPerNight: 358.4,
+    id: 'aaa'
   },
   {
     title: "suite",
@@ -107,6 +108,7 @@ export const userBookings = [
     bedSize: "queen",
     dateBooked: "2022/01/10",
     costPerNight: 340.17,
+    id: 'eee'
   },
 ];
 

From 47d757b3f12f3b09f62331326736b6ec8371f229 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Sat, 20 Apr 2024 14:56:05 -0600
Subject: [PATCH 22/29] get event.target to wrok properly on each element

---
 dist/index.html     |   2 +-
 src/css/styles.scss |   2 +-
 src/dom-updates.js  | 251 ++++++++++++++++++++++----------------------
 src/user.js         |   5 +-
 test/mock-data.js   |  10 +-
 5 files changed, 139 insertions(+), 131 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 9da70c843..d358ddf6b 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -26,7 +26,7 @@ <h1>Overlook Hotel</h1>
       <button class="buttons" id="my-bookings-button">My Bookings</button>
       <button class="buttons" id="book-a-room-button">Book a Room</button>
       <article class="total-spent hidden"></article>
-      <form class=" date-form hidden">
+      <form class="date-form hidden">
         <label for="date">Select a Date:</label>
         <input class="input-forms" type="date" id="date" name="date">
         <input class="submit-button" type="submit" value="Submit" disabled>
diff --git a/src/css/styles.scss b/src/css/styles.scss
index d870a4816..dae679f2b 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -107,7 +107,7 @@ p {
   margin-left: 250px;
 }
 
-.booking-card {
+.user-booked-card, .available-booking-card {
   font-family: Roboto, sans-serif;
   background-color: rgb(240, 226, 148);
   border: 2px solid orange;
diff --git a/src/dom-updates.js b/src/dom-updates.js
index c24a7e90d..12ede2129 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -2,140 +2,139 @@ import {
   getAllCustomerRoomBookings,
   getTotalCostForAllBookings,
 } from "./user.js";
-import {getAvailableRooms, filterAvailableRoomsByType} from './booking.js'
+import { getAvailableRooms, filterAvailableRoomsByType } from "./booking.js";
 // import { allData } from './scripts.js';
 import { getAllData } from "./api-calls.js";
 
 //<><>query selectors<><>
 const myBookingsButton = document.getElementById("my-bookings-button");
 const bookRoomButton = document.getElementById("book-a-room-button");
-const dateInput = document.getElementById('date');
-const roomTypeInput = document.getElementById('room-type');
+const dateInput = document.getElementById("date");
+const roomTypeInput = document.getElementById("room-type");
 
 const bookingDisplay = document.querySelector(".content-display");
-const totalSpentDisplay = document.querySelector('.total-spent');
-const submitButton = document.querySelector('.submit-button');
-const filterSearchButton = document.querySelector('.filter-submit-button')
-const dateForm = document.querySelector('.date-form');
-const filterByRoomTypeDisplay = document.querySelector('.type-search-form');
+const totalSpentDisplay = document.querySelector(".total-spent");
+const submitButton = document.querySelector(".submit-button");
+const filterSearchButton = document.querySelector(".filter-submit-button");
+const dateForm = document.querySelector(".date-form");
+const filterByRoomTypeDisplay = document.querySelector(".type-search-form");
 
 //<><>data model<><>
 let allData;
 let customer;
 let bookingsByDate;
+let currentBooking;
 
 //<><>event listeners<><>
 myBookingsButton.addEventListener("click", () => {
+    bookingDisplay.innerHTML = '';
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
-//   let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+  //   let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
   customer.bookings = getAllCustomerRoomBookings(customer, bookings, rooms);
-  console.log('userbooks', customer.bookings)
-//   populateContentDisplay(userBookings, createUserBookedRoomsCard);
-let bookingCards = createUserBookedRoomsCard(customer.bookings)
+  console.log("userbooks", customer.bookings);
+  //   populateContentDisplay(userBookings, createUserBookedRoomsCard);
+  let bookingCards = createUserBookedRoomsCard(customer.bookings);
   populateContentDisplay(bookingCards);
-  showElements([totalSpentDisplay])
-  hideElements([dateForm])
+  showElements([totalSpentDisplay]);
+  hideElements([dateForm]);
   let totalSpentByCustomer = getTotalCostForAllBookings(customer.bookings);
   totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${customer.bookings.length} rooms`;
-  console.log('cust', customer)
+  console.log("cust", customer);
 });
 
-bookRoomButton.addEventListener('click', () => {
-    showElements([dateForm]);
-    hideElements([totalSpentDisplay]);
+bookRoomButton.addEventListener("click", () => {
+  showElements([dateForm]);
+  hideElements([totalSpentDisplay]);
+  console.log('cur', currentBooking)
 });
 
-submitButton.addEventListener('click', function(event) {
-    event.preventDefault();
-    bookingDisplay.innerHTML = '';
-    showElements([filterByRoomTypeDisplay]);
-    const dateInput = document.getElementById('date');
-    const date = dateInput.value.toString()
-    let bookings = allData[2].bookings;
-    let rooms = allData[1].rooms;
-    bookingsByDate = getAvailableRooms(bookings, rooms, date);
-    let bookingCards = createAvailableBookingsCard(bookingsByDate);
-    console.log('avail', bookingsByDate.length)
-    populateContentDisplay(bookingCards);
-})
-
-filterSearchButton.addEventListener('click', (event) => {
-    event.preventDefault();
-    bookingDisplay.innerHTML = ''
-    const filteredType = document.getElementById('room-type');
-    const roomType = filteredType.value
-    let filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
-    console.log('filter', filteredBookings)
-    let bookingCards = createAvailableBookingsCard(filteredBookings)
-    populateContentDisplay(bookingCards);
-    filterByRoomTypeDisplay.reset();
+submitButton.addEventListener("click", function (event) {
+  event.preventDefault();
+  bookingDisplay.innerHTML = "";
+  showElements([filterByRoomTypeDisplay]);
+  const dateInput = document.getElementById("date");
+  const date = dateInput.value.toString();
+  let bookings = allData[2].bookings;
+  let rooms = allData[1].rooms;
+  bookingsByDate = getAvailableRooms(bookings, rooms, date);
+  let bookingCards = createAvailableBookingsCard(bookingsByDate);
+  console.log("avail", bookingsByDate.length);
+  populateContentDisplay(bookingCards);
+//   dateForm.reset();
 });
 
-dateInput.addEventListener('input', () => {
-    disableButton(dateInput, submitButton)
-})
+filterSearchButton.addEventListener("click", (event) => {
+  event.preventDefault();
+  bookingDisplay.innerHTML = "";
+  const filteredType = document.getElementById("room-type");
+  const roomType = filteredType.value;
+  let filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
+  console.log("filter", filteredBookings);
+  bookingsByDate = filteredBookings
+  let bookingCards = createAvailableBookingsCard(bookingsByDate);
+  populateContentDisplay(bookingCards);
+  filterByRoomTypeDisplay.reset();
+});
 
-roomTypeInput.addEventListener('input', () => {
-    disableButton(roomTypeInput, filterSearchButton)
-})
+dateInput.addEventListener("input", () => {
+  disableButton(dateInput, submitButton);
+});
 
-bookingDisplay.addEventListener('click', (event) => {
-    if (event.target.classList.contains('booking-card')){
-        console.log('here', event.target.id);
-    }
-})
+roomTypeInput.addEventListener("input", () => {
+  disableButton(roomTypeInput, filterSearchButton);
+});
+
+bookingDisplay.addEventListener("click", (event) => {
+  if (event.target.classList.contains("user-booked-card")) {
+    currentBooking = findBooking(event.target.id, customer.bookings);
+    // console.log('cur', currentBooking)
+    const bookingToDisplay = renderSingleBooking(currentBooking);
+    bookingDisplay.innerHTML = bookingToDisplay;
+  } else if (event.target.classList.contains("available-booking-card")) {
+    currentBooking = findBooking(event.target.id, bookingsByDate);    
+    const bookingToDisplay = renderSingleBooking(currentBooking);
+    bookingDisplay.innerHTML = bookingToDisplay;
+  }
+});
 //the event.target.id is accesses the index of the element clicked on in the array it cam from
-//how do I find it in the array? 
+//how do I find it in the array?
 
 //<><>event handlers<><>
 export const load = () => {
-    document.addEventListener("DOMContentLoaded", function () {
-      getAllData().then((apiData) => {
-        allData = apiData;
-        customer = getRandomUser(allData[0].customers);
-        console.log("all", allData);
-      });
+  document.addEventListener("DOMContentLoaded", function () {
+    getAllData().then((apiData) => {
+      allData = apiData;
+      customer = getRandomUser(allData[0].customers);
+      console.log("all", allData);
     });
-  };
-
-// function populateContentDisplay(bookings, cardsToBeCreated) {
-//     console.log('books', bookings)
-//     if (bookings === 'We apologize, but unfortunately there are no rooms by that type available') {
-//         bookingDisplay.innerHTML = `<h2>${bookings}</h2>`
-//     } else {
-//     bookings.forEach((booking) => {
-//       let card = cardsToBeCreated(booking);
-//       bookingDisplay.innerHTML += card;
-//     });
-// }
-//   }
+  });
+};
 
 function populateContentDisplay(bookings) {
-    console.log('books', bookings)
-    if (bookings === 'We apologize, but unfortunately there are no rooms by that type available') {
-        bookingDisplay.innerHTML = `<h2>${bookings}</h2>`
-    } else {
+  if (bookings === "We apologize, but unfortunately there are no rooms by that type available" ||
+    bookings === "We apologize, but unfortunately there are no rooms for your selected date") {
+    bookingDisplay.innerHTML = `<h2>${bookings}</h2>`;
+  } else {
     bookings.forEach((booking) => {
       bookingDisplay.innerHTML += booking;
     });
-}
-  }
-  
-  function showElements(elements) {
-      const shownElement = elements.forEach((element) => {
-          element.classList.remove('hidden')
-      })
-      return shownElement
-  }
-  
-  function hideElements(elements) {
-      const hiddenElement = elements.forEach((element) => {
-          element.classList.add('hidden')
-      })
-      return hiddenElement
   }
-  
+}
+
+function showElements(elements) {
+  const shownElement = elements.forEach((element) => {
+    element.classList.remove("hidden");
+  });
+  return shownElement;
+}
+
+function hideElements(elements) {
+  const hiddenElement = elements.forEach((element) => {
+    element.classList.add("hidden");
+  });
+  return hiddenElement;
+}
 
 //<><>functions<><>
 function getRandomUser(users) {
@@ -144,47 +143,53 @@ function getRandomUser(users) {
   return randomUser;
 }
 
-// function createUserBookedRoomsCard(booking) {
-//   return `<div class="booking-card" id=${i}>
-//             <h3>${booking.title.toUpperCase()} - ${booking.bedSize.toUpperCase()}BED</h3>
-//             <article>Number of Beds: ${booking.numBeds}</article>
-//             <article>You have booked this on ${
-//               booking.dateBooked
-//             } at a cost of $${booking.costPerNight} per night</article>
-//     </div>`;
-// }
-
 function createUserBookedRoomsCard(bookings) {
-    const userBookingsCards = bookings.map((booking, i) => {
-        return `<div class="booking-card" id=${i}>
-        <h3>${booking.title.toUpperCase()} - ${booking.bedSize.toUpperCase()}BED</h3>
+  const userBookingsCards = bookings.map((booking, i) => {
+    let card = `<div class="user-booked-card" id=${i}>
+        <h3>${booking.roomType.toUpperCase()} - ${booking.bedSize.toUpperCase()} BED</h3>
         <article>Number of Beds: ${booking.numBeds}</article>
-        <article>You have booked this on ${
-          booking.dateBooked
-        } at a cost of $${booking.costPerNight} per night</article>
+        <article>You have booked this on ${booking.dateBooked} at a cost of $${
+      booking.costPerNight
+    } per night</article>
 </div>`;
-    })
-    return userBookingsCards
-  }
+return card
+  });
+  return userBookingsCards;
+}
 
 function createAvailableBookingsCard(bookings) {
-    const availableBookingCards = bookings.map((booking, i) =>{
-    return `<div class="booking-card" id${i}>
+  const availableBookingCards = bookings.map((booking, i) => {
+    let card = `<div class="available-booking-card" id=${i}>
             <h3>${booking.roomType.toUpperCase()}</h3>
             <article>Number of Beds: ${booking.numBeds}</article>
             <article>Bed Size: ${booking.bedSize}</article>
             <article>Cost Per Night: ${booking.costPerNight}</article>
-    </div>`
-})
-return availableBookingCards
+    </div>`;
+    return card
+  });
+  return availableBookingCards;
 }
 
-function disableButton(field, button) {
-    if (field.value !== '') {
-        button.disabled = false
-    } else {
-        button.disabled = true;
-    }
+function renderSingleBooking(booking) {
+    console.log('thisbooking', booking)
+  const singleBooking = `<div class="single-booking-display">
+    <h2>${booking.roomType.toUpperCase()}</h2>
+    <article>Number of Beds: ${booking.numBeds}</article>
+            <article>Bed Size: ${booking.bedSize}</article>
+            <article>Cost Per Night: ${booking.costPerNight}</article>
+    </div>`;
+  return singleBooking;
 }
 
+function disableButton(field, button) {
+  if (field.value !== "") {
+    button.disabled = false;
+  } else {
+    button.disabled = true;
+  }
+}
 
+function findBooking(target, bookings) {
+  let booking = bookings[target];
+  return booking;
+}
diff --git a/src/user.js b/src/user.js
index 4656d3fe7..ffabd1794 100644
--- a/src/user.js
+++ b/src/user.js
@@ -3,12 +3,13 @@ function getAllCustomerRoomBookings(customer, bookings, rooms) {
   const roomsBooked = customerBookings.map((booking) => {
     const room = rooms.find((room) => room.number === booking.roomNumber);
     return {
-      title: room.roomType,
+      roomType: room.roomType,
       numBeds: room.numBeds,
       bedSize: room.bedSize,
       dateBooked: booking.date,
       costPerNight: room.costPerNight,
-      id: booking.id
+      id: booking.id,
+      roomNumber: room.number
     };
   });
   if (roomsBooked.length === 0) {
diff --git a/test/mock-data.js b/test/mock-data.js
index 87dbb7ebf..c502954b7 100644
--- a/test/mock-data.js
+++ b/test/mock-data.js
@@ -95,20 +95,22 @@ export const customers = [
 
 export const userBookings = [
   {
-    title: "residential suite",
+    roomType: "residential suite",
     numBeds: 1,
     bedSize: "queen",
     dateBooked: "2022/04/22",
     costPerNight: 358.4,
-    id: 'aaa'
+    id: 'aaa',
+    roomNumber: 10
   },
   {
-    title: "suite",
+    roomType: "suite",
     numBeds: 2,
     bedSize: "queen",
     dateBooked: "2022/01/10",
     costPerNight: 340.17,
-    id: 'eee'
+    id: 'eee',
+    roomNumber: 14
   },
 ];
 

From feb96ca6654948b0a5bb859999c9b8a8ad1aeed1 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Sat, 20 Apr 2024 15:23:10 -0600
Subject: [PATCH 23/29] style and add picture to single room view

---
 dist/index.html     |  5 ++++-
 src/css/styles.scss | 26 +++++++++++++++++++++++++-
 src/dom-updates.js  | 44 +++++++++++++++++++++++++++++++-------------
 3 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index d358ddf6b..35ebbc6b0 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -38,7 +38,10 @@ <h1>Overlook Hotel</h1>
       </form>
     </nav>
     <main class="main-section">
-      <section class="content-display"></section>
+      <section class="bookings-display">
+      <article class="content-display"></article>
+      <button class="buttons hidden" id="book-room-button">Book Room</button>
+    </section>
     </main>
   </section>
   <footer class="footer">
diff --git a/src/css/styles.scss b/src/css/styles.scss
index dae679f2b..05da24d45 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -62,7 +62,7 @@ h1 {
   justify-content: center;
 }
 
-.content-display {
+.bookings-display {
   background-color: rgba(123, 243, 243, 0.7);
   border-radius: 25px;
   width: 60%;
@@ -124,6 +124,22 @@ p {
   cursor: pointer;
 }
 
+.single-booking-display {
+  font-family: Roboto, sans-serif;
+  background-color: rgb(240, 226, 148);
+  border: 2px solid orange;
+  border-radius: 25px;
+  color: red;
+  height: 500px;
+  width: 400px;
+  margin-top: 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+}
+
 .total-spent {
   font-family: Roboto, sans-serif;
   background-color: rgb(123, 243, 243);
@@ -160,6 +176,14 @@ p {
   cursor: pointer;
 }
 
+img {
+  height: 250px;
+  width: 250px;
+  margin-top: 35px;
+  border: 2px solid orange;
+  border-radius: 25px;
+}
+
 .hidden {
   display: none;
 }
diff --git a/src/dom-updates.js b/src/dom-updates.js
index 12ede2129..e638320f4 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -8,7 +8,8 @@ import { getAllData } from "./api-calls.js";
 
 //<><>query selectors<><>
 const myBookingsButton = document.getElementById("my-bookings-button");
-const bookRoomButton = document.getElementById("book-a-room-button");
+const bookARoomButton = document.getElementById("book-a-room-button");
+const bookThisRoomButton = document.getElementById("book-room-button");
 const dateInput = document.getElementById("date");
 const roomTypeInput = document.getElementById("room-type");
 
@@ -24,10 +25,16 @@ let allData;
 let customer;
 let bookingsByDate;
 let currentBooking;
+const images = [
+  "https://www.cvent.com/sites/default/files/image/2021-10/hotel%20room%20with%20beachfront%20view.jpg",
+  "https://www.rd.com/wp-content/uploads/2023/05/GettyImages-1445292736.jpg",
+  "https://www.travelandleisure.com/thmb/OiDnPGo3k9QLRT9__TPhFZcr7PU=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/rosewood-carlyle-presidential-suite-LUXESUITE0122-0046808a88924e57922d78c7f1d9ca60.jpg",
+  "https://hoteldel.com/wp-content/uploads/2021/03/hotel-del-coronado-views-suite-K1TOS1-K1TOJ1-1600x1000-1.jpg",
+];
 
 //<><>event listeners<><>
 myBookingsButton.addEventListener("click", () => {
-    bookingDisplay.innerHTML = '';
+  bookingDisplay.innerHTML = "";
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
   //   let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
@@ -42,11 +49,10 @@ myBookingsButton.addEventListener("click", () => {
   totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${customer.bookings.length} rooms`;
   console.log("cust", customer);
 });
-
-bookRoomButton.addEventListener("click", () => {
+bookARoomButton.addEventListener("click", () => {
   showElements([dateForm]);
   hideElements([totalSpentDisplay]);
-  console.log('cur', currentBooking)
+  console.log("cur", currentBooking);
 });
 
 submitButton.addEventListener("click", function (event) {
@@ -61,7 +67,7 @@ submitButton.addEventListener("click", function (event) {
   let bookingCards = createAvailableBookingsCard(bookingsByDate);
   console.log("avail", bookingsByDate.length);
   populateContentDisplay(bookingCards);
-//   dateForm.reset();
+  //   dateForm.reset();
 });
 
 filterSearchButton.addEventListener("click", (event) => {
@@ -71,7 +77,7 @@ filterSearchButton.addEventListener("click", (event) => {
   const roomType = filteredType.value;
   let filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
   console.log("filter", filteredBookings);
-  bookingsByDate = filteredBookings
+  bookingsByDate = filteredBookings;
   let bookingCards = createAvailableBookingsCard(bookingsByDate);
   populateContentDisplay(bookingCards);
   filterByRoomTypeDisplay.reset();
@@ -91,8 +97,9 @@ bookingDisplay.addEventListener("click", (event) => {
     // console.log('cur', currentBooking)
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
+    showElements([bookThisRoomButton]);
   } else if (event.target.classList.contains("available-booking-card")) {
-    currentBooking = findBooking(event.target.id, bookingsByDate);    
+    currentBooking = findBooking(event.target.id, bookingsByDate);
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
   }
@@ -112,8 +119,12 @@ export const load = () => {
 };
 
 function populateContentDisplay(bookings) {
-  if (bookings === "We apologize, but unfortunately there are no rooms by that type available" ||
-    bookings === "We apologize, but unfortunately there are no rooms for your selected date") {
+  if (
+    bookings ===
+      "We apologize, but unfortunately there are no rooms by that type available" ||
+    bookings ===
+      "We apologize, but unfortunately there are no rooms for your selected date"
+  ) {
     bookingDisplay.innerHTML = `<h2>${bookings}</h2>`;
   } else {
     bookings.forEach((booking) => {
@@ -152,7 +163,7 @@ function createUserBookedRoomsCard(bookings) {
       booking.costPerNight
     } per night</article>
 </div>`;
-return card
+    return card;
   });
   return userBookingsCards;
 }
@@ -165,18 +176,19 @@ function createAvailableBookingsCard(bookings) {
             <article>Bed Size: ${booking.bedSize}</article>
             <article>Cost Per Night: ${booking.costPerNight}</article>
     </div>`;
-    return card
+    return card;
   });
   return availableBookingCards;
 }
 
 function renderSingleBooking(booking) {
-    console.log('thisbooking', booking)
+  console.log("thisbooking", booking);
   const singleBooking = `<div class="single-booking-display">
     <h2>${booking.roomType.toUpperCase()}</h2>
     <article>Number of Beds: ${booking.numBeds}</article>
             <article>Bed Size: ${booking.bedSize}</article>
             <article>Cost Per Night: ${booking.costPerNight}</article>
+            <img src="${generateRandomImage(images)}" alt="hotel room with bed">
     </div>`;
   return singleBooking;
 }
@@ -193,3 +205,9 @@ function findBooking(target, bookings) {
   let booking = bookings[target];
   return booking;
 }
+
+function generateRandomImage(images) {
+  let randomIndex = Math.floor(Math.random() * images.length);
+  let randomImage = images[randomIndex];
+  return randomImage;
+}

From d7fc83a62733360e5ed2394b21da602f90cc0f9f Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Sat, 20 Apr 2024 16:56:54 -0600
Subject: [PATCH 24/29] add book room and cancel booking buttons

---
 dist/index.html    | 1 +
 src/dom-updates.js | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 35ebbc6b0..3ab4ced5f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -41,6 +41,7 @@ <h1>Overlook Hotel</h1>
       <section class="bookings-display">
       <article class="content-display"></article>
       <button class="buttons hidden" id="book-room-button">Book Room</button>
+      <button class="buttons hidden" id="cancel-room-button">Cancel Booking</button>
     </section>
     </main>
   </section>
diff --git a/src/dom-updates.js b/src/dom-updates.js
index e638320f4..707360c9f 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -10,6 +10,7 @@ import { getAllData } from "./api-calls.js";
 const myBookingsButton = document.getElementById("my-bookings-button");
 const bookARoomButton = document.getElementById("book-a-room-button");
 const bookThisRoomButton = document.getElementById("book-room-button");
+const cancelBookingButton = document.getElementById("cancel-room-button");
 const dateInput = document.getElementById("date");
 const roomTypeInput = document.getElementById("room-type");
 
@@ -44,11 +45,12 @@ myBookingsButton.addEventListener("click", () => {
   let bookingCards = createUserBookedRoomsCard(customer.bookings);
   populateContentDisplay(bookingCards);
   showElements([totalSpentDisplay]);
-  hideElements([dateForm]);
+  hideElements([dateForm, filterByRoomTypeDisplay]);
   let totalSpentByCustomer = getTotalCostForAllBookings(customer.bookings);
   totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${customer.bookings.length} rooms`;
   console.log("cust", customer);
 });
+
 bookARoomButton.addEventListener("click", () => {
   showElements([dateForm]);
   hideElements([totalSpentDisplay]);
@@ -97,11 +99,12 @@ bookingDisplay.addEventListener("click", (event) => {
     // console.log('cur', currentBooking)
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
-    showElements([bookThisRoomButton]);
+    showElements([cancelBookingButton]);
   } else if (event.target.classList.contains("available-booking-card")) {
     currentBooking = findBooking(event.target.id, bookingsByDate);
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
+    showElements([bookThisRoomButton]);
   }
 });
 //the event.target.id is accesses the index of the element clicked on in the array it cam from

From 41d64a3d2c59b00ad88ad35d35f1385023fbf263 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Sun, 21 Apr 2024 10:18:43 -0600
Subject: [PATCH 25/29] fix bug not allowing filtered rooms to populate

---
 dist/index.html    | 10 ++++++++--
 src/dom-updates.js | 11 ++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 3ab4ced5f..1b98c670d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -32,8 +32,14 @@ <h1>Overlook Hotel</h1>
         <input class="submit-button" type="submit" value="Submit" disabled>
       </form>
       <form class="type-search-form hidden">
-        <label for="date">Search by Room Type</label>
-        <input class="input-forms" type="text" id="room-type" name="room-type">
+        <label for="room-type">Search by Room Type</label>
+        <select class="input-forms" id="room-type" name="room-type">
+          <option value="" disabled selected hidden>Select a Type</option>
+          <option value="residential suite">Residential Suite</option>
+          <option value="junior suite">Junior Suite</option>
+          <option value="suite">Suite</option>
+          <option value="single room">Single Room</option>
+        </select>
         <input class="filter-submit-button" type="submit" value="Search" disabled>
       </form>
     </nav>
diff --git a/src/dom-updates.js b/src/dom-updates.js
index 707360c9f..0dd54ccea 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -25,6 +25,7 @@ const filterByRoomTypeDisplay = document.querySelector(".type-search-form");
 let allData;
 let customer;
 let bookingsByDate;
+let filteredBookings;
 let currentBooking;
 const images = [
   "https://www.cvent.com/sites/default/files/image/2021-10/hotel%20room%20with%20beachfront%20view.jpg",
@@ -66,8 +67,9 @@ submitButton.addEventListener("click", function (event) {
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
   bookingsByDate = getAvailableRooms(bookings, rooms, date);
+  console.log("filter2", typeof bookingsByDate);
   let bookingCards = createAvailableBookingsCard(bookingsByDate);
-  console.log("avail", bookingsByDate.length);
+  console.log("avail", bookingsByDate);
   populateContentDisplay(bookingCards);
   //   dateForm.reset();
 });
@@ -77,12 +79,11 @@ filterSearchButton.addEventListener("click", (event) => {
   bookingDisplay.innerHTML = "";
   const filteredType = document.getElementById("room-type");
   const roomType = filteredType.value;
-  let filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
+  filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
   console.log("filter", filteredBookings);
-  bookingsByDate = filteredBookings;
-  let bookingCards = createAvailableBookingsCard(bookingsByDate);
+  let bookingCards = createAvailableBookingsCard(filteredBookings);
   populateContentDisplay(bookingCards);
-  filterByRoomTypeDisplay.reset();
+  filterByRoomTypeDisplay.selectedIndex = -1;
 });
 
 dateInput.addEventListener("input", () => {

From b24996283ae1d30e6f4e4499c4e4688032453cb0 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Sun, 21 Apr 2024 11:18:11 -0600
Subject: [PATCH 26/29] add functionality to book a room and view in my
 bookings

---
 src/api-calls.js   | 20 +++++++++++++++++++-
 src/dom-updates.js | 36 ++++++++++++++++++++++++++++++------
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/api-calls.js b/src/api-calls.js
index 93def634b..aead01864 100644
--- a/src/api-calls.js
+++ b/src/api-calls.js
@@ -15,6 +15,24 @@ function getAllData() {
     .catch(error => console.log(error))
     }
 
+function addBooking(bookingData) {
+    return fetch('http://localhost:3001/api/v1/bookings', {
+        method: 'POST',
+        body: JSON.stringify(bookingData),
+        headers: { "Content-Type": "application/json"
+        }
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error(error)
+        } else {
+            return response.json()
+        }
+    })
+    .catch(error => console.log('this errror', error))
+}
+
 export {
-    getAllData
+    getAllData,
+    addBooking
 }
\ No newline at end of file
diff --git a/src/dom-updates.js b/src/dom-updates.js
index 0dd54ccea..9a437558a 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -4,7 +4,7 @@ import {
 } from "./user.js";
 import { getAvailableRooms, filterAvailableRoomsByType } from "./booking.js";
 // import { allData } from './scripts.js';
-import { getAllData } from "./api-calls.js";
+import { getAllData, addBooking } from "./api-calls.js";
 
 //<><>query selectors<><>
 const myBookingsButton = document.getElementById("my-bookings-button");
@@ -27,6 +27,7 @@ let customer;
 let bookingsByDate;
 let filteredBookings;
 let currentBooking;
+let date;
 const images = [
   "https://www.cvent.com/sites/default/files/image/2021-10/hotel%20room%20with%20beachfront%20view.jpg",
   "https://www.rd.com/wp-content/uploads/2023/05/GettyImages-1445292736.jpg",
@@ -46,7 +47,7 @@ myBookingsButton.addEventListener("click", () => {
   let bookingCards = createUserBookedRoomsCard(customer.bookings);
   populateContentDisplay(bookingCards);
   showElements([totalSpentDisplay]);
-  hideElements([dateForm, filterByRoomTypeDisplay]);
+  hideElements([dateForm, filterByRoomTypeDisplay, bookThisRoomButton, cancelBookingButton]);
   let totalSpentByCustomer = getTotalCostForAllBookings(customer.bookings);
   totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${customer.bookings.length} rooms`;
   console.log("cust", customer);
@@ -55,7 +56,7 @@ myBookingsButton.addEventListener("click", () => {
 bookARoomButton.addEventListener("click", () => {
   showElements([dateForm]);
   hideElements([totalSpentDisplay]);
-  console.log("cur", currentBooking);
+//   console.log("cur", currentBooking);
 });
 
 submitButton.addEventListener("click", function (event) {
@@ -63,7 +64,7 @@ submitButton.addEventListener("click", function (event) {
   bookingDisplay.innerHTML = "";
   showElements([filterByRoomTypeDisplay]);
   const dateInput = document.getElementById("date");
-  const date = dateInput.value.toString();
+  date = dateInput.value.toString();
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
   bookingsByDate = getAvailableRooms(bookings, rooms, date);
@@ -71,7 +72,8 @@ submitButton.addEventListener("click", function (event) {
   let bookingCards = createAvailableBookingsCard(bookingsByDate);
   console.log("avail", bookingsByDate);
   populateContentDisplay(bookingCards);
-  //   dateForm.reset();
+  dateForm.reset();
+  console.log('date', date)
 });
 
 filterSearchButton.addEventListener("click", (event) => {
@@ -97,17 +99,39 @@ roomTypeInput.addEventListener("input", () => {
 bookingDisplay.addEventListener("click", (event) => {
   if (event.target.classList.contains("user-booked-card")) {
     currentBooking = findBooking(event.target.id, customer.bookings);
-    // console.log('cur', currentBooking)
+    console.log('cur', currentBooking)
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
     showElements([cancelBookingButton]);
+    hideElements([bookThisRoomButton]);
   } else if (event.target.classList.contains("available-booking-card")) {
     currentBooking = findBooking(event.target.id, bookingsByDate);
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
     showElements([bookThisRoomButton]);
+    hideElements([cancelBookingButton]);
+    console.log("cur", currentBooking);
   }
 });
+
+bookThisRoomButton.addEventListener('click', () => {
+    date = date.split('-').join('/');
+    let bookingToAdd = {
+        'userID': customer.id,
+        'date': date,
+        'roomNumber': currentBooking.number
+    }
+    addBooking(bookingToAdd)
+    .then(response => {
+        console.log(response);
+        const newBooking = response.newBooking;
+        allData[2].bookings.push(newBooking);
+        return getAllData()
+})
+    .then(apiData => {
+        allData = apiData;
+    })    
+})
 //the event.target.id is accesses the index of the element clicked on in the array it cam from
 //how do I find it in the array?
 

From 1c5d4e26878690895e904b9c877c0d9b4ae1b359 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Sun, 21 Apr 2024 15:47:56 -0600
Subject: [PATCH 27/29] allow user to cancel a booking

---
 dist/index.html     |  2 ++
 src/api-calls.js    | 20 +++++++++++++-
 src/css/styles.scss |  8 ++++++
 src/dom-updates.js  | 67 ++++++++++++++++++++++++++++++++++-----------
 4 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 1b98c670d..62d3a99e6 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -46,6 +46,8 @@ <h1>Overlook Hotel</h1>
     <main class="main-section">
       <section class="bookings-display">
       <article class="content-display"></article>
+      <h3 class="hidden" id="booked-text">Your Room Has Been Booked</h3>
+      <h3 class="hidden" id="canceled-text">Your Room Has Been Canceled</h3>
       <button class="buttons hidden" id="book-room-button">Book Room</button>
       <button class="buttons hidden" id="cancel-room-button">Cancel Booking</button>
     </section>
diff --git a/src/api-calls.js b/src/api-calls.js
index aead01864..576d47486 100644
--- a/src/api-calls.js
+++ b/src/api-calls.js
@@ -32,7 +32,25 @@ function addBooking(bookingData) {
     .catch(error => console.log('this errror', error))
 }
 
+function cancelBooking(bookingId) {
+    return fetch(`http://localhost:3001/api/v1/bookings/${bookingId}`, {
+        method: 'DELETE',
+        headers: {
+            "Content-Type": "application/json"
+          }
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error(error)
+        } else {
+            return response.json()
+        }
+    })
+    .catch(error => console.log('this errror', error))
+}
+
 export {
     getAllData,
-    addBooking
+    addBooking,
+    cancelBooking
 }
\ No newline at end of file
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 05da24d45..dfda3df17 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -25,6 +25,13 @@ h1 {
   font-family: Monoton, sans-serif;
 }
 
+h2, h3 {
+  font-family: Roboto, sans-serif;
+  font-weight: 600;
+  color: red;
+  text-align: center;
+}
+
 .stripe1 {
   @include logoStripes(rgb(248, 241, 13));
 }
@@ -81,6 +88,7 @@ h1 {
   font-weight: 600;
   color: red;
   margin-top: 60px;
+  margin-bottom: 20Px;
   width: 175px;
   height: 50px;
   border-radius: 25px;
diff --git a/src/dom-updates.js b/src/dom-updates.js
index 9a437558a..b8fa20b6d 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -4,7 +4,7 @@ import {
 } from "./user.js";
 import { getAvailableRooms, filterAvailableRoomsByType } from "./booking.js";
 // import { allData } from './scripts.js';
-import { getAllData, addBooking } from "./api-calls.js";
+import { getAllData, addBooking, cancelBooking } from "./api-calls.js";
 
 //<><>query selectors<><>
 const myBookingsButton = document.getElementById("my-bookings-button");
@@ -13,6 +13,8 @@ const bookThisRoomButton = document.getElementById("book-room-button");
 const cancelBookingButton = document.getElementById("cancel-room-button");
 const dateInput = document.getElementById("date");
 const roomTypeInput = document.getElementById("room-type");
+const bookedText = document.getElementById('booked-text');
+const canceledText = document.getElementById('canceled-text');
 
 const bookingDisplay = document.querySelector(".content-display");
 const totalSpentDisplay = document.querySelector(".total-spent");
@@ -40,14 +42,13 @@ myBookingsButton.addEventListener("click", () => {
   bookingDisplay.innerHTML = "";
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
-  //   let userBookings = getAllCustomerRoomBookings(customer, bookings, rooms);
   customer.bookings = getAllCustomerRoomBookings(customer, bookings, rooms);
   console.log("userbooks", customer.bookings);
   //   populateContentDisplay(userBookings, createUserBookedRoomsCard);
   let bookingCards = createUserBookedRoomsCard(customer.bookings);
   populateContentDisplay(bookingCards);
   showElements([totalSpentDisplay]);
-  hideElements([dateForm, filterByRoomTypeDisplay, bookThisRoomButton, cancelBookingButton]);
+  hideElements([dateForm, filterByRoomTypeDisplay, bookThisRoomButton, cancelBookingButton, bookedText, canceledText]);
   let totalSpentByCustomer = getTotalCostForAllBookings(customer.bookings);
   totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${customer.bookings.length} rooms`;
   console.log("cust", customer);
@@ -55,8 +56,7 @@ myBookingsButton.addEventListener("click", () => {
 
 bookARoomButton.addEventListener("click", () => {
   showElements([dateForm]);
-  hideElements([totalSpentDisplay]);
-//   console.log("cur", currentBooking);
+  hideElements([totalSpentDisplay, bookedText]);
 });
 
 submitButton.addEventListener("click", function (event) {
@@ -70,6 +70,7 @@ submitButton.addEventListener("click", function (event) {
   bookingsByDate = getAvailableRooms(bookings, rooms, date);
   console.log("filter2", typeof bookingsByDate);
   let bookingCards = createAvailableBookingsCard(bookingsByDate);
+//   let bookingCards = "We apologize, but unfortunately there are no rooms for your selected date";
   console.log("avail", bookingsByDate);
   populateContentDisplay(bookingCards);
   dateForm.reset();
@@ -84,8 +85,9 @@ filterSearchButton.addEventListener("click", (event) => {
   filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
   console.log("filter", filteredBookings);
   let bookingCards = createAvailableBookingsCard(filteredBookings);
+//   let bookingCards = 'We apologize, but unfortunately there are no rooms by that type available';
   populateContentDisplay(bookingCards);
-  filterByRoomTypeDisplay.selectedIndex = -1;
+filterByRoomTypeDisplay.reset();
 });
 
 dateInput.addEventListener("input", () => {
@@ -99,15 +101,17 @@ roomTypeInput.addEventListener("input", () => {
 bookingDisplay.addEventListener("click", (event) => {
   if (event.target.classList.contains("user-booked-card")) {
     currentBooking = findBooking(event.target.id, customer.bookings);
-    console.log('cur', currentBooking)
+    console.log('cur', currentBooking.id)
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
+    bookThisRoomButton.innerText = 'Book Room';
     showElements([cancelBookingButton]);
     hideElements([bookThisRoomButton]);
   } else if (event.target.classList.contains("available-booking-card")) {
     currentBooking = findBooking(event.target.id, bookingsByDate);
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
+    bookThisRoomButton.innerText = 'Book Room';
     showElements([bookThisRoomButton]);
     hideElements([cancelBookingButton]);
     console.log("cur", currentBooking);
@@ -120,20 +124,40 @@ bookThisRoomButton.addEventListener('click', () => {
         'userID': customer.id,
         'date': date,
         'roomNumber': currentBooking.number
-    }
+    };
     addBooking(bookingToAdd)
+        .then(response => {
+            console.log(response);
+            const newBooking = response.newBooking;
+                allData[2].bookings.push(newBooking);
+                // bookThisRoomButton.innerText = 'Room Booked';
+        showElements([bookedText, cancelBookingButton]);
+        hideElements([bookThisRoomButton])
+            return getAllData();
+        })
+        .then(apiData => {
+            allData = apiData;
+            console.log('allagain', allData)
+        });
+});
+
+cancelBookingButton.addEventListener('click', () => {
+    console.log('id', currentBooking.id)
+    cancelBooking(currentBooking.id)
     .then(response => {
-        console.log(response);
-        const newBooking = response.newBooking;
-        allData[2].bookings.push(newBooking);
-        return getAllData()
-})
+        console.log('resp', response);
+        let bookings = allData[2].bookings;
+        let bookingToRemove = removeBooking(bookings, currentBooking);
+        bookings.splice(bookingToRemove, 1);
+        showElements([canceledText, bookThisRoomButton]);
+        hideElements([cancelBookingButton]);
+        return getAllData();
+    })
     .then(apiData => {
         allData = apiData;
-    })    
+        console.log('allagain', allData)
+    });
 })
-//the event.target.id is accesses the index of the element clicked on in the array it cam from
-//how do I find it in the array?
 
 //<><>event handlers<><>
 export const load = () => {
@@ -141,7 +165,11 @@ export const load = () => {
     getAllData().then((apiData) => {
       allData = apiData;
       customer = getRandomUser(allData[0].customers);
+      let bookings = allData[2].bookings;
+  let rooms = allData[1].rooms;
+  customer.bookings = getAllCustomerRoomBookings(customer, bookings, rooms);
       console.log("all", allData);
+      console.log("allcust", customer.bookings);
     });
   });
 };
@@ -239,3 +267,10 @@ function generateRandomImage(images) {
   let randomImage = images[randomIndex];
   return randomImage;
 }
+
+function removeBooking(bookings, currentBooking) {
+    const bookingToRemove = bookings.findIndex((booking) => {
+        return booking.id === currentBooking.id
+    })
+    return bookingToRemove
+}

From c5d5b3d495cc8f3fa5bd8cec977769621605a981 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Sun, 21 Apr 2024 15:58:04 -0600
Subject: [PATCH 28/29] clean up domUpdates.js to remove console.logs

---
 dist/index.html     | 132 ++++++++++++++++++++-----------------
 src/css/styles.scss |  16 +++--
 src/dom-updates.js  | 156 +++++++++++++++++++++-----------------------
 3 files changed, 157 insertions(+), 147 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 62d3a99e6..3b294f9a7 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,63 +1,77 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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=Monoton&display=swap" rel="stylesheet">
-<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=Monoton&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-  <title>Overlook Hotel</title>
-</head>
-<body>
-  <header class="title-heading">
-    <h1>Overlook Hotel</h1>
-    <div aria-label="Overlook logo, 3 colored stripes">
-      <div class="stripe1"></div>
-      <div class="stripe2"></div>
-      <div class="stripe3"></div>
-    </div>  
-  </header>
-  <section class="content">
-    <nav class="nav-bar">
-      <button class="buttons" id="my-bookings-button">My Bookings</button>
-      <button class="buttons" id="book-a-room-button">Book a Room</button>
-      <article class="total-spent hidden"></article>
-      <form class="date-form hidden">
-        <label for="date">Select a Date:</label>
-        <input class="input-forms" type="date" id="date" name="date">
-        <input class="submit-button" type="submit" value="Submit" disabled>
-      </form>
-      <form class="type-search-form hidden">
-        <label for="room-type">Search by Room Type</label>
-        <select class="input-forms" id="room-type" name="room-type">
-          <option value="" disabled selected hidden>Select a Type</option>
-          <option value="residential suite">Residential Suite</option>
-          <option value="junior suite">Junior Suite</option>
-          <option value="suite">Suite</option>
-          <option value="single room">Single Room</option>
-        </select>
-        <input class="filter-submit-button" type="submit" value="Search" disabled>
-      </form>
-    </nav>
-    <main class="main-section">
-      <section class="bookings-display">
-      <article class="content-display"></article>
-      <h3 class="hidden" id="booked-text">Your Room Has Been Booked</h3>
-      <h3 class="hidden" id="canceled-text">Your Room Has Been Canceled</h3>
-      <button class="buttons hidden" id="book-room-button">Book Room</button>
-      <button class="buttons hidden" id="cancel-room-button">Cancel Booking</button>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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=Monoton&display=swap"
+      rel="stylesheet"
+    />
+    <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=Monoton&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <title>Overlook Hotel</title>
+  </head>
+  <body>
+    <header class="title-heading">
+      <h1>Overlook Hotel</h1>
+      <div aria-label="Overlook logo, 3 colored stripes">
+        <div class="stripe1"></div>
+        <div class="stripe2"></div>
+        <div class="stripe3"></div>
+      </div>
+    </header>
+    <section class="content">
+      <nav class="nav-bar">
+        <button class="buttons" id="my-bookings-button">My Bookings</button>
+        <button class="buttons" id="book-a-room-button">Book a Room</button>
+        <article class="total-spent hidden"></article>
+        <form class="date-form hidden">
+          <label for="date">Select a Date:</label>
+          <input class="input-forms" type="date" id="date" name="date" />
+          <input class="submit-button" type="submit" value="Submit" disabled />
+        </form>
+        <form class="type-search-form hidden">
+          <label for="room-type">Search by Room Type</label>
+          <select class="input-forms" id="room-type" name="room-type">
+            <option value="" disabled selected hidden>Select a Type</option>
+            <option value="residential suite">Residential Suite</option>
+            <option value="junior suite">Junior Suite</option>
+            <option value="suite">Suite</option>
+            <option value="single room">Single Room</option>
+          </select>
+          <input
+            class="filter-submit-button"
+            type="submit"
+            value="Search"
+            disabled
+          />
+        </form>
+      </nav>
+      <main class="main-section">
+        <section class="bookings-display">
+          <article class="content-display"></article>
+          <h3 class="hidden" id="booked-text">Your Room Has Been Booked</h3>
+          <h3 class="hidden" id="canceled-text">Your Room Has Been Canceled</h3>
+          <button class="buttons hidden" id="book-room-button">
+            Book Room
+          </button>
+          <button class="buttons hidden" id="cancel-room-button">
+            Cancel Booking
+          </button>
+        </section>
+      </main>
     </section>
-    </main>
-  </section>
-  <footer class="footer">
-    <p>©brandon j. doza designs</p>
-  </footer>
-  <!-- Do not include the scripts.js or class files here - it is done by the webpack server -->
-  <script src="bundle.js"></script>
-
-</body>
+    <footer class="footer">
+      <p>©brandon j. doza designs</p>
+    </footer>
+    <!-- Do not include the scripts.js or class files here - it is done by the webpack server -->
+    <script src="bundle.js"></script>
+  </body>
 </html>
diff --git a/src/css/styles.scss b/src/css/styles.scss
index dfda3df17..3467be268 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -25,7 +25,8 @@ h1 {
   font-family: Monoton, sans-serif;
 }
 
-h2, h3 {
+h2,
+h3 {
   font-family: Roboto, sans-serif;
   font-weight: 600;
   color: red;
@@ -88,16 +89,17 @@ h2, h3 {
   font-weight: 600;
   color: red;
   margin-top: 60px;
-  margin-bottom: 20Px;
+  margin-bottom: 20px;
   width: 175px;
   height: 50px;
   border-radius: 25px;
   cursor: pointer;
 }
 
-.submit-button, .filter-submit-button {
+.submit-button,
+.filter-submit-button {
   background-color: rgb(244, 124, 19);
-  color:rgb(123, 243, 243);
+  color: rgb(123, 243, 243);
   border-radius: 10px;
   width: 150px;
   cursor: pointer;
@@ -115,7 +117,8 @@ p {
   margin-left: 250px;
 }
 
-.user-booked-card, .available-booking-card {
+.user-booked-card,
+.available-booking-card {
   font-family: Roboto, sans-serif;
   background-color: rgb(240, 226, 148);
   border: 2px solid orange;
@@ -161,7 +164,8 @@ p {
   padding-top: 15px;
 }
 
-.date-form, .type-search-form {
+.date-form,
+.type-search-form {
   font-family: Roboto, sans-serif;
   font-weight: 600;
   margin-top: 60px;
diff --git a/src/dom-updates.js b/src/dom-updates.js
index b8fa20b6d..eb61795d2 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -3,7 +3,6 @@ import {
   getTotalCostForAllBookings,
 } from "./user.js";
 import { getAvailableRooms, filterAvailableRoomsByType } from "./booking.js";
-// import { allData } from './scripts.js';
 import { getAllData, addBooking, cancelBooking } from "./api-calls.js";
 
 //<><>query selectors<><>
@@ -13,9 +12,8 @@ const bookThisRoomButton = document.getElementById("book-room-button");
 const cancelBookingButton = document.getElementById("cancel-room-button");
 const dateInput = document.getElementById("date");
 const roomTypeInput = document.getElementById("room-type");
-const bookedText = document.getElementById('booked-text');
-const canceledText = document.getElementById('canceled-text');
-
+const bookedText = document.getElementById("booked-text");
+const canceledText = document.getElementById("canceled-text");
 const bookingDisplay = document.querySelector(".content-display");
 const totalSpentDisplay = document.querySelector(".total-spent");
 const submitButton = document.querySelector(".submit-button");
@@ -43,12 +41,17 @@ myBookingsButton.addEventListener("click", () => {
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
   customer.bookings = getAllCustomerRoomBookings(customer, bookings, rooms);
-  console.log("userbooks", customer.bookings);
-  //   populateContentDisplay(userBookings, createUserBookedRoomsCard);
   let bookingCards = createUserBookedRoomsCard(customer.bookings);
   populateContentDisplay(bookingCards);
   showElements([totalSpentDisplay]);
-  hideElements([dateForm, filterByRoomTypeDisplay, bookThisRoomButton, cancelBookingButton, bookedText, canceledText]);
+  hideElements([
+    dateForm,
+    filterByRoomTypeDisplay,
+    bookThisRoomButton,
+    cancelBookingButton,
+    bookedText,
+    canceledText,
+  ]);
   let totalSpentByCustomer = getTotalCostForAllBookings(customer.bookings);
   totalSpentDisplay.innerText = `You have spent a total of $${totalSpentByCustomer} on ${customer.bookings.length} rooms`;
   console.log("cust", customer);
@@ -68,13 +71,10 @@ submitButton.addEventListener("click", function (event) {
   let bookings = allData[2].bookings;
   let rooms = allData[1].rooms;
   bookingsByDate = getAvailableRooms(bookings, rooms, date);
-  console.log("filter2", typeof bookingsByDate);
   let bookingCards = createAvailableBookingsCard(bookingsByDate);
-//   let bookingCards = "We apologize, but unfortunately there are no rooms for your selected date";
-  console.log("avail", bookingsByDate);
+  //   let bookingCards = "We apologize, but unfortunately there are no rooms for your selected date";
   populateContentDisplay(bookingCards);
   dateForm.reset();
-  console.log('date', date)
 });
 
 filterSearchButton.addEventListener("click", (event) => {
@@ -83,11 +83,10 @@ filterSearchButton.addEventListener("click", (event) => {
   const filteredType = document.getElementById("room-type");
   const roomType = filteredType.value;
   filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
-  console.log("filter", filteredBookings);
   let bookingCards = createAvailableBookingsCard(filteredBookings);
-//   let bookingCards = 'We apologize, but unfortunately there are no rooms by that type available';
+  //   let bookingCards = 'We apologize, but unfortunately there are no rooms by that type available';
   populateContentDisplay(bookingCards);
-filterByRoomTypeDisplay.reset();
+  filterByRoomTypeDisplay.reset();
 });
 
 dateInput.addEventListener("input", () => {
@@ -101,63 +100,57 @@ roomTypeInput.addEventListener("input", () => {
 bookingDisplay.addEventListener("click", (event) => {
   if (event.target.classList.contains("user-booked-card")) {
     currentBooking = findBooking(event.target.id, customer.bookings);
-    console.log('cur', currentBooking.id)
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
-    bookThisRoomButton.innerText = 'Book Room';
+    bookThisRoomButton.innerText = "Book Room";
     showElements([cancelBookingButton]);
     hideElements([bookThisRoomButton]);
   } else if (event.target.classList.contains("available-booking-card")) {
     currentBooking = findBooking(event.target.id, bookingsByDate);
     const bookingToDisplay = renderSingleBooking(currentBooking);
     bookingDisplay.innerHTML = bookingToDisplay;
-    bookThisRoomButton.innerText = 'Book Room';
+    bookThisRoomButton.innerText = "Book Room";
     showElements([bookThisRoomButton]);
     hideElements([cancelBookingButton]);
-    console.log("cur", currentBooking);
   }
 });
 
-bookThisRoomButton.addEventListener('click', () => {
-    date = date.split('-').join('/');
-    let bookingToAdd = {
-        'userID': customer.id,
-        'date': date,
-        'roomNumber': currentBooking.number
-    };
-    addBooking(bookingToAdd)
-        .then(response => {
-            console.log(response);
-            const newBooking = response.newBooking;
-                allData[2].bookings.push(newBooking);
-                // bookThisRoomButton.innerText = 'Room Booked';
-        showElements([bookedText, cancelBookingButton]);
-        hideElements([bookThisRoomButton])
-            return getAllData();
-        })
-        .then(apiData => {
-            allData = apiData;
-            console.log('allagain', allData)
-        });
+bookThisRoomButton.addEventListener("click", () => {
+  date = date.split("-").join("/");
+  let bookingToAdd = {
+    userID: customer.id,
+    date: date,
+    roomNumber: currentBooking.number,
+  };
+  addBooking(bookingToAdd)
+    .then((response) => {
+      console.log(response);
+      const newBooking = response.newBooking;
+      allData[2].bookings.push(newBooking);
+      showElements([bookedText, cancelBookingButton]);
+      hideElements([bookThisRoomButton]);
+      return getAllData();
+    })
+    .then((apiData) => {
+      allData = apiData;
+      console.log("allagain", allData);
+    });
 });
 
-cancelBookingButton.addEventListener('click', () => {
-    console.log('id', currentBooking.id)
-    cancelBooking(currentBooking.id)
-    .then(response => {
-        console.log('resp', response);
-        let bookings = allData[2].bookings;
-        let bookingToRemove = removeBooking(bookings, currentBooking);
-        bookings.splice(bookingToRemove, 1);
-        showElements([canceledText, bookThisRoomButton]);
-        hideElements([cancelBookingButton]);
-        return getAllData();
+cancelBookingButton.addEventListener("click", () => {
+  cancelBooking(currentBooking.id)
+    .then((response) => {
+      let bookings = allData[2].bookings;
+      let bookingToRemove = removeBooking(bookings, currentBooking);
+      bookings.splice(bookingToRemove, 1);
+      showElements([canceledText]);
+      hideElements([cancelBookingButton]);
+      return getAllData();
     })
-    .then(apiData => {
-        allData = apiData;
-        console.log('allagain', allData)
+    .then((apiData) => {
+      allData = apiData;
     });
-})
+});
 
 //<><>event handlers<><>
 export const load = () => {
@@ -166,10 +159,9 @@ export const load = () => {
       allData = apiData;
       customer = getRandomUser(allData[0].customers);
       let bookings = allData[2].bookings;
-  let rooms = allData[1].rooms;
-  customer.bookings = getAllCustomerRoomBookings(customer, bookings, rooms);
-      console.log("all", allData);
-      console.log("allcust", customer.bookings);
+      let rooms = allData[1].rooms;
+      customer.bookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+      console.log('all data', allData)
     });
   });
 };
@@ -203,6 +195,26 @@ function hideElements(elements) {
   return hiddenElement;
 }
 
+function renderSingleBooking(booking) {
+    console.log("thisbooking", booking);
+    const singleBooking = `<div class="single-booking-display">
+      <h2>${booking.roomType.toUpperCase()}</h2>
+      <article>Number of Beds: ${booking.numBeds}</article>
+              <article>Bed Size: ${booking.bedSize}</article>
+              <article>Cost Per Night: ${booking.costPerNight}</article>
+              <img src="${generateRandomImage(images)}" alt="hotel room with bed">
+      </div>`;
+    return singleBooking;
+  }
+
+  function disableButton(field, button) {
+    if (field.value !== "") {
+      button.disabled = false;
+    } else {
+      button.disabled = true;
+    }
+  }
+
 //<><>functions<><>
 function getRandomUser(users) {
   let randomIndex = Math.floor(Math.random() * users.length);
@@ -237,26 +249,6 @@ function createAvailableBookingsCard(bookings) {
   return availableBookingCards;
 }
 
-function renderSingleBooking(booking) {
-  console.log("thisbooking", booking);
-  const singleBooking = `<div class="single-booking-display">
-    <h2>${booking.roomType.toUpperCase()}</h2>
-    <article>Number of Beds: ${booking.numBeds}</article>
-            <article>Bed Size: ${booking.bedSize}</article>
-            <article>Cost Per Night: ${booking.costPerNight}</article>
-            <img src="${generateRandomImage(images)}" alt="hotel room with bed">
-    </div>`;
-  return singleBooking;
-}
-
-function disableButton(field, button) {
-  if (field.value !== "") {
-    button.disabled = false;
-  } else {
-    button.disabled = true;
-  }
-}
-
 function findBooking(target, bookings) {
   let booking = bookings[target];
   return booking;
@@ -269,8 +261,8 @@ function generateRandomImage(images) {
 }
 
 function removeBooking(bookings, currentBooking) {
-    const bookingToRemove = bookings.findIndex((booking) => {
-        return booking.id === currentBooking.id
-    })
-    return bookingToRemove
+  const bookingToRemove = bookings.findIndex((booking) => {
+    return booking.id === currentBooking.id;
+  });
+  return bookingToRemove;
 }

From 9c0086c046673a8a22e890a63d9d56cec46130e3 Mon Sep 17 00:00:00 2001
From: Brandon Doza <brandondoza@brandos-m2-mbp.lan>
Date: Sun, 21 Apr 2024 16:10:53 -0600
Subject: [PATCH 29/29] re-push

---
 src/dom-updates.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dom-updates.js b/src/dom-updates.js
index eb61795d2..8321e9110 100644
--- a/src/dom-updates.js
+++ b/src/dom-updates.js
@@ -264,5 +264,5 @@ function removeBooking(bookings, currentBooking) {
   const bookingToRemove = bookings.findIndex((booking) => {
     return booking.id === currentBooking.id;
   });
-  return bookingToRemove;
+  return bookingToRemove
 }