Exercise 11.3

This is Exercise 11.3, lecture on communicating with backend, used in the course IDATA2301 Web technologies at NTNU, campus Aalesund.

Go back to exercise list.

Purpose

The purpose of the exercise is practice sending asynchronous HTTP requests. There are several ways how to do it, you can choose any of it. The three ways shown in the lectures are:

• XMLHttpRequest, see example here.
• The fetch() function, with Promises, see example here.
• The fetch() function, with async and await , see example here.

Instructions

There is an API available at https://web-tek.ninja/php_backend/throw_a_dice.php. It simulates throw of a die - when you send an HTTP GET request to it, it returns a single number in the range 1..6, representing the value of a die. Your task is to create a simple website which utilizes the dice API.

1. Create a page with a button, with a text "Throw a die".
2. When the button is clicked, send an asynchronous HTTP GET request to the address https://web-tek.ninja/php_backend/throw_a_dice.php
3. Log the response text to the console to see that you get a response.
4. Add a paragraph (<p> element) to the page. Display a text there: "You threw X", where X is the value you got in the response from the API.

Solution

You can find a solution here.