bmorelli25 / react-weather-app Goto Github PK

Assigned to @kopijunkie

Per our conversation in #15: Formatting the date in the 5 day forecast with moment.js

Right now, the tests fail out-of-the-box because API_KEY will be undefined. In order to make them work, you need to manually set the value of API_KEY in openWeatherMap.jsx while running the tests.

I'd like to fix this so that you don't need to manually set the value of API_KEY and, instead, your API key will be retrieved from the .env file.

Hello Hacktoberfest!

Are you interested in React JS, Node JS, APIs, HTML, Javascript, Webpack, Express, and/or SASS/CSS? Then you've come to the right project!

This web app allows a user to type in a location, then pulls weather data from OpenWeatherMap's API and returns it to the user. Live Demo

Your task: Testing! Practice your testing skills by writing tests for this web app. There are a number of things that can be tested in this app, including:

• API data fetch
• API KEY
• React Rendering
• Search in top right box
• Search in main box
• Search with blank string / bad characters

Don't hesitate to reach out with questions, or if you need help understanding the code!

If you want to write a test(s), leave a comment specifying what tests you're going to write so others don't end up writing the same tests. Tests should be placed in the /app/tests/ folder. Please see PR #7 for more information on how tests are implemented in this project

If you're not sure where to start, check out my React Todo App. This Web app has a ton (30+) tests and should give you some great ideas for how to write tests.

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.

Hello Hacktoberfest!

Are you interested in React JS, Node JS, APIs, HTML, Javascript, Webpack, Express, and/or SASS/CSS? Then you've come to the right project!

This web app allows a user to type in a location, then pulls weather data from OpenWeatherMap's API and returns it to the user. Live Demo

Your task: Implement an enviornment variable for the Open Weather Map API_KEY. Currently the API Key is just sitting in the URL, visible for all to see. This is obviously not a best practice. Update openWeatherMap.jsx to utilize the new enviornment variable named API_KEY. Also update the Readme to explain how to use the environment variable.

Don't hesitate to reach out with questions, or if you need help understanding the code!

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.

Hello Hacktoberfest!

Are you interested in React JS, Node JS, APIs, HTML, Javascript, Webpack, Express, and/or SASS/CSS? Then you've come to the right project!

This web app allows a user to type in a location, then pulls weather data from OpenWeatherMap's API and returns it to the user. Live Demo

Your task: In #9 @SimonMckeon added in a background changing feature. Based on the current weather conditions, the background of the app will change to match. There is some refactoring that needs to be done to better execute this code. Please see PR #9 for more details on what Simon did. If you'd like to help, comment below, and go for it!

Don't hesitate to reach out with questions, or if you need help understanding the code!

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.

It doesn't look like the app currently supports retrieving weather by zip code. Looking at the OpenWeatherMap API, this should be a quick enhancement to make.

Hello Hacktoberfest!

Are you interested in SASS/CSS and Reactjs? Then you've come to the right project!

This web app allows a user to type in a location, then pulls weather data from OpenWeatherMap's API and returns it to the user. Live Demo

Your task: A complete site redesign. Currently the web app utilizes Foundation for styling. Feel free to stick with Foundation, or go you're own route. I'm not looking for anything crazy here, but if you can help me make the site look more aesthetically pleasing, I'd greatly appreciate it!

Please feel free to reach out with any questions you have about the code/project - I'm more than willing to help!

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.

Hello Hacktoberfest!

Are you interested in React JS, Node JS, APIs, HTML, Javascript, Webpack, Express, and/or SASS/CSS? Then you've come to the right project!

This web app allows a user to type in a location, then pulls weather data from OpenWeatherMap's API and returns it to the user. Live Demo

If this issue doesn't interest you, but there are other issues, bugs, enhancements you would like to make, please feel free to open up a new Issue and we can get a discussion started. I want everyone to be able to contribute!

Your task: Refactor WeatherForecastList.jsx. Currently, the component returns a map of WeatherForecastDay.jsx modules:

return newData.map((day) => {
                day.date_text = moment.unix(day.dt).format('dddd, MMM D');
                return <WeatherForecastDay tempType={tempType} key={day.dt} {...day}/>
            });

This works great. However, we also want the following to be returned (just once, at the top):

<h4 className="forecast-title">Forecast for next 5 days</h4>

Don't hesitate to reach out with questions, or if you need help understanding the code!

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.

