i

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.

Suche

v
8.2.3.4.1.3
inf-schule.de/deklarativ/fp_elm/dynamischewebseiten/sportergebnisse/lernstrecke/grundstruktur
inf-schule.de/8.2.3.4.1.3
inf-schule.de/@/page/WVEyp93F99EsrlGH

Rückmeldung geben