## Self Evaluation To evaluate the existing knowledge, a self-evaluation project was provided. A simple web page which displays a list of Swiss mountains which can be selected and displayed in a detail view. The project had to be implemented using only HTML, CSS and JavaScript.

Page Layout

The page layout was implemented using a simple CSS grid layout. The grid has three areas, a list, an image and a detail view. The list and image are displayed side by side, while the detail view is displayed below the image.

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Swiss Mountains</title>
</head>
<body>
    <main>
        <ul id="list"></ul>
        <picture id="img"></picture>
        <table id="detail"></table>
    </main>
</body>
</html>
  
  main {
    display: grid;
    grid-template-columns: 1fr 3fr; /* 1:3 ratio */
    grid-template-rows: 1fr auto; /* do not expand lower row */
    grid-template-areas:
        "list image"
        ". detail";
}

#list {
    grid-area: list;
    /*...*/
}

#image {
    grid-area: image;
    /*...*/
}

#detail {
    grid-area: detail;
    /*...*/
}

Data

The data is stored in a variable as an array of objects. Each object represents a mountain and contains the following properties:

  • ID: Unique identifier
  • Name: Name of the mountain
  • Height: Height of the mountain in meters
  • Type: Type of the mountain (e.g. peak, pass, etc.)
  • Region: Region of the mountain
  • Cantons: Cantons the mountain is located in
  • Range: Mountain range the mountain is part of
  • Isolation: Isolation of the mountain in meters
  • Isolation Point: Point where the isolation is measured
  • Prominence: Prominence of the mountain in meters
  • Prominence Point: Point where the prominence is measured
  • Caption: Short description of the mountain
  • Image URL: URL to an image of the mountain

The currently selected mountain is stored in a observable variable.

  const Observable = value => {
    let listeners = [];
    return {
        onChange: listener => listeners.push(listener), // add listener
        getValue: () => value,
        setValue: newValue => {
            if (value === newValue) return; // prevent unnecessary updates if nothing changed
            value = newValue;
            listeners.forEach(listener => listener(value)); // notify listeners
        }
    };
};

const SelectedMountain = Observable(null);
SelectedMountain.onChange(mountain => {
    // update detail view and image
});