Grundstruktur
Grundstruktur des Programms
Wir gehen im weiteren Verlauf davon aus, dass wir uns jeweils für Variante 1 entschieden haben, also ein Spiel als Record darstellen und einen einfachen Typ-Alias für eine Liste von Spielen verwenden. Falls du dich begründet für eine andere Variante entschieden hast, ist das auch in Ordnung.
Die Grundstruktur unseres Programms hat damit z.B. folgende Form:
module Main exposing (main)
import Html exposing (..)
type alias Model =
List Spiel
type alias Spiel =
{ heimmannschaft : String
, gastmannschaft : String
, heimtore : Int
, gasttore : Int
}
initialModel : Model
initialModel =
[ { heimmannschaft = "1. FC Kickerstadt", gastmannschaft = "SV Glück", heimtore = 3, gasttore = 1 }
, { heimmannschaft = "SC Helden", gastmannschaft = "VfB Katzenhausen", heimtore = 2, gasttore = 2 }
-- oder alternative Schreibweise mit Konstruktorfunktion:
, Spiel "FC Wollengernekönnenabernicht" "SG Tollhausen" 0 7
, Spiel "FC Hastenichtgesehn" "SV Krassekicker" 3 2
]
main =
div []
[ h1 [] [ text "Ergebnisse des Spieltags" ]
, -- Anzeige der Zahl der Spiele
]
Im Beispiel haben wir konkrete Spiele definiert, die wir
als initialModel speichern.
Der Name initialModel wird gerne benutzt, um zu verdeutlichen, dass es sich
um den Anfangszustand des Modells handelt.
In unserem Programm wird sich der Zustand des Modells nicht ändern,
da wir keine Interaktionen mit dem Benutzer vorsehen.
Du kannst auch einen anderen Namen wählen, wenn du möchtest.
Tipp zur Darstellung der Seite
Du kannst die Darstellung der Webseite mit Hilfe von CSS verschönern. Wenn du dich mit CSS auskennst, kannst du diese nach Belieben anpassen. Du kannst aber auch einfach ein CSS-Framework benutzen, das dann zwar nicht sehr individuell ist, aber schnell zu einem guten Ergebnis führt. Dazu kannst du den HTML-Code z.B. folgendermaßen anpassen:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
</head>
...
Aufgabe 1
Ergänze weitere Spiele in der Liste initialModel.
Verwende dabei die Schreibweise mit Record oder die Schreibweise mit Konstruktorfunktion.
Ergänze die Anzeige der Zahl der Spiele.
