Improve and document frontend

/**

 * Query the api endpoint /api/v1/services, which returns a list of objects, each representing a service.

 * To see what a service object looks like, check the API documentation (linked below).

 * To see what a service object looks like, check the API documentation.

 * 

 * @see https://status.fsco.li/api/v1

 * @returns A list of service objects

    return `https://${serviceHost}`

}

const statusInterpretations = {

    200: ["Up", "green"],

    404: ["Down", "red"],

    401: ["Protected", "yellow"]

/**

 * "Interpret" a given HTTP status code, that is, return a list containing a human-readable label

 * (e.g. "Up") and a CSS color class (e.g. "green").

 * 

 * @param {int} statusCode An HTTP status code

 * @returns A list of the form ["Label", "color"]

 */

function getStatusInterpretation(statusCode) {

    switch(statusCode) {

        case 200: return ["Up", "green"]

        case 401: return ["Protected", "yellow"]

        default: return ["Down", "red"]

    }

}

/**

 * @returns A status badge HTML element

 */

function createStatusBadge(service) {

    // Destructuring assignment: We know the method returns a list with two elements.

    // We want to do assign the first element to a const statusName, and the second to a const cssClass.

    // This can be done in a oneliner:

    const [statusName, cssClass] = getStatusInterpretation(service.status)

    /* 

     * Create an HTML hyperlink element of the form

     * <a href="https://fachschaft.cl.uni-heidelberg.de" class="badge" target="_blank"></a>

     *

     * The class "badge" is used by some CSS code to style the link. target="_blank" ensures

     * the link will be opened in a new tab.

     */

    const [statusName, cssClass] = statusInterpretations[service.status]

    // Create an HTML hyperlink element of the form

    // <a href="https://fachschaft.cl.uni-heidelberg.de" class="badge green" target="_blank"></a>

    // The class "badge" is used by some CSS code to style the link. target="_blank" ensures

    // the link will be opened in a new tab.

    const a = document.createElement("a")

    a.href = getServiceUrl(service.host)

    a.target = "_blank"