Code Monkey home page Code Monkey logo

subramanyaks / weather-app Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 7.18 MB

⛈A simple and responsive Weather Application using openweathermap API build with react js which gives current weather details of the cities across the world.

Home Page: https://subramanyaks.github.io/Weather-app/

License: MIT License

HTML 7.68% CSS 19.42% JavaScript 72.90%
react-hooks reactjs weather-app weather-api node openweathermap-api react nodejs weather react-weather-app

weather-app's Introduction

⛈ Weather App

A simple weather app built with React.js and utilizes the OpenWeatherMap API to fetch and display weather information for a given location.

API

The Application Programming Interface is a set of rules and regulations and standards that allows software programs to interact with each other. It acts as a middleman between two applications, allowing them to exchange data and information

Features

  • The application features a robust search functionality for user-friendly access.
  • Ensuring a seamless experience, the UI is responsive and adapts to various devices and screen sizes.
  • Users can expect precise and reliable results when utilizing the search feature.
  • Current weather conditions, encompassing temperature, humidity, wind speed, and a detailed weather description, are prominently displayed.
  • The application efficiently retrieves weather data by either detecting the user's location or accepting a manually entered city name.
  • In beta stage, the voice search option provides an innovative and hands-free alternative for user interaction.

Technology Used

  • React
  • Bootstrap
  • OpenWeathermap API
  • VS Code

API Details

the details used from the openweathermap API is follows:

  1. id City ID.
  2. name City name.
  3. sys.country Country code (GB, JP etc.)
  4. main.temp Temperature. Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
  5. main.feels_like Temperature. This temperature parameter accounts for the human perception of weather. Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
  6. main.pressure Atmospheric pressure (on the sea level, if there is no sea_level or grnd_level data), hPa
  7. main.humidity Humidity, %
  8. main.temp_min Minimum temperature at the moment. This is minimal currently observed temperature (within large megalopolises and urban areas). Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
  9. main.temp_max Maximum temperature at the moment. This is maximal currently observed temperature (within large megalopolises and urban areas). Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
  10. coord.lon City geo location, longitude.
  11. coord.lat City geo location, latitude.
  12. weather.description Weather condition within the group. You can get the output in your language.
  13. weather.icon Weather icon id

Pre Requisite

  • Install git
  • Installation of NodeJS is mandatory with NPM
  • Login in to Openweathermap api website to get your API key

Run and Setup

  1. Fork the Project and clone Repository using git clone
git clone https://github.com/SubramanyaKS/Weather-app.git
  1. Navigate to the project directory:
cd Weather-app
  1. Install all dependency in package.json
npm install
  1. Obtain an API key from OpenWeatherMap:

    Visit the OpenWeatherMap website and sign up for an account.After signing in, go to your account dashboard and generate an API key.

  2. Create a .env file in the root directory of the project and add your API key:

REACT_APP_API_KEY=<Your openwearhermap API Key>
  1. Start the development server using command:
npm start
  1. Open your browser and navigate to http://localhost:3000 to see the app running.

Contribution

We welcome contributions! If you'd like to contribute to Weather-app, please follow our Contribution Guidelines.

Deploy

Weather App is live and ready for you to explore! Visit WeatherApp

Author

  Subramanya K S

LICENSE

This project is distributed under MIT License read LICENSE file for more details .

Credits

Openweathermap API Fontawesome Icons

If you like the project 🌟 the repository.

Thank you with ❤ Subramanya KS

weather-app's People

Contributors

subramanyaks avatar

Stargazers

 avatar  avatar

Watchers

 avatar

weather-app's Issues

Error handling

  • Currently when we type a wrong city or wrong word, the app will not display error.
  • Use context for error handling

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.