JavaScript Practice | Day 12

Posted in Coding, JavaScript, Practice, Programming Tagged: , , , , ,
How's the weather - JavaScript Practice

Good afternoon!

Today (and most likely the following days for a while) is an odd day. Odd, because the exercise I’m presenting doesn’t really represent in any way, the amount of time I’ve put into JavaScript today.

What? Why?

Because! How the heck to do you set up a local server which will allow you to make API calls from within your JS? Also, how do you run Async functions in JS? I used to have to do all this when I was learning android development earlier last year, but I feel like Android Studio does all this for you. Well, the async function part you do, but I don’t remember having to set up a server to make API calls. And it’s weird, too, because I use Xampp for when I do WordPress, but I could not figure out how to set it up to make any of this happen.

So, the majority of the morning was just kind of spent reading and chasing ghosts. I feel no closer to the solution, other than that I know what I’ve done doesn’t work. At the same time, I know since I don’t really have any idea what I’m doing, those methods may work and I’m just doing it wrong. This brings me back to where I started, no closer to the finish line.

Today… String Concatenation

… but we’ve already doooone thiiisssss…

I know! But, if you read the above, you’d know why we’re here. Also, it’s for the greater goal of weather tracking. The purpose of the exercise today is to be able to take a user defined input, add it to the API URL, and then output a custom result to the user. In this case, the output is just a level 3 header string.

Some very simple, very quick, & very ugly HTML gives us a form with which to work. The form includes some instructions, an input box, and an input with button type. Below the form, the h3 will populate with the results for the search.

Really, the only thing we need to do here is to define a variable for the input box, then add an event listener to the button click. When the button is clicked, it gets the value from the input box and adds it to the end of our API call. Then, we add the “country code”, as defined by Open Weather Map, to the end of this, so the URL will actually work. Save this to a variable.

JavaScript Code

Make. The. Call.

So dramatic, right? Sadly, I used this dramatic title, for one of the least dramatic scenarios so far.

With the API URL variable in hand, we pass it in as a parameter to a call for our function from yesterday, respo. This function opens a request to the server to “GET” an XML response back with all the pertinent information. We then parse that information into JSON and from here, we can access the information for which we’re looking.

In my case, I kept it simple. I want the city name and the weather type (again). At the end of this function, we set the innerHTML of our level 3 header to another string concatenation. This time, we’re throwing in the city name and the type of weather it’s experiencing into a basic response to the user.

JavaScript Code

Final Touch

This hardly deserves its own section, but oh, well… This is my blog and I get to do what I want. 🙂

The only thing left to do, is to clear the input. Set the value to an empty string and voila! Provided the user knows the zip code for which they’re looking or knows how to Google, this should be a finished exercise.

JavaScript Code

Written by Tyson Hood

Leave a Reply

Your email address will not be published. Required fields are marked *

Like what you see and want more info?

Click below to get on the mailing list.

Yes, send me some info!