Coder Social home page Coder Social logo

m-alkhudair / travel-app-project Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 169 KB

A simple app that allows users to preview weather data for the desired destination given the date of travel

License: MIT License

JavaScript 74.18% SCSS 16.55% HTML 9.27%
geoname-api weatherbit-api pixabay-api

travel-app-project's Introduction

About this App

This app was built to meet the graduation requirements for the Frontend Web Development nanodegree from Udacity.

This is a Travel Planner that allows the user to save information about the desired destination. This information includes the date of arrival, and the number of days until the travel date and the weather on that date. You can access the previous entries by clicking on the Show Saved Entries button.

To Start the App

In the terminal, enter these commands:

  • npm install
  • npm run prod
  • npm start

Geoname API

This app access the Geomane API to retrieve the longitude and latitude of the inputted city using the getGeoCoocrdinates() function. The object returned by this function includes city data as well as the weather forecast from the WeatherBit API and image data from the Pixabay API. The returned data will be posted to the server and store in an array of objects.

WeatherBit API

The app accessed the WeatherBit API through the getWeatherbit() function. The function receives longitude and latitude information from the Geoname API inside the getGeoCoordinates() function. The data the getWeatherbit() function returns is an object of a 16-day weather forecast, including things like temperature lows and highs and weather descriptions.

Pixabay API

The app access the Pixabay API through the getPixabay() function. This function returns an object of image data includes the image 'src' and 'alt'. This function is also called inside of the getGeoCoordinates function in the returned object.

Count Down

The app provides the feature of a countdown. This countDown() function will calculate the days left before the date of travel.

Previous Entries

Previous entries are available to the user after clicking the Show Saved Entries button. These saved entries are created by retrieving the data posted on the local server through a get request. This data is then used to create HTML elements.

Updating the UI

All the data used to update the UI are retrieved from the local server. The handleSubmit() function will connect all the moving parts together. It is an event handler function that will call the getGeoCoordinates() function and use .then() channel the data to the postData() function. The latter will post everything to the local server. The request data will then be used to call the updateUI() function to make the change appear on the browser.

License

The contents of this repository are covered under the MIT License.

travel-app-project's People

Contributors

m-alkhudair 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.