Tutorial 05

For solutions, see Quiz 02.

To do this tutorial, you need to run a container first. Make sure Docker Desktop is running (the application is open on your system), and then run the following command in your terminal (Git Bash if you're on Windows):

docker run --rm -p 8080:8080 masoudkf/comp3512

Don't close your terminal as that would kill the container.

  1. For the following HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial</title>
</head>

<body>
    <figure></figure>
</body>
</html>

    Use the fetch API to request data from http://localhost:8080/q2q2 and extract the image URL from the response. Store this URL in a constant. Using Template Strings, create an <img> element with its src attribute set to the image URL. Finally, insert the <img> element as a child of the <figure> element on the page.

  2. For the following HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>

    Use the fetch API to request data from http://localhost:8080/q2q3 and add one row to the table for every expense item in the response. Note that you need to add the rows to the <tbody> element. Each row (<tr>) will have two columns (<td>): One for showing the item number (starting from 1), and one for the expense amount.

    This is the data returned from the server:

    {
    "expenses": [200, 1500, 600, 500, 700]
}

    For the above data, the table should appear like this on the webpage.



    Note that the number of expense items in the response could be different, so you shouldn’t assume it’s always 5 items with the values shown above. You also need to add a $ sign to the expense amount.