trellixvulnteam / travel_planner_j31t

Web application that allows user to insert a destination and date of departure as well as return - which then displays the weather forecast, fun-facts, and images of the destination. This project has been completed as part of the Udacity Front End Development course.

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Contributing
• License
• Contact

Getting Started

About The Project

This project builds a single page website where the user can input a location as well as a departure- and return date for an upcomign journey. Upon submission the user will be displayed the length of the stay, a picture of the destination, as well as a weather forecast. Please note that if the departure date is within the next week the user will be displayed an exact weather forecast as serviced by the weatherbit API. If, however, the departure date is more than one week from today, the user will be displayed the past weather of that day and month one year ago. This is serves as a proxy for what a typical weather may be around the date of departure of the specific location.

The interface is displayed below.

Built With

This project has been built using the following frameworks, plugins, and APIs.

#####Frameworks

• Webpack

#####Plugins / Dependencies

• babel/core
• babel/polyfill
• babel-preset-env
• babel-loader
• css-webpack-plugon
• css-loader
• file-loader
• html-webpack-plugin
• jest
• mini-css-extract-plugin
• jest
• node-sass
• optimize-css-assets-webpack-plugin
• sass-loader
• style-loader
• terser-webpack-plugin
• webpack-dev-server
• workbox-webpack-plugin

#####APIs

• Geonames
• Weatherbit
• Pixabay

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

npm install npm@latest -g

Installation

1. Clone the repo

git clone https://github.com/alex1ned/travel_planner.git

2. Install NPM packages

npm install

3. Get a free API credential from

   • http://www.geonames.org
   • https://www.weatherbit.io
   • https://pixabay.com

4. In root folder create a new file called .env

5. In the file enter your credentials in the following way:

   • GEONAMES_API_USERNAME=<your username>
   • WEATHERBIT_API_KEY=<your api key>
   • PIXABAY_API_KEY=<your api key>

6. In the file .gitignore add the .env file name. This ensures that if you publish your project on github, that your api credentials will not be published on github and are not visible to anyone who may clone or view your project.

Contributing

Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Suggestions for possible features to add (w/o order of relevance):

• Add a clear button that resets the user interface.
• Add button that allows user to add another trip which will be displayed below the inital one.
• Allow user to add multiple destinations for the trip.

License

No license.

Contact

Alexander Nederegger - [email protected]

Project Link: https://github.com/alex1ned/travel_planner