Einzelnote

Anzeige einer einzelnen Note

Im ersten Schritt wollen wir eine einzelne Note anzeigen. Dazu erstellen wir eine Funktion, die eine Note entgegennimmt und diese als HTML-Element darstellt. Eine allererste Version hat damit z.B. folgende Gestalt:

module Main exposing (main)

import Html exposing (..)
import Html.Attributes exposing (..)

viewNote : Int -> Html msg
viewNote note =
    p [] [ text (String.fromInt note) ]

main =
    viewNote 12

Aufgabe 1

Darstellung der Note

Die Note soll nicht einfach als schwarze Zahl dargestellt werden, sondern z.B. in grüner Farbe. Außerdem könnte man die Note in einem Kasten darstellen und die Breite des Kastens festlegen. Dazu müssen wir den CSS-Stil des HTML-Elements anpassen. Wir erreichen dies, indem wir die style-Funktion von Html.Attributes verwenden.

viewNote : Int -> Html msg
viewNote note =
    p
        [ style "color" "green"
        , style "background-color" "lightgrey"
        , style "width" "120px"
        ]
        [ text (String.fromInt note) ]

Aufgabe 2

(a) Experimentiere mit weiteren CSS-Eigenschaften und finde z.B. heraus wie du eine zentrierte Ausrichtung der Note erreichen kannst.

(b) Passe die Funktion viewNote so an, dass die Note grün dargestellt wird, wenn sie größer als 4 ist und rot, wenn sie kleiner oder gleich 4 ist.