jpierce28 / overlook

Overlook

Abstract

For this project I was tasked with creating a webapp that will allow a user to book a night at a hotel. I used test driven development to implement and test various classes. I then had to fetch API data and allow a user to add a future booking which posted that data to the API and fetched the data again to remove that booking from available bookings. In the event there are any errors a message is displayed informing the user of an issue.

Project Goals and Objectives

• Use OOP to drive the design of the application and the code
• Work with an API to send and receive data
• Solidify the code review process
• Create a robust test suite that thoroughly tests all functionality of a client-side application
• Full project and rubric can be found here

Project Install

1. Clone this API Data repo to your machine
2. Once cloned run npm install
3. Then run npm start
4. You can then go to this link

Preview

Collaborators

• Josh Pierce

Technologies Used

• JavaScript
• HTML
• CSS
• TDD Testing: Mocha / Chai
• APIs

Reflections

Wins

• In this project I used fetch "DELETE" for the first time. Since I had never used it, I looked up ways to implement it and was able to delete a customers future booking and return that information to the available bookings.
• Going into this project I was very nervous and intimidated however, as I began coding I was able to navigate through this project and create a successful UI and data model.

Challenges

• A big challenge of this project was deciding how to set up my classes and test them. Going into this project without a formal comp to compare and plan off of left a lot of room for intrepretation.
• This project was my first project implementing test driven development on my own. I had to navigate through the test and verify my testing was complete with happy and sad paths.

overlook's Issues

IT 2: Dom Manipulation

Should be able to see all available bookings for any given day. Should be able to filter the days with a calendar. Should only be able to book future dates, should be able to filter by room Type

Error Handling

Write code for error handling to account for any unexpected errors

Iteration 2 - booking

Add Booking class

• show available dates
• select room for booking
• store rooms that are booked

Iteration 2 - Rooms

Create Class to store all rooms and tests

• should filter by room by roomType
• select room for booking

Iteration 4

Create a login page. Username: Customer50 password: overlook2021 or manage username

Customer Class

Iteration 1. Need to create and test a customer class.

• Needs to store bookings both past and future
• total amount spent on rooms

Iteration 3 Accessibility

Add accessibility. Make sure lighthouse is 100% or close to. Account for colorblind coloring, and verify the page is tabable.

Manager Dashboard

Should display room availability today, revenue today, percent occupied.
Search a user by username and see: all bookings and total money spent, add a room booking for that user, delete booking from future.

HTML Wireframe

IT 1: Dom Manipulation

I should be able to see my bookings past and future