diff --git a/dist/index.html b/dist/index.html
index 35332a6f9..3b294f9a7 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,16 +1,77 @@
-
-
-
-
- Webpack Starter Kit
-
-
- 
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ Overlook Hotel
+
+
+
+
+
+
+
+
+ Your Room Has Been Booked
+ Your Room Has Been Canceled
+
+
+
+
+
+
+
+
+
diff --git a/src/api-calls.js b/src/api-calls.js
new file mode 100644
index 000000000..576d47486
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/src/booking.js b/src/booking.js
new file mode 100644
index 000000000..3ca702310
--- /dev/null
+++ 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}
\ No newline at end of file
diff --git a/src/css/styles.scss b/src/css/styles.scss
index d0637ec3a..3467be268 100644
--- 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;
}
diff --git a/src/dom-updates.js b/src/dom-updates.js
new file mode 100644
index 000000000..8321e9110
--- /dev/null
+++ b/src/dom-updates.js
@@ -0,0 +1,268 @@
+import {
+ getAllCustomerRoomBookings,
+ getTotalCostForAllBookings,
+} from "./user.js";
+import { getAvailableRooms, filterAvailableRoomsByType } from "./booking.js";
+import { getAllData, addBooking, cancelBooking } from "./api-calls.js";
+
+//<><>query selectors<><>
+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");
+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");
+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 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",
+ "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 = "";
+ let bookings = allData[2].bookings;
+ let rooms = allData[1].rooms;
+ customer.bookings = getAllCustomerRoomBookings(customer, bookings, rooms);
+ let bookingCards = createUserBookedRoomsCard(customer.bookings);
+ populateContentDisplay(bookingCards);
+ showElements([totalSpentDisplay]);
+ 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);
+});
+
+bookARoomButton.addEventListener("click", () => {
+ showElements([dateForm]);
+ hideElements([totalSpentDisplay, bookedText]);
+});
+
+submitButton.addEventListener("click", function (event) {
+ event.preventDefault();
+ bookingDisplay.innerHTML = "";
+ showElements([filterByRoomTypeDisplay]);
+ const dateInput = document.getElementById("date");
+ date = dateInput.value.toString();
+ let bookings = allData[2].bookings;
+ let rooms = allData[1].rooms;
+ bookingsByDate = getAvailableRooms(bookings, rooms, date);
+ let bookingCards = createAvailableBookingsCard(bookingsByDate);
+ // let bookingCards = "We apologize, but unfortunately there are no rooms for your selected date";
+ populateContentDisplay(bookingCards);
+ dateForm.reset();
+});
+
+filterSearchButton.addEventListener("click", (event) => {
+ event.preventDefault();
+ bookingDisplay.innerHTML = "";
+ const filteredType = document.getElementById("room-type");
+ const roomType = filteredType.value;
+ filteredBookings = filterAvailableRoomsByType(bookingsByDate, roomType);
+ let bookingCards = createAvailableBookingsCard(filteredBookings);
+ // let bookingCards = 'We apologize, but unfortunately there are no rooms by that type available';
+ populateContentDisplay(bookingCards);
+ filterByRoomTypeDisplay.reset();
+});
+
+dateInput.addEventListener("input", () => {
+ disableButton(dateInput, submitButton);
+});
+
+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);
+ 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]);
+ }
+});
+
+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", () => {
+ 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;
+ });
+});
+
+//<><>event handlers<><>
+export const load = () => {
+ document.addEventListener("DOMContentLoaded", function () {
+ 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 data', allData)
+ });
+ });
+};
+
+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"
+ ) {
+ bookingDisplay.innerHTML = `${bookings}
`;
+ } 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 renderSingleBooking(booking) {
+ console.log("thisbooking", booking);
+ const singleBooking = `
+
${booking.roomType.toUpperCase()}
+
Number of Beds: ${booking.numBeds}
+
Bed Size: ${booking.bedSize}
+
Cost Per Night: ${booking.costPerNight}
+
})
+
+
${booking.roomType.toUpperCase()} - ${booking.bedSize.toUpperCase()} BED
+
Number of Beds: ${booking.numBeds}
+
You have booked this on ${booking.dateBooked} at a cost of $${
+ booking.costPerNight
+ } per night
+
+
${booking.roomType.toUpperCase()}
+
Number of Beds: ${booking.numBeds}
+
Bed Size: ${booking.bedSize}
+
Cost Per Night: ${booking.costPerNight}
+