Description
In this exercise we display weather forecasts. We use JavaScript to make the presentation interactive: download the data from the internet and display it dynamically.
DOM API
The DOM API allows JavaScript to completely control (edit, add, remove) the HTML objects constituting the web page. Please look at the example in documentation, we will be using similar operations.
We start, as usual, with the page in exercise/index.html. Please edit the files exercise/exercise_weather.js
and exercise/style_weather.css
to complete the exercise.
-
On Click – The page contains a button with the id
btn-part1
. Find it and register a JS function to be executed when the button is clicked. For now, the function should write “The button was clicked” to the console, so we can check if it executes properly upon click.
Note – Ensure the DOM has been loaded: we should make sure that the HTML has been loaded (and therefore, the button and other elements already exist) before we execute our script. Use the provided function whenDocumentLoaded
to achieve that (about DOMContentLoaded event).
-
Show the temperatures – Given an array of forecast temperatures (such as the array
TEST_TEMPERATURES
), we want to display them in order. Create a functionshowTemperatures(container_element,
such that:
temperature_array)-
Clears the
container_element
’s content, for example by setting the innerHTML to “”. -
For each temperature value in
temperature_array
, it creates a<p>
element with the temperature value inside (for example<p>13</p>
). Please practoce a functional iteration method instead of an explicitfor
/while
loop. -
Places the
<p>
s incontainer_element
.
-
Use that function to display the temperatures from TEST_TEMPERATURES
in the div with id weather-part1
.
-
Colors with CSS classes – Change the background color of the
<p>
depending on the temperature value. Create the classeswarm
andcold
inexercise/style_weather.css
with appropriate background colors. In yourshowTemperatures
function, apply the appropriate CSS class to the created elements:-
warm
for temperature 23 C or higher, -
cold
for temperature 17 C and lower.
-
JS Classes
Classes allow us to organize our program around objects (“object-oriented programming”) and makes code easier to reuse – do the same actions with many objects. An object contains data (called properties) and functions (called methods).
First, we convert the code from the previous part into a class.
-
Create a
Forecast
class, which has the following properties:-
container
– the element in which the temperatures will be written, the initial value should be given as an argument to the constructor, -
temperatures
– current value of the temperature forecast, should be initialized to[1,2,3,4,5,6,7]
.
-
Thus we create the object as new
. Instantiate the class, giving it the div with id
Forecast(container_div)weather-part2
as the container.
-
Add a
toString
method which writes its attributes to a string. -
Add a
print
method which prints that string to the console. -
Adapt
showTemperatures
to create ashow
method which takes no arguments and instead displays the object’stemperatures
in itscontainer
. -
Add a
reload
method which will be loading and displaying our data:-
sets the
temperatures
property toTEST_TEMPERATURES
(we will change it to real data later), -
calls
show
.
-
-
Upon the click of the button, call the
reload
method. Check if the temperatures are properly displayed.
Inheritance (extends) allows us to create a sub-type with different behaviour (for example class
). In our case, we will extend the
Dog extends AnimalForecast
class to change its data source: the child class ForecastOnline
will download its data from the internet to provide a real forecast.
-
Create the class
ForecastOnline
which overrides thereload
method and sets the temperature to[2,
(we will get the real data in the next section). Instantiate
3, 4, 5, 6, 7, 8]ForecastOnline
with div with idweather-part3
and test if it shows the temperatures.
fetch
ing JSON data from the internet
The data displayed in a visualization is most often not part of the code. Instead it is stored in data files and downloaded separately from our server or an external service.
This data can be downloaded using the Fetch API. Fetching is an asynchronous operation (we have to wait some time for the response), therefore it uses JS Promises. Please read the linked documentation to see the examples.
We can get a forecast in the JSON format using the API of www.weatherbit.io (either you use the following key or you make a free registration to the API and you use your own key), for example the query for Lausanne is:
const QUERY_LAUSANNE = 'http://api.weatherbit.io/v2.0/forecast/daily?city=Lausanne&days=7&key=ed330abe3f5a4104afd9a6ef10b707ca';
-
Use
fetch
to download the JSON from this URL, convert the JSON to a JS object and store the result to a global variable. Experiment with that value in the developer console to find out how to get the temperatures. -
Create a function
weatherbitToTemperatures
which will extract the temperatures from the data. Since the API provideslow
andhigh
temperature bounds, please calculate the mean of those values and return it as the result. -
In
ForecastOnline
’sreload
method, download the forecast from the specified URL and store it in thetemperatures
property, then callshow
. Please remember thatshow
has to be executed after the data is downloaded (when the promise fires).
Optional: Interactive choice of the city
If you feel confident with DOM, fetch and classes, let’s combine them all into a more advanced system.
-
Create a class
ForecastOnlineCity
which allows fetching the forecast for any city:-
Add some mechanism of inputting the city name, for example a method
setCity
. -
Override
reload
to fetch the URL for the chosen city. -
Override
show
to also display the name of the city. You can usesuper.show()
to call the method in the parent class. insertBefore can be useful to insert the city name before the temperature.
-
-
Upon the click of the button with id
btn-city
, read the.value
of the input with idquery-city
, then use yourForecastOnlineCity
object to perform the query.