Weather app made using openweather api that supports over 200,000 cities

Overview

About

This is an open-source weather app built using React.js, and you are welcome to add your unique touch to this project by contributing to the repository.

Project Link

Live project link weather-wizard-app

###The original code is in community_uploads branch whereas master branch contains code changes made by the contributors. You can either make changes to any one of the branch

What is Hacktoberfest

The Hacktoberfest is a program put on by Digital Ocean, DEV and Github that lets you win a T-Shirt by making 4 pull requests on any open-source project throughout October.

Registration for Hacktoberfest

https://hacktoberfest.com/

Add/Fix components

Based on your ideas, you can add or fix the react component. Any code copied from another source should not be used.

Create pull request

After completing these steps, you can start contributing by clicking on Create Pull Request. Your branch will be merged if it meets the requirements of the maintainers. There is no restriction on where you can use this project.

NOTE

  1. Don't Create Pull Request to update "readme.md" File.

  2. Create pull request to only master branch

  3. Maintain proper folder structure.

  4. In case you need to add an external package, install it by using npm. Don't push the complete package file here

  5. The pull request should be relevant and useful

Steps to run the project

  1. Fork the repo
  2. Clone into local folder
  3. Run npm install

##This project uses opeaweathermap-api to fetch the weather report. you can generate your own api key by following the below steps

1: visit https://home.openweathermap.org/users/sign_in

2: create an account if you dont have one

3: visit my api keys and generate your own api key

Screenshot (205)

4: create a .env file in the project root directory and copy paste your api key using this variable name

REACT_APP_WEATHER_API_KEY = "YOUR API KEY"

5: run npm start

To know more about the how the data is fetched from an api visit https://openweathermap.org/current#name

6: you can now make changes in the project according to your choice and once completed

Steps for creating pull request

7: Commit and push the code to a branch named after you, also attach a screenshot named as icon.png in your project.

8: Create a pull request by explaining your features along with the screenshot to have the changes merged from your_name branch into the master branch

9: all of the pull requests will be merged to the repository that follow hactoberfest guidelines.

Finally if you enjoyed working on this repositiory don't forget to star this repository

Happy hacking

Comments
  • Dark Mode Functionality added

    Dark Mode Functionality added

    Hi ,

    I've added the dark mode functionality in the app. It was quite uneasy task to add the same because dark mode feature on the UI for overall app was not an good option. So I've created the same for main data-weather-component. Please check the same!

    Attaching the screenshot for your reference!:-

    Light Mode:- Light-mode-weather-wizard-app

    Dark Mode:- dark-mode-weather-wizard-app

    Please check the same!

    opened by Rickey07 5
  • use component based rendering

    use component based rendering

    About Issue

    • currently the App.js has all the major source. Use component based rendering so that code base becomes more readable and follows react way to render web components.
    opened by pankaj485 2
  • Add check if the search field is empty

    Add check if the search field is empty

    Hi @codewizard26

    Have made the changes to display message when the search field is empty and not to send request to openweathermap

    Can you review the PR

    Issue link:- https://github.com/codewizard26/weather-wizard-app/issues/20

    Screencast for changes: https://www.loom.com/share/a5c6c4cb3e2248f8b1297633cd09db19

    opened by darshanshah1996 2
  • Request to fetch weather details sent event when the searched input is empty

    Request to fetch weather details sent event when the searched input is empty

    Hi @codewizard26

    Currently, when the user tries to click on the search button when the search input is empty we still send a request to fetch weather details.

    Thinking of adding validation to show Search input is empty similar to the way we show No results found when user enters invalid location

    Can you assign the issue to me

    image

    opened by darshanshah1996 2
  • Add some more weather info from api

    Add some more weather info from api

    Whosoever is interested in contributing this repository can add some more data by fetching it from api and displaying in the Ui apart from the current 4 which are present eg humidity, min_temp etc

    opened by codewizard26 2
Owner
Nikhil Mishra
A student and a freelance web developer oriented towards web3 space. Hacker earth campus ambassador
Nikhil Mishra
Simple weather app written in HTML, CSS, and JavaScript using the OpenWeather API for fetching weather and geolocation information

Description Simple weather app written in HTML, CSS, and JavaScript using the OpenWeather API for fetching weather and geolocation information. Acknow

Gleb Korzan 4 Feb 23, 2022
Weather app created using vanilla JavaScript and APIs. You can search cities worldwide and get current and forecast weather features.

Weather App Live Demo About the Project Weather app created using vanilla JavaScript and APIs. You can search cities worldwide and get current and for

Lua 22 Dec 28, 2022
A weather dashboard that features dynamically updated HTML and CSS using OpenWeather API data.

Weather Dashboard A weather dashboard that features dynamically updated HTML and CSS using OpenWeather API data. User Story AS A traveler I WANT to se

Benjamin Eidum 1 Apr 19, 2022
A Weather API project inspired by The Ultimate API Challenge / Weather API.

Weather API Project A Weather API project inspired by The Ultimate API Challenge / Weather API. Tech Stack: React.js Tailwind Axios Inspiration The Pr

Franziska 1 Dec 29, 2021
This project is about building a web application to show a weather forecast using weather API.

Weather App Web application to show the current and upcoming week weather forecast. Want to see live preview » ✧ View Demo ✧ Report Bug ✧ Getting Star

Mohit Sehrawat 10 Dec 25, 2022
Weather forecast for Turkey's cities.

Weather App Weather forecast for Turkey's cities. This web app built with using Vite + React. You can preview here Project Details React Day.js for pa

Melin Kan 32 Jan 3, 2023
Weather Condition App is a mobile application that has a category of countries in the home age and the users can access to weather of each country.

World Weather This is a SPA react-app project that is built using two APIs. And users can select and choose countries and states and get their updated

Ahmad Zamir Yousufi 2 Oct 10, 2022
Weather-magic - Working with APIs to create a weather dashboard

Weather Magic link to website Following the link above will bring you to the Wea

null 1 Feb 3, 2022
Monorepo project that shows the current weather data and weather forecast for next 7 days. Created from scratch to participate in a 14-days hackathon.

Climatic Monorepo project that shows the current weather data and weather forecast for next 7 days. Created from scratch to participate in a 14-days h

Luis Marsiglia 6 Jun 23, 2022
Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly Weather Card by @decompil3d An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar. Can y

Jonathan Keslin 49 Dec 29, 2022
A Travel companion app using Google Maps API, Travel Search and Weather API

Travel Advisor Introduction An advanced Travel Companion Application using Google Maps. With Geolocation, Google Maps API, Searching for places, Fetch

Sunny Bhadani 4 Nov 11, 2022
List of ~240,000 Persian words

an-array-of-persian-words List of ~240,000 English words. Derived from the Dehkhoda dictionary. Install npm: npm install an-array-of-persian-words Use

peyman farahmand 3 Mar 16, 2022
How to create 1,000 videos in 60 seconds

How I built 1,000 personalised videos in 60 seconds In this article, we will show you how to build 1,000 personalized birthday videos for 1,000 differ

Shotstack 19 Dec 9, 2022
Weather Application built using ReactJs , OpenCage API and OpenWeatherMap API

Weather-bot Netlify Site Status : Weather application built using ReactJs, OpenCage Api and OpenWeatherMap Api Tech Stack and Dependencies Name Descri

Kaushik Selvaraju 13 Oct 17, 2022
Fast API for getting moroccan cities and their districts in json format.

Fast API for getting moroccan cities and their districts in json format built with Usage The number of requests per user is limited to 100 req/min Lis

Ysn4Irix 26 Dec 22, 2022
This is a Weather app based on HTML CSS JavaScipt (Openweathermap API)

Weather App (Openweathermap API) This is a Weather app based on HTML CSS JavaScipt and data fetched from API Changes background images as per Location

Subhadeep Das 4 Mar 17, 2022
Mekna'7, a subsidiary of the ONCF group, which provides bus services to cities not served by train, needs to set up a computer system by creating a database for managing customer reservations.

Online-bus-ticket-reservation Introduction Hello everyone, this is a project that I have done for assignment. This project is a simple online bus tick

Hala Ziani 5 Oct 25, 2022
This is an app that gives you a mood by looking at the weather.

Weather-to-mood It is a basic application which shows user weather and date and by looking at these information it gives a mood. WeatherMoodApp This p

Büşra Akbulut 4 Jun 30, 2022
This is a app for weather management.

This project was bootstrapped with Create React App. Below you will find some information on how to perform common tasks. You can find the most recent

Educatque 1 Jul 7, 2022