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.