Used another approach to the daily forecast

In this PR we create the one-day card template and make it dynamic for 7 days of visualization

• We used 16 days Forecast API and made logic to use only data for a week (https://openweathermap.org/forecast16)

This is to implement issue #3

Initially, the city displayed will be "New York". User can either input the desired city into the input box or select the option 'Use current location' to get weather for their current location.

What has been implemented so far:

1. Added a link for user to click 'Use Current Location'

2. Once the link is clicked, there will be a prompt for user to select either they want to "Allow" or "Block" permission to access their location

3. If user select "Block", an alert will be displayed saying that "User deny Geolocation" and the city remains as the previous city

4. If user select "Allow", the current location of user will be detected and sent to OpenWeather API to display its weather. Current city value in the input box will be changed to an empty string

5. User can input another city into the input box to see a different city, then can always click the link "Use Current Location" to see back weather for current location

Implemented Issue #10

Source a list of locations from Pod members, and allow the user to choose one of these locations to find out the weather.

For example, it could be a drop down menu with Cities.

Pod members can submit any location, it doesn't have to be personal!

Added a dropdown menu containing members' names and by selecting one from the dropdown, it fetches the weather of the pod's member's city.

In this PR was done:

• Fixed the folder structure. Cleared the unused files
• Created an API key and implement it in the project
• Created the Forecast component
• Investigated the API documentation and set up the Daily Forecast feature
• Implemented mentioned feature into the Forecast component

When Users search for a place, they will also get suggestions like famous restaurants🍲, places of interest🏞️ or activities🏕️ which are prevalent during that particular season.

For example:

• If the wind 🍃 speed of your location are below a certain threshold, you could go out to play badminton 🏸
• If you searched New York, and its summer ☀️ there, you will get activity suggestions and places of interest based on what's best in the summers 🌊
• If you search Japan or any city there, and its winter season ⛄ there, you will be suggested places with hot springs ♨️ to beat the winter chills 🥶

This PR is to add the feature to indicate Air Quality Index (AQI) level and description as well as health recommendations to users based on air quality. There're different levels of air quality which was described in Issue #39 . All these levels are integrated accordingly to the app.

Examples:

1. Currently in New York, air quality index is = 13 --> Air Quality is Good (level 1)

2. Currently in Toronto, air quality index is = 61 --> Air Quality is Moderate (level 2)

What has been done:

1. npm package react-circular-progressbar has been installed to show the AQI (airQualityIndex)
2. state variables for airQualityIndex, airQualityValue, airQualityDesc, barColor were created to show AQI value, AQI description, health recommendations, and set color for the circular bar accordingly
3. fetch API to get AQI value every time page rendered and either input value or longitude or latitude is change
4. create and add the AQIPollution component to add to the results box
5. adjust some styling for the result box and the AQI display part

Fixed the responsiveness of all components on the webpage. Tested across the following breakpoints:

• 320px  - 480px -> Mobile devices
• 481px  -768px -> iPads, Tablets
• 769px  - 1024px -> Small screens, Old laptops
• 1025px -1200px ->Desktops & New Laptops
• 1201px - 1600px  ->  Large screens, TV

Source a list of locations from Pod members, and allow the user to choose one of these locations to find out the weather.

For example, it could be a drop down menu with Cities.

Pod members can submit any location, it doesn't have to be personal!

I worked on the result card ..making information pop out more and fixing the issue with its responsivenes

The functionality of the bookmark icon hasn't been added yet.Right now the expected behaviour is a change in color when clicked

I also made the font family of paragraphs to be roboto while that of headings should be open sans..Hence to distinct font for the project

Alongside @gibbonhug we did the following:

• Implemented a function that returns an object contains the url of the background image, and the weather Icon. All of them are determined related to the current weather.
• Created two hooks to set the background image and weather Icon
• Installed react-helmet in order to update the body in the head tag using style tag
• Pulled Sanjay's changes, and fixed conflicts

There's an issue that requires some attention

I guess we should give the map a background color like white or something, instead of being transparent. In addition whenever I move my cursor away from the map it'll set the location to "" which will set the card to "Loading", and might do something like breaks or delays (you can check it out)

Please check it out @gibbonhug @awilkescom @sadiq-b @SanjaySinghRajpoot

This PR addresses Issue #8.

I created state for the current unit system (metric(C) or imperial(F)). Changing the state with the toggle does not affect the unit in the API request (which is always in metric/Celcius), because I did not want to make calls each time a user used the toggle. Switching from C to F just performs the C to F conversion equation on the existing temperature data.

The temperature data that the API fetches in Celcius is retrieved with 2 decimal places. To display it with 2 decimals in Fahrenheit, I created a utility function to truncate decimals, which I added to the existing Utilities folder.

The toggle (UnitToggle) itself is its own component, with a folder for its JS and its styling, to follow the existing folder structure. When clicked, the toggle switches between two MLH brand colors I set as CSS variables.

I had difficulties integrating this with the forecast widget in https://github.com/MLH-Fellowship/prep-project-22.JUL.PREP.3/issues/1. I tried passing the current unit down as a prop but could not do this. @dw2761 gave me the go-ahead to make this PR without the widget integration.

In case the activities suggestions doesn't update or show up when a city is selected from any source, odds are high that the OPEN AI API KEY has expired. In case this happens, go to https://openai.com/api/ and create an account. Then click on your account icon on the top right and select the "view API keys" option. Copy your API key from there and add it to the .env file in your project as: REACT_APP_OPENAI_API_KEY= "your api key here" That should make the activities suggestor work again. Also if any good samaritan who's reading this, it would be of great help if you can provide your API key to @awilkescom so that he can update the netlify env variable, since it seems that my key appears to have expired.

This PR addresses Issue #95.

I added a button that updates a boolean state to show/hide the globe. I put it next to the location button so it is easily visible. I made the globe hidden by default because the weather app was crashing for me otherwise.

The globe weather map we have is a little resource intensive and can crash browsers on older computers (such as mine). By letting the user decide whether to show the globe or not, more people will be able to use our site.

The aim of this issue is to ensure the code written for different parts of the application gives the expected results. I will be using testing libraries like jest and reacting testing libraries.

Bookmark

This provides a handy way to get all locations weather data you have saved without having to search for them again.

You can save any location of interest as a bookmark and continue looking at the weather condition of other places.

The history data also persists between window closure ...so when you open up the application again you still have the weather data of the previously saved places.

Before Click

after Click

suggested Improvements to this PR

1. Live update of the weather data in the bookmarks card using web sockets
2. Fetch latest temperature data of the location when the component mounts. right now it just persists the same saved data

Improved the Result Card UI

made some changes to the result card Ui to make it look better and responsive too

Before Change:

After Change