One final feature we might want to integrate to our app is something that connects our quiz to the physical world. In Britain, the weather is ever changing, so why don't we offer our users an extra incentive to complete the quiz if it's raining?
There are hundreds of other services that we could add to our app - and now that we've seen how powerful the idea of an API is, feel free to explore and add any others that you can think of!
This appears as an example on the home page. Within this link is your API key, as well as a latitude and longitude. When you click on the link you should see something like this:
This is the JSON weather data for LA. What we can do is connect to this page, and then print out the description of the weather to our user. Then if it's raining, we can give them an encouraging message. The first thing we need to do is to change the location. To find the latitude and longitude of a place you'd like to get the weather for we can use a tool called LatLong:
Just search for a city name and replace the two numbers at the end of your Forecast.io link. We're going to go for Hull!
Next, to integrate this data into our app, head back to the editor and to your index.html. We need to add a section where the weather information will appear, so at the end of our final section, just add the following line:
To make the weather text look nice, we might want to add some margin to the top of the section. In our style.css we can add some. Just type the following line at the bottom of your style.css:
We can now target this section and include our weather data. Click on your "script-1.js" file and scroll right to the bottom of the file. To connect to the API we can use a jQuery function called "ajax". Using the URL that we already have, type the following lines (with your own Forecast.io link):
This should connect to the weather API and then give us an alert with the current description of weather conditions. Now that we have this in an alert, we just need to change the code slightly to input this into our weather section on our index.html page. To do this, we can use another jQuery function called html, which we saw in last week's tutorial. We can also add a bit of text around the description, to make it more friendly.
Feel free to customise as much as you like! The power of programming is that you can test lots of things with the logic we explored last week. Our final weather API code should look like this: