turingschool-examples · BrandonDoza · Apr 17, 2024 · Apr 17, 2024 · Apr 17, 2024 · Apr 17, 2024
diff --git a/dist/index.html b/dist/index.html
@@ -1,16 +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">
-  <title>Webpack Starter Kit</title>
-</head>
-<body>
-  <img src="./images/turing-logo.png" 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>
-
-</body>
+  <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>
+    <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/api-calls.js b/src/api-calls.js
@@ -0,0 +1,56 @@
+//<><>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];
+
+//<><>functions<><>
+function getAllData() {
+    return Promise.all(promises)
+    .then(data => {
+        return data})
+    .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))
+}
+
+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,
+    cancelBooking
+}
diff --git a/src/booking.js b/src/booking.js
@@ -0,0 +1,36 @@
+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
+        })
+        return foundRoom
+    })
+    if (getRooms.length === 0) {
+        return 'We apologize, but unfortunately there are no rooms for your selected date'
+    } else {
+    return getRooms
+    }
+}
+
+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, filterAvailableRoomsByType}
diff --git a/src/css/styles.scss b/src/css/styles.scss
@@ -1,4 +1,205 @@
+@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;
+}
+
+.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;
+}
+
+h2,
+h3 {
+  font-family: Roboto, sans-serif;
+  font-weight: 600;
+  color: red;
+  text-align: center;
+}
+
+.stripe1 {
+  @include logoStripes(rgb(248, 241, 13));
+}
+
+.stripe2 {
+  @include logoStripes(orange);
+}
+
+.stripe3 {
+  @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;
+}
+
+.bookings-display {
+  background-color: rgba(123, 243, 243, 0.7);
+  border-radius: 25px;
+  width: 60%;
+  height: auto;
+  overflow: auto;
+  margin-top: 75px;
+  margin-bottom: 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.buttons {
+  background-color: rgb(123, 243, 243);
+  font-family: Roboto, sans-serif;
+  font-weight: 600;
+  color: red;
+  margin-top: 60px;
+  margin-bottom: 20px;
+  width: 175px;
+  height: 50px;
+  border-radius: 25px;
+  cursor: pointer;
+}
+
+.submit-button,
+.filter-submit-button {
+  background-color: rgb(244, 124, 19);
+  color: rgb(123, 243, 243);
+  border-radius: 10px;
+  width: 150px;
+  cursor: pointer;
+}
+
+.footer {
+  background-color: orange;
+  color: rgb(244, 124, 19);
+  text-align: center;
+  font-family: Monoton, sans-serif;
+}
+
+p {
+  margin-top: 0;
+  margin-left: 250px;
+}
+
+.user-booked-card,
+.available-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;
+  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);
+  color: red;
+  width: 175px;
+  height: 100px;
+  margin-top: 50px;
+  border: 2px solid black;
+  border-radius: 25px;
+  text-align: center;
+  padding-top: 15px;
+}
+
+.date-form,
+.type-search-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;
+}
+
+.input-forms {
+  background-color: rgb(240, 226, 148);
+  color: red;
+  border-radius: 25px;
+  cursor: pointer;
+}
+
+img {
+  height: 250px;
+  width: 250px;
+  margin-top: 35px;
+  border: 2px solid orange;
+  border-radius: 25px;
+}
+
+.hidden {
+  display: none;
+}
+
+.disabled-button {
+  cursor: not-allowed;
 }