Top 10 TV
The class examples were Tv Top 10 from iTunes and the Weather API. Below is the code for the Top 10 Tv on iTunes. This is similar to the example given within the class. I didnt understand how it works at the time. The function itself manipulates the dom where there is an html element for <ol id=”topTV”></ol>
The function below when it runs it loops 10 times, it appends to #topTV which the the id of the html and appends the attributes listed (title.label, image and label). This spits out an array which is shown below as a snippet.
Weather API
I didnt understand the above API until I learned to use Postman. The layout of the Tv API confuses me when trying to append the attributes. I found the weather API alot more easier to understand. I found theres different versions of the API for the weather which give alot of different information. I stuck with the current weather forecast but I found its possible to show maps and forecasts for the next 16 days. These can be detailed or daily forecasts which I found quite fun to play with.
Using the Forecast here is snippet of the JSON data that it shows for Glasgow currently. My code for this class example is completely different as I learned to understand the code in the image to the left. I found that I was able to create a variable for the “city” and add it into the url variable via an input field. So any city can be searched to see the current forecast.
I didnt display all the information that could be shown from the images on the left.
The top screenshot is my HTML,it consists of an input and button. When button is applied it starts the function and the <div id=”weatherdemo”> is where the function appears. I done it like this so that the city can be changed for new information to apply rather than go back each time.
The function itself is in jQuery and line 2 activates when the on click event is triggered. The city input takes the value entered and applies it into the api url string. This then spits out the data as html.
Name of the city, Co-ordinates for the city which I thought was quite cool.
The weather type, More description on that type of weather and the icon.
Temperature currently and what the temp feels like
Finally the humidity percentage and the wind speed. The function applies this to the #weatherdemo div and stops.
The hardest part of this was the icon. It took me ages to work out how to apply the icon out. I could get it to display in plain text but not as an image. I tried concatenation and it didnt turn out so well. I eventually got it working as the code shows above.
The other issue I had was quite silly, the image wasnt showing up properly and I wasted quite a few hours trying to work out why this was the case. It ended up being that my background colour was the same colour as the clouds so it looked strange. Changing the background colour fixed this daft issue.
This is what it the end result is below, showed 2 different cities so there is a different in weather and information.
The Open Movie Database
From the above API’s I wanted to try something myself. I tried using a Crypto Currency API but ran into a lot of difficulties with this. It required header requests, the instructions for consuming the JSON data were in C#, PHP or Java. I can view the data for it in Postman but when exporting the data via jQuery I got lots of errors with CORS. I need to enable Curl for it to work properly according to their docs so I abandoned this and found OMDB API. So I used similar jQuery code to the Weather API. This time I wrapped it into a form and use “event.preventDefault();” to stop the form from submitting. I skipped the html screenshots for this as it is a form with a div below it to place the data.
The first screenshot below is the JSON data for a TV show. I haven’t consumed all the available data as it is a bit much so I picked what I wanted which is shown in the second screenshot below with the jQuery. The code is very similar to the weather code.
This is the front end of the OMDB search. Search for a Tv show or a Movie and it gives details about it below the input.
I had some issues with this with the layout. I found a slightly different way to consume the JSON data with jQuery. When looking into different options for jQuery and JSON, I found there are alot of different ways to consume the data. Some are more complex than others but I found this to be rather simple and efficient.
Sadly I dont have validation on the search so if there is a typo or something entered that doesnt exist then it errors. I found it possible to have this option but I was unsure on implementation of it. So have left it working in a basic form.
