Laboratory 10 JavaScript [627210]

1
Laboratory 10 – JavaScript
In this laboratory we want to create a webpage with the following functionality:
• The webpage dynamically loads JSON data from the following online API:
https://jsonplaceholder.typicode.com/albums
(Consult https://jsonplaceholder.typicode.com and their documentation to see what
other APIs are avai lable and how to use them )
• When the webpage is loaded, 10 pieces of data are loaded initially
• The webpage has a “Load more data …” button, which whenever clicked, loads an other
5 pieces of new data in the table
• After the button has been clicked, it will be deactivated for 5 seconds:
o The button will turn gray
o It will display: “Timeout x s”, where x will count down from 5 seconds to 0 seconds
o The button will not accept a new click event while it’s deactivated
o After the passing of 5 seconds the button will reac tivate: turn green again and
start accepting click events

Figure 1. Page rendering with load
data button enabled
Figure 2. Page rendering with load data button
disabled during timeout
Task 01
Take the “index.html ” and “ style.css ” files from OneDrive and analyze their content.
Note that you will need to load the data in the table defined in the HTML document.
Study the stylesheet and look at what styles are used and how they are set up and why.

Web Technologies Laboratory 10 – JavaScript
2
Task 02
First, we will import data on page load. Write a function that imports one piece of data and
places it in the table. Then, on page load, call the function 10 times, in order to populate the
table with 10 pieces of data.
Task 03
Now, we need to import data when the button is clicked. In order to do this, you need to add
an event listener to the button. When the even listener is fired off, you can call the function
you’ve written in Task 02 five times, in order to import another five pieces of data. Note that
you will probably have to keep track of how many pieces of data you’ve imported so far in
total ( you’ll need a counter for all data imported) , so as not to import the same data again .
Task 04
Lastly, we need to disable the button for 5 seconds , after it was clicked. In order to do this:
• You need to remove the click event from the button after it was clicked
• Set the button styling to a gray background
• Implement a function that counts down 5 seconds (or a function that counts each second,
called 5 times)
• Display the time left on the button after each passed second
• After the 5 seconds have passed you need to re -enable the button: re -add the click
event and set the background color back to green
Upload your work to the a ssignment created and “Hand in” the a ssignment !