overlook-hotel's Introduction

Overlook Hotel

Click HERE to view the project spec
Click HERE to access the Overlook-API (you will need this to run the website locally)

Abstract
Tech Used
Installation and Set-Up
Features
See the Site in Action
Future Goals
Created By

Abstract

Overlook Hotel is a hotel appointment application that allows a customer to book an room for a future visit.

Tech Used

JavaScript
HTML
Sass
Mocha/Chai for testing
Fetch API to retrieve and add data (bookings, customers, rooms)

Installation and Set-Up

To install this project, please see below:

1. Clone down this Repository using `git clone`
2. Run `npm install` to install library dependancies
3. Next, run `npm start` and go to `http://localhost:8080/` to view the website
4. To access the data this site is built upon, clone down the Overlook-api using `git clone` into another terminal window (keep the localhost above running)
5. Run `npm install` and `npm start`

After following these steps, you should have access to the fully functioning website.

Features

Login page
- Separate login credentials for Customer vs. Manager (see instructions below)
Customer Portal:
- Customer can view all past, present, and future bookings on portal landing page
- Customer can see how much money they've spent on all rooms
- Customer can book rooms for today or upcoming dates, and can filter by room type while searching
- 100% Chrome Lighthouse Accessibility Audit Score(before login screen was created)

See the Site in Action

To log into the customer side, a user can log in using the following credentials:

username: customer50 (choose a number 01-50 to access different customers)

password: overlook2021

Upon Loggin in, the customer should see a dashboard/home page that shows:

Any room bookings they have made (past or present/upcoming) and the total amount they have spent on rooms.

They should be able to select a date for which they would like to book a room. Upon selecting a date:

the customer should be shown a list of room details for only rooms that are available on that date.
Then they can filter down those available rooms by room type.

Finally a customer should be able to select a room for booking.

In the event that no rooms are available for the date/roomType selected, display a message fiercely apologizing to the user and asking them to adjust their room search.

Future Goals

Create a manager login and views
Apply some more cscc styling especially some fun animations

Created By:

Christine Rowland

overlook-hotel's People

Contributors

Watchers

overlook-hotel's Issues

Setting up Mocha and Chai for testing Classes

Create Room Class

Class Properties -

Create logout button

Update JavaScript to ES6

Create a wireframe of the application I want to create

Organize the code with commented out labels

Decide on what calendar - date picker functionality

Decide on color scheme for page

crop hero image
pick colors that look good
create header bar
create bottom hero color bar??

Find the the bug that shows bookings 2 times on the page.

Accessibility

check the site is able to tab through
check that the site is available for those that are vision impaired
aria tags for audio readers
colors contrast enough for those who are color blind

All methods created within the classes are set up using TDD

Set up the fetch API

Check project spec for correct end points
proper response

Login Verification update

Change if statement to use a .startsWith functionality

Clear booking message after booking

Create sad path for login

Iteration 2 - Customer Interaction

As a customer:

I should be able to select a date for which - [ ] I’d like to book a room for myself
Upon selecting a date, I should be shown a list of room details for only rooms that are available on that date
I should be able to filter the list of available rooms by their roomType property
I should be able to select a room for booking
In the event that no rooms are available for the date/roomType selected, display a message fiercely apologizing to the user and asking them to adjust their room search

Refer to the “Add new booking” section from the endpoints table above!

Setup Dom Updates file

Create sad path for login

Create a skeleton HTML file to get a solid foundation

- [ ] Create a user class

user id
user name
booking array - capture all booking info
total amount spent

Stop Users from typing dates in the past to book a room

Iteration 3 - Login

When first arriving at the site, a user should be able to log in with a username and password.

As a customer:

I should be able to login
I will see a login page when I first visit the site
I can log in with the following credentials:
username: customer50 (where 50 is the ID of the user)
password: overlook2021
Upon successfully loggin in, I should see my dashboard.

Refer to the “Get single user” section from the endpoints table above!

Create Booking Class

Complete action steps from Grace

Mixin for height and width
Use const on my query selectors
to use a helper function for my conditional in my if statement for the login verification (research)