dhruvabhat24 / weather-app Goto Github PK

It is a weather app made using react.js

Home Page: https://weather-app-lac-pi.vercel.app

License: MIT License

HTML 8.55% CSS 16.95% JavaScript 74.50%

javascript javascript-mastery react react-app weather-app good-first-issue collaborate communityexchange frontendmasters github

weather-app's Introduction

Dhruvabhat24

Weather App

This is a simple weather app built with React. It allows users to search for a location and get the current weather conditions.

Features

Search for a location by city name
View the current temperature, weather conditions, and wind speed

Installation

To install and run the app locally, follow these steps:

Clone this repository to your local machine
Navigate to the project directory in your terminal
Run npm install to install the dependencies
Run npm start to start the development server
Open your web browser and navigate to http://localhost:3000

Usage

To use the app, follow these steps:

Enter a city name in the search bar and click the search button
View the current weather conditions for the selected location

Credits

This app was built using the following technologies:

React
OpenWeatherMap API

License

This project is licensed under the MIT License. See the LICENSE file for details.

weather-app's People

Contributors

Stargazers

Watchers

Forkers

anshsaxena1703 adarsh-singh-bhadauria rajneesh069 annuk123 thomaslagace ceejay-777 gouttebroze robert5313 yyassire saksham-jain177 nikhildyaga fsadatl y-kitazawa0 ctrl07

weather-app's Issues

Add a color to the backgourd

Better to add Gradient color

Rather than the"let" keyword in the code, "const" should be used if the variable's value isn't changing.

Icons Alignment

Icons are not aligned in a sequence way in both web browser and mobile browser.

Design a README file for this repo

Time & Date

Tasks need to be done

Add time in both format
Add date
Display Day

Feture update

Add Pressure Icon

Make necessary changes to display the current pressure

Typo error in the className of <div> tag in the WeatherApp.jsx file at 2 places. Following screenshot will be showing the same.

Feels like values remain unchanged

Where did you find this bug ?

Feels like sunraise and suset values

Explain about the bug.

For every place those values remain same

Responsive feature

Make the website responsive which will fit to different devices
It need to be seen good even in mobile devices

Search suggestion

While typing the location / place name it need to suggest the place name

Current location fetching

As soon as the webpage open it need to fetch the current location and it need to provide the weather of that area

Search on enter

When typing in the search bar, the user should be able to click the enter button on the keyboard to search in addition with the search button.

New features required

Todays highlights which includes

Sunraise & Sunset
Air Quality Index
Humidity
Pressure
Visibility
Feels Like

A reference picture is attached below

API Key exposed in the code, it should be inside a .env file.

Rather than using DOM to access elements, separate components should be created.

Since we are using React.js as our front-end framework hence we should create different components for different UI elements rather than using DOM to access/manipulate them as it makes things confusing as it depicts that those elements are in the static index.html file but in reality they are just being returned inside the main WeatherApp function inside "WeatherApp.jsx".
I am attaching relevant screenshots here. Please look into it.

Weather Report

Task need to be done

Get The report
Upon clicking it need to fetch last 6 days weatherand create a downloadable pdf file
Upon clicking the button it need to download the report

Forecast feature

Last 5 days or last 6 days weather need to be displayed