Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Deutsche Übungen für Spaß und Profit</title>
    <style>
      html {
        background: #eee;
      }
      body {
        padding: 100px;
        text-align: center;
        color: #333;
        font-family: Helvetica, sans-serif;
      }
      strong {
        margin: 30px;
        display: block;
        font-size: 60px;
        line-height: 1.2;
      }
      small {
        color: #555;
      }
    </style>
  </head>
  <body>
    <strong>Loading...</strong>
    <small>Klicken Sie zum Aktualisieren</small>

    <script>
      const nouns = [
        'der Koffer',
        'der Kopf',
        'der Balkon',
        'der Mund',
        'der Ausweis',
        'der Urlaub',

        'die Treppe', // Stairway
        'die Uhr',
        'die Kerze',
        'die Laterne',
        'die Jacke',
        'der Herd',
        'die Tasche',

        'das Haar',
        'das Bad',
        'das Angebot',
        'das Bein', // Leg
        'das Sofa',
        'das Haus',
        'das Auto',
        'das Buch',
        'das Handy',
        'das Lied',
        'das Zelt',
      ];

      const subjects = [
        'Herrmann',
        'Klara',
        'Herr Müller',
        'Herr Husemann und mein Bruder',
        'mich und mein Freund',
        'meine Kollegen',
        'mein lieber Hund',
        'meine Katze Whiskers',
        'ich',
        'du',
        'mich und meine Schwester',
        'ihr',

      ];

      const verbs = [
        'finden',
        'suchen',
        'sehen',
        'bringen',
        'erzahlen',
        'abholen',
        'denken',
        'fotografieren',
        'malen',
        'genießen',
        'stellen',
        'packen',
        'vergessen',
        'verkaufen',
        'mieten',

      ];

      const modifier = [
        'ich',
        'du',
        'er',
        'sie',
        'es',

        'wir',
        'ihr',
        'sie (Pl.)',
        'Sie',

      ];


      const getRand = (list) => list[Math.floor(Math.random() * list.length)];

      const outputNode = document.querySelector('strong');
      const updateUI = () => {
        const result = `${getRand(subjects)} ${getRand(verbs)} ${getRand(nouns)}`;
        outputNode.innerHTML = result;
      };

      document.addEventListener('click', () => { updateUI() });
      document.addEventListener('keydown', ({ keyCode }) => { if ([32, 12].includes(keyCode)) updateUI(); });

      updateUI();
    </script>
  </body>
</html>