GithubHelp home page GithubHelp logo

codey-codes / weather_app Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 2.74 MB

A basic weather developed using React

Home Page: https://codeycodes.com/projects/weather_app/

HTML 4.88% JavaScript 68.75% CSS 26.37%

weather_app's Introduction

Weather App

Description:

This is my first React project which is a weather app that can be used to get basic weather information on thousands of locations all over the globe. This app allows users to search for weather information using a city name which will provide a list of possible cities for that name and the users will then be able to select which city, for weather information, they are looking for.

Features:

  1. Thousands of locations can be searched for, using this app.
  2. Basic weather information for the chosen city will be displayed. This information includes: 2a. Current weather condition i.e. sunny, cloudy, rainy etc. 2b. Current temperature 2c. Current apparent temperature AKA Feels Like 2d. Current humidity level in % 2e. Current precipitaion in % 2f. Wind speed 2g. Visibility 2h. UV Index 2i. Weather conditions and temperatures for the next few hours 2j. Weather conditions with high and low temperatures for the next six days
  3. The search option works according to the algorithms used by OpenCage and always the most popular results are shown in order
  4. The units can be converted within the app. The units available are SI (chosed by default) and Imperial.

Usage:

As this is a single page website with old data getting replaced by new one, the 'Back' button will not take you back to the homepage. Please refresh the page if you want to search for a different location.

POSSIBLE FUTURE UPDATES

  1. Weather alerts is not a feature of this app yet. These severe weather alerts for US, Canada, European Union member nations and Israel can be added in future releases
  2. Minute-by-minute data can be generated for more accurate forecast
  3. Search by latitude and longitude can be added
  4. More weather information can also be provided which may include storm warning, nearest storm distance, atmospheric pressure, cloud cover, dew point, precipitation rate, moon phase, sun rise/set and much more

Other Notes:

What is happening in the background

Two API services are used for this app, DarkSky and OpenCage. DarkSky is the primary source for all the weather information but unfortunately, this service does not provide searching for a location by name but by latitude and longitude data only. To address this issue, another API service was used, called OpenCage, that provides latitude and longitude details by searching for a city by its name. To make it more user-friendly, the search feature used in this app lets users to search by city name, hence using the OpenCage functionality. Thus, this app will call OpenCage API for data, only after user searches for a city and DarkSky will only be called for a specific city when user selects that city.

Environments used:

  1. ReactJS: used to develop this whole app which then automatically generates the HTML, CSS and JavaScript files
  2. NodeJS: as a Node Package Manager (npm)

weather_app's People

Contributors

codey-codes 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.