Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

Weather finder React App

January 18th, 2019
Categories: Blog, Development, JavaScript, react | Tags: , , , , ,

My version of the “Weather Finder App”, from this tutorial, can be used here.

I wanted to share the React app that I’ve created. I’ve found that going through tutorials is a good way to learn a framework but I feel that when you don’t revisit, or review, what you’ve coded then you don’t truly understand what you’ve built.

1 month later after coding this…

I’ve given myself a long break from this piece and come back to it today. I’ve actually broken down some of the tutorial in a previous post already.

Down to the details

What this app actually does is…

On Component Did Mount (a React lifecycle method) it checks if it can use the browser’s location data:

If it can it use the location data then it’ll go ahead and make a call to Open Weather Map’s API and populate the state with the relative weather information. getBrowserLatLon()


If it can’t (on error) have access to the browser’ location data it’ll show a form asking for the user’s City and Country. When this form’s been submitted it’ll go ahead and make the API call and then populate the state with the relative weather information. getWeather()



I noticed a couple of issues with the App once I had finished the tutorial:

  1. If you misspelt a City/Country then the app would fail and a user is presented with no error message(s)
  2. If you were to submit empty fields then the App would show a generic error message

The fix

I’ve added the following code to handle the error when a misspelt City or Country is submitted:

Original code:

My fix:

There’s not much different here. I’ve wrapped the await with a try incase we get any error messages. I’ve got a small function below to show error messages on the front-end:

Not too sure what else I can break down here. I’ve got a link to my repo here for you to clone and try it out yourself 👍🏽

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd