joanafbrito / travel-tracker

Travel Tracker - Mod2 Final Project

Abstract

The Travel Tracker website allows a user to login and see their own dashboard whith:

• Trips : upcoming and past
• The total amount spent with those trips during the current year.

The user can also add another trip by:

• choosing a date,
• the number of travelers and
• the destination (from a list)

And then see the estimated cost and the pending trip on their dashboard.

A Little bit about the Developer

Hi! My name is Joana and I am a current Front End Engineering student at Turing School of Software Design. I am a career changer! I've spent the last decade working to manage two small business, and grabbing the opportunity to move to another country. Now, I'm spending my days learning code. As a woman I can contribuit to build a more balanced society, where people can be seen as equals in the software marketing and where I can build apps more inclusive and make a difference using this huge platform of the internet!

Learning Goals

Project Spec: link

Work with GitHub projects as a project board Work with an API to GET and POST data Create a robust test suite that thoroughly tests all functionality of a client-side application Use OOP to drive the design of the application and the code Solidify the code review process

Technologies Used

• HTML
• CSS/SaSS
• Lighthouse (Accessibility dev-tool)
• Vanilla JavaScript
• Mocha & Chai (Testing tools)
• NPM package/Webpack
• Fetch API
• ESLint

The src directory contains the classes and the testing files are in the test directory. The Fetch calls are contained in the fetch.js The updateDom.js file works with all the scripts.js, classes, & index.html files to render the page's dashboard.

Setup

Fork this repo (look up in the top right corner) and copy the SSH link. Open your terminal, run git clone (replace the [ ] with the copied remote address) Change into the directory and type the following to view page:

In the terminal run:

npm start

and then:

src/open index.html

Wins

• Being able to put together everything that I have learned the last 5 weeks into action!

Challenges

• Balancing this project while studying for the final assessment.
• Getting the Fetch requests to work.

Future Designs/Extensions

Add Agent Interaction:

• Add a travel agency, with login whith username and password
• New trip requests (a user’s “pending” trips)
• Total income generated this year (should be 10% of user trip cost)
• Travelers on trips of the day (today's date)

travel-tracker's Issues

2. Traveler Interaction

As a traveler:

• make a trip request:
• select a date
• duration
• number of travelers
• choose from a list of destinations
  After making these selections:
• 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.

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

1. Dashboard

As a traveler:

dashboard page that shows:

• All 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

PR template

• create a PR template

Add input Calendar

• Add input type = date to add a calendar to my HTML file

Add Samantha as reviewer

• Add Samantha as reviewer

Add get request for only one Traveler /user

• test in the console if it is working

Add api Requests file

• Add Api requests file
• create /Add GET requests
• create/ Add Post requests
• create / Error messages

PS:
all the POST and DELETE requests
should have the following headers:

{
"Content-Type": "application/json"
}

Remember, a .catch won’t necessarily run on a bad response (ie 4xx level status) from the server. Make sure you’re checking your response status codes and messages if something isn’t working as expected

Class Traveler

• Add traveler constructor ( id, name, traveler Type)
• Add traveler test
• Add traveler Repository ( all methods, maybe use inheritance?)

3. Login

• user log in with a username and password.

As a traveler:

• be able to login:
• I will see a login page when I first visit the site:

username: traveler50 (where 50 is the ID of the user)
password: travel

• Upon successfully loggin in, I should see my dashboard.

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

Acessibility

Before moving to iteration 3

• Create a branch and push it up to GH so Lighthouse can be ran to check your dashboard for the accessibility audit.

Since Lighthouse refreshes the page, we need this code on a separate branch to test the accessibility of your dashboard instead of your log in page.

README file

Add HTML

• Add HTML with accessibility in mind
  ( ex : add language at the top, name Btns , see what to do for inputs)

Add SCss file

• looks like the Css needs to be scss ( check this again)
• Add media query
• need to add SASS - all sass code lives in a single file and makes use of variables
• has well-factored Sass with all styles separated out into logical stylesheets. Mixins or extends, variables, (appropriate) nesting and color functions have been utilized well.