Code Monkey home page Code Monkey logo

catraveltracker's Introduction

Welcome to CA Travel Tracker!

Table of Contents

Introduction

CA Travel Tracker is a travel site where the user can explore and book travel destinations. Through an inviting interface the user is able to:

  • Track past travel expenses;
  • Create new bookings;

Objective

  • Utilize OOP and test-driven design principles;
  • Fetch API GET and POST calls;
  • Utilize npm packages to enhance the functionality and user experience;
  • 100% Lighthouse Score for accessibility;

Set Up

  • On the top right corner of this page, click the Fork button to fork this repo.
  • Clone down the forked repo by clicking the green Code button, and then copying the link under SSH.
  • In your terminal, type in git clone and then paste the link.
  • Once you have cloned the repo, change into the directory and install the project dependencies, by running npm install.
  • Run npm start in the terminal, and copy the URL link (http://localhost:8080/) to see the HTML page
  • To stop running the server, use Control + C in the terminal. (Closing the terminal without stopping the server first could allow the server to continue to run in the background and cause problems.)
  • Clone this repo down, change into the directory and install the project dependencies, by running npm install.
  • Then run: npm start to be able to access the local API server used by the website. To stop the local API server from running in your terminal use command + c.
  • And now you're ready to start!

Illustrations

  • The user will see with a login screen upon load and will will Log in using:
  • username: traveler1 (or any user number between 1 and 50) and password: travel.
project1.mp4
  • In the main page the user is greeted and it is displayed the current annual spending. The user is shown a summary of all past, future and pending trips.
  • They are sorted most recent to oldest. The user can insert the information for a new trip in the forms and submit it to create a confirmation card that will come up, with a summary of the trip as well as the estimated trip cost.
  • The user can either cancel and continue searching dates and destinys, or confirm the trip. Upon confirmation, the trip is added to the existing trips list with a pending status.
project2.mp4

Future Features

  • Create areas for Past, Future and Pending trips;
  • Travel Agent login;
  • Ability to approve/deny trip requests by Travel Agent;
  • Search travelers by name;
  • Add a countdown for the next trip;
  • Allow the Travel Agent to create new trips;

Technologies

JavaScript HTML CSS Webpack NPM Mocha Chai GitHub Git

Contributors

Sources

catraveltracker's People

Contributors

camianderson avatar robbiejaeger avatar hannahhch avatar niksseif avatar dependabot[bot] avatar hfaerber avatar khalidwilliams avatar kpn678 avatar

Watchers

 avatar

catraveltracker's Issues

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.