Giter VIP home page Giter VIP logo

overlook's Introduction

Overlook Hotel

Introduction

  • For this project, I built a hotel management site using JavaScript, HTML and CSS. Mocha and Chai were utilized as well to test all classes. This project also works with data stored in a local api server.
  • This project was a great mix of solidifying my understanding of all technologies used, and my love for and past experience in interior design (I spent far too long researching luxury hotel rooms to use for all of my imagery).
  • Customers can login, view past and upcoming bookings, search for available hotel rooms per date, and book new rooms.

Setup

Copy, paste, and run this code-block in your terminal:

git clone [email protected]:turingschool-examples/overlook-api.git
cd overlook-api
npm install
npm start
git clone [email protected]:abbyluce/overlook.git
npm install
npm start
cd ..
open overlook/dist/index.html

Note: use the following credentials to login to the application: USERNAME: customer20 PASSWORD: overlook2021

Application in Action

2022-08-08 15 50 53

Technologies

  • Javascript
  • HTML
  • CSS
  • Atom
  • Mocha / Chai
  • Webpack

Goals, Challenges, and Wins

Goals

  • Incoporating Fetch calls and interaction with a backend API.
  • Determine what classes to set up and what methods to put in each, test all classes.
  • Access and manipulate data through array methods to display correct information on the webpage.

Challenges

  • Problem solving to break complex goals into manageable steps.
  • Create and set up classes to effectively manage data. After setting up my initial classes, I was having issues with my methods not pulling in the data correctly. I created a new Hotel class which allowed me to write methods to create new bookings, view available rooms, and determine total costs.

Wins

  • I sharpened my CSS skills and am proud of the way my webpage looks.
  • My JavaScript functions are organized in a way that intuitively follows a users journey throughout the page.
  • I was able to complete the majority of this project on my own but still collaborated with my classmates to see different problem solving strategies.

Possible Future Extensions

  • Ability to book multiple dates at a time.
  • Ability for a user to search through existing bookings and filter them.

Sources

Contributors

Project Specs

  • The project spec & rubric can be found here
  • The project repo can be found here

overlook's People

Contributors

robbiejaeger avatar abbyluce avatar hannahhch avatar niksseif avatar dependabot[bot] avatar hfaerber avatar khalidwilliams avatar stephanieguzm avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.