pcmueller / travel-tracker Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 15.6 MB

A web application to cost, track, and book trips for individual travelers.

SCSS 17.76% HTML 4.26% JavaScript 77.99%

scss-files javascript-files webpack html

travel-tracker's Introduction

Travel Tracker

A hosted web application to cost, track, and book trips for individual travelers.

Functionality
Installation
Technologies
Contributors
Links

Functionality

To login to the page, type in the word "traveler" + any two-digit number, 01 - 50 (e.g. 'traveler06').
Type in the password - travel2020 - and click the login button.
You'll then be taken to the home page and greeted by the name of the user you've selected, with that user's travel data displayed.

Within the page header, the user's "Annual Travel Costs" are instantly calculated and displayed in the upper right corner.
Below that is a "Logout" button, which can be clicked at any time to clear the "traveler" data and return the user back to the login page.
In the center is a nav bar with four buttons: Current Trips, Upcoming Trips, Previous Trips, and Pending Trips, each toggling the display of the a different collection of "trip cards" in the main section below.
On the left end of the header is a Travel Tracker company logo, which has been activated as a "Home" button and can be clicked to take the user back to same "My Trips" view displayed on initial page load.
Below the header is an interactive "Plan Your Next Adventure" section, through which a user can book a new trip.

This section is completely navigable via keyboard, and contains four required input fields:
- Select Destination: drop-down menu containing a list of all possible travel destinations, a dynamic list that auto-populates on page load.
- Departure Date: drop-down calendar menu allowing a user to select the first date of their trip. Since our "trips" dataset is comprised entirely of past dates, the calendar starts in 2019, and the user can book as far out as 2035.
- Duration of trip: input box (with clickable arrow to increment/decrement value) to type or select the trip length, represented in number of days.
- Number of travelers: input box (with clickable arrow to increment/decrement value) to type or select the trip length in number of days.
Once all four fields have been filled out, the user can click two different buttons to process this information:
- Estimate Trip Cost: will display a modal window with the estimated cost of this trip, including airfare, lodging and the 10% agent fee.
- Book Trip: submit the trip request by posting data to the API with a trip status of "pending", requiring the agent's approval.
The trip is then automatically loaded into the "My Trips" view, and a modal window pops-up to notify the user of their successful booking, with the message including both the destination name and the estimated trip cost.
Error Handling: several error messages have been built into the data functionality, utilizing accessiblity-friendly modal windows to display: unsuccessful GET and POST requests to the API, incomplete form selections (when clicking either booking button), and invalid username or password submission on the login page.

Installation

Clone down remote repository by entering git clone [email protected]:pcmueller/travel-tracker.git in console
Use command cd to navigate into new travel-tracker directory
Install repository dependencies using npm i
Initialize webpack server using command npm start
Clone down travel-tracker-api by following these instructions
Navigate into cloned API directory
Initialize local server using command npm start
Once both servers are initialized, you can access the application in your browser here

Technologies

HTML
CSS/Sass
JavaScript
Express
Webpack
Mocha & Chai
GitHub

Contributors

Developer: 🦥 Peter Muellerleile
Project Manager: 🎓 Travis Rollins

travel-tracker's People

Stargazers

Watchers

travel-tracker's Issues

Pseudocode Iterations 1 and 2 functionality

Dashboard
As a traveler:

I should see a dashboard page that shows me:
All of my trips (past, present, upcoming and pending)
Total amount I have spent on trips this year. This should be calculated from the trips data and include a travel agent’s 10% fee

Traveler Interaction
As a traveler:

I should be able to make a trip request:
I will select a date, duration, number of travelers and choose from a list of destinations
After making these selections, I should see an estimated cost (with a 10% travel agent fee) for the trip.
Once I submit the trip request, it will show on my dashboard as “pending” so that the travel agency can approve or deny it.

Pseudocode Iteration 3 functionality (Login)

As a traveler:

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: traveler50 (where 50 is the ID of the user)
- password: travel2020
Upon successfully loggin in, I should see my dashboard.

functionality will require API data using POST requests

Refactor testing

TEST FILES:

Traveler

properties
methods
sad paths

Trip

properties
methods
sad paths

TESTING DATA:

Cut datasets down to minimum num elements needed*

Declare global variables and query selectors
Assign event listeners
Create basic page-load functionality to call API functions and pass data into variables

Requires use of DELETE network requests

Build out basic HTML structure

Pseudocode Iteration 4 functionality (Agent)

Agent Interaction
Your app should now support two different types of users. In addition to having a traveler, you will now add a travel agency.

As a travel agent:

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: agency
- password: travel2020

As a travel agent, upon logging in:

I should see a dashboard page that shows me:

New trip requests (a user’s “pending” trips)
Total income generated this year (should be 10% of user trip cost)
Travelers on trips for today’s date (number, names, however you want to display this!)

As a travel agent:

I should be able to see and approve / deny trip requests
I should be able to search for any user by name and:
View their name, a list of all of their trips, and the total amount they’ve spent (including 10% agent cut)
Approve a trip request for that user
Delete an upcoming trip for that user

Complete Iteration 3 functionality

Add LOGOUT button functionality to complete (4.26)

Class structure planning and set-up

Sketch out basic Class hierarchy, structure and functionality
Create Class files w/ constructors and exports, import to JS entrypoint
Create testing and test-data files using API dataset elements

Refactor HTML/CSS for accessibility and pass Lighthouse audit

space/enter to close modal
tabbing
aria tags
color contrast
semantic html