codewizard26 / weather-wizard-app Goto Github PK

View Code? Open in Web Editor NEW

7.0 2.0 20.0 4.92 MB

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

License: MIT License

HTML 10.79% CSS 17.86% JavaScript 69.88% SCSS 1.47%

hacktoberfest hacktoberfest2022 open-source openweather-api reactjs css html javascript hactoberfest-accepted

weather-wizard-app's Introduction

About

Contribute to this open-source weather app built using React.js by adding your unique touch.

Project Link

Live project link weather-wizard-app

###Community_uploads branch contains the original code, whereas master branch contains the changes made by contributors. Changes can be made to any of the branches.

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

Don't Create Pull Request to update "readme.md" File.
Create pull request to only master branch
Maintain proper folder structure.
In case you need to add an external package, install it by using npm. Don't push the complete package file here
The pull request should be relevant and useful

Steps to run the project

Fork the repo
Clone into local folder
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

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

weather-wizard-app's People

Contributors

Stargazers

Watchers

weather-wizard-app's Issues

Dark/Light theme Icon not aligned

Drop Down

I can replace the simple seach bar add dropdown functionality which search the places when user types is .

Styling

I can improve overall interface to make it more interactive along with text animations

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.

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

Add DarkMode Functionality.

I will add an dark mode functionality to the app. Assign the task to me!

Add a button to toggle between Celsius/Fahrenheit

I'd like to add a button which can switch between Celsius and Fahrenheit.

Add the feature of fetching the current location

Can I try to add the feature of fetching the current location of user and as app loads whether will set according to fetched location.

Lack in responsiveness of the app specially in mobile devices and issue in design.

Hey @codewizard26, the issue in the design part of your app needs to be addressed for the effective and convenient use of your app.

First, the major issue is the unresponsive behavior of the app making it a bad experience for mobile users.

After fixing this issue, it will responsively behave

There were still some inconsistencies regarding the design aspect of the app which can be easily fixed

After some fixes, the glance at the app:
__

Thanks!

min_temp data not being shown

The minimum temperature value is not being shown, who can fix this issue asap?

Improvise Search Bar

Please assign it to me.I will do it for you.

Multi Language Features

here is the pr
#44

Add navbar, fix the orientation, add logo

I would like to improve the look of this website, and improve the UX

not Found Text html block fix

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

Feature to show current date and time on the app.

Hi ,

it would be great if we will create an feature to display the current time and date.

I am ready to do that if you'll assign me the task

switching matrix unit doesn't works on initial rendering of the webapp

This system works only after the user searches one location and does not works in the starting when the current location is displayed
if any one would like to fix this issue please raise a pr for the same