29.6. Assignments DE.2

version="5.0" xmlns="http://docbook.org/ns/docbook" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xi="http://www.w3.org/2001/XInclude">
Submission
You must submit assignments using git
Create Repo
  • Create an empty repo on bitbucket.org, gitlab.com, or github.com,
  • git push your local repo to the above remote repo.
  • For node assignments the line node_modules/must be in your .gitignore file.
Submit
By email to with:
  • The word 'submission <subjectname>' in the subject line
  • The url(s) of your repo(s) in the body

Todays assignments require a bit of JavaScript that might be easier after the next JavaScript lesson. We shall give you an example that closes the gap.

Example 29.2. HTML5/JavaScript Demo with Form, de20/formdemo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Demoing Aspects of Forms</title>
    <meta name="generator" content="Geany 1.37.1" />
    <script>
        const $ = function (foo) {
            return document.getElementById(foo);
        };
        const catcher = function (e) {
            let t1 = $('it1').value;
            $('res').innerHTML = t1 - 0;
            e.preventDefault();
            return false;
        };
        const init = function () {
            $('formalisme').addEventListener('submit', catcher);
        };
        window.addEventListener('load', init);
    </script>
</head>

<body>
    <h1>Demoing Aspects of Forms</h1>
    <form id='formalisme' action='#' method='post'>
        <p>
            Indtast en tæller:<br/>
            <input id='it1' name='t1' type='text'/>
        </p>
        <p>
            <input type='submit' value='Go!'/>
        </p>
    </form>
    <article>
        <p id='res'></p>
    </article>
</body>
</html>

Testit!


29.6.1. Assignment DE.2.0

Today we shall work in groups. You must use the Belbin groups from the intro.

Your task is to create a limited size static website. A front page with a menu to access each of the subject pages. You must write one stylesheet to use on all pages. Coordinate your work so that each of the group members is responsible for at least one of the following:

  1. Front page index.html, and stylesheet styles.css
  2. A page that lets the user enter a running distance, and the time it has taken to run it. Two items of data. The page must return, in hh:mm:ss, hours, minutes, and seconds, the time per kilometer, or, optionally, per mile.
  3. A page that allows the user to enter two fractions. A fraction consists of a numerator and a denominator. The page must return which of the fractions is larger, and by how much.
  4. A page that allows the user to enter two fractions. A fraction consists of a numerator and a denominator. The page must return the reduced fraction. In order to reduce a fraction you must use the gcd, greatest common denominator, and divide that into numerator as well as denominator.

    The greatest common denominator is calculated by:

    /* Euclid's Algorithm for gcd */
    const gcd = function (a, b) {
        if (b == 0) {
            return a;
        } else {
            return gcd(b, a % b);
        }
    }
  5. A page that allows executing an experiment calculating how many times on average you must roll 2 dice before you get say two sixes. When the page has a result, it must repeat the experiment a number of times. The number of times as well as the desired outcome, must be entered by the user.

    Say you want 10 experiments for finding 2 sixes, you must enter 10, 6, 6. If you want 100 experiments, and you look for a 3, and a 4, you must enter: 100, 3, 4.

    Each experiment will return a number. If you run 10 experiments the average number will be the result of the sequence of experiments. Print that number with a text that identifies it. This means thhat whether you run 10, 1000, or 1000000 experiments, one number will be returned.

Coordinate the work, so that each group member works on his/her own file. In the end there's a repo with the whole site. The hand in must be the url for that repo.

Whenever a group member has made some changes, commit and test. If the test is succesfull, push to the server.