Maybe you should use an environment variable for you api_key value @public/index.html and refer to it in this file.
All you have to do are the following steps:

1. Create an .env file in your root directory
2. Create an API_KEY variable in this .env file as such: API_KEY = YOUR_API_KEY_NUMBER
3. Replace your api_key value inside the file index.html by: ${process.env.API_KEY}
4. Save both files and see the result

Hello Hacktoberfest!

Are you interested in React JS, Node JS, APIs, HTML, Javascript, Webpack, Express, and/or SASS/CSS? Then you've come to the right project!

This web app allows a user to type in a location, then pulls weather data from OpenWeatherMap's API and returns it to the user. Live Demo

Your task: Before we can write any tests, this application needs a testing foundation!

Don't hesitate to reach out with questions, or if you need help understanding the code!

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.

Hi , is it possible to have both units of measurement for temperature atm?

Hello Hacktoberfest!

Are you interested in SASS/CSS and Reactjs? Then you've come to the right project!

This web app allows a user to type in a location, then pulls weather data from OpenWeatherMap's API and returns it to the user. Live Demo Please note the live demo is an old version of the site. Download and run it to see the updated version.

Your task: Make it look prettier! Currently on weather load, a background image is displayed to the user. It tiles and looks pretty dated. Maybe a solid color would be better? You tell me. Lets discuss your ideas and go from there. I think simpler and cleaner is better.

Please feel free to reach out with any questions you have about the code/project - I'm more than willing to help!

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.

Hello Hacktoberfest!

Are you interested in ReactJS, RESTful APIs, HTML, Javascript, Webpack, Express, and/or SASS/CSS? Then you've come to the right project!

This issue is pretty open ended as there are so many possible enhancements to be made in terms of data. OpenWeatherMap has a ton of great, free features. Currently this weather app utilizes only the current weather data API and returns the current temperature. Live Demo

Your task: Utilize OpenWeatherMaps API and return even more great data to the user. Possibilities include:

• Current wind, rain, clouds, etc.
• Returning an image that changes based on the weather (e.g. a sun when it's hot, a cloud when cloudy, etc.)
• Changing the background based on current weather
• Utilizing the 5 day/3 hour API to return the 5 day forecast for the searched city
• Any other great ideas you can come up with!

Don't hesitate to reach out with questions, or if you need help understanding the code!

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.

How about adding google autocomplete in search box to give city suggestions as user type the city name?

The temperature of your current location in the nav bar is not tied into the temperature type toggle. All other temps can be toggled between degrees F and degrees C, however, the current location temperature in the nav will always remain in degrees F.

Hello Hacktoberfest!

Are you interested in React JS, Node JS, APIs, HTML, Javascript, Webpack, Express, and/or SASS/CSS? Then you've come to the right project!

This web app allows a user to type in a location, then pulls weather data from OpenWeatherMap's API and returns it to the user. Live Demo

If this issue doesn't interest you, but there are other issues, bugs, enhancements you would like to make, please feel free to open up a new Issue and we can get a discussion started. I want everyone to be able to contribute!

Your task: Webpack Aliases are broken in testing. Enhance your React and Webpack knowledge by fixing this bug! The details:

What are Aliases? You can find the aliases in this project in the webpack.config.js file. One example of using an alias would be in Nav.jsx.

Instead of:
var IPInfo = require('../api/ipInfo.jsx');

You simply have to:
var IPInfo = require('ipInfo');

The problem (I believe) lies in the fact that webpack.config.js is not being required prior to tests being run. Thus, none of the aliases that are set up are accessed. In order to allow testing to work again, I have temporarily removed all Aliases from the project in PR #34. Please see the specific code changes for more information.

Don't hesitate to reach out with questions, or if you need help understanding the code!

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.

Hello Hacktoberfest!

Are you interested in ReactJS, RESTful APIs, HTML, Javascript, Webpack, Express, and/or SASS/CSS? Then you've come to the right project!

This web app allows a user to type in a location, then pulls weather data from OpenWeatherMap's API and returns it to the user. Live Demo

Your task: Utilize IPinfo.io's API to guess the users current location.

If the location can be determined based on IP address, this information should be displayed in the index header and read something like: "It is x degrees in city"

Don't hesitate to reach out with questions, or if you need help understanding the code!

PS: This project utilizes a .editorconfig file. This helps developers define and maintain consistent coding styles between different editors and IDEs. Please ensure your editor is set up to use the .editorconfig file. For more information, check out editorconfig.org.