A single-page application

This activity is about developing a very simple, single-page web application in HTML, CSS, and JavaScript. The point is to do this with basic JavaScript, i.e. using just the Fetch API and manipulating the DOM.

The purpose of the application is:

Setup

Because you will need a browser to run this application, it is best if you run it on your actual machine. After all, the point of web applications is that they are (sort of) portable, i.e. they are able to run and present virtually identical behaviour on all sorts of machines. (This is not entirely true however, because different JavaScript engines may fail to support various language features.)

A basic version of the app can be found at code/javascript/bristol-app in the repository. It comprises three files:

app.html
style.css
script.js

We will go through each one in detail. But before we do so, point your browser at app.html and try the application.