Kopieer je bestand mypowfuncpoints.elm naar mypowfuncpointsdraw.elm.
Voeg bovenaan in mypowfuncpointsdraw.elm het volgende toe:
import Svg exposing (..)
import Svg.Attributes exposing (..)
Vervang in mypowfuncpointsdraw.elm:
view model =
div []
[ input [onKeyDown KeyDown, onInput Input] []
, div [] [ text ("Result: " ++ model.outputData) ]
]
door:
view model =
div []
[ input [onKeyDown KeyDown, onInput Input] []
, svg [ viewBox "0 0 200 200", width "400px" ]
[ g [ transform "translate(100, 100) scale(1,-1)" ]
[ polyline [ fill "none", stroke "black", points model.outputData] []
, polyline [ fill "none", stroke "black", points(pointsListToString (powfuncpoints -100 1 100 [0]))] []
, polyline [ fill "none", stroke "black", points "0,-100 0,100"] []
]
]
]
Pas powfuncpointsTest zo aan dat de test gaat voor -100 <= x <= 100.
In het view model maak je een svg tag. Binnen deze svg tag maak je een polyline aan met als punten de uitkomst van:
model | outputData = powfuncpointsTest model.inputData
De andere twee polylines zijn de x-as en de y-as.
Zie https://www.w3schools.com/graphics/svg_polyline.asp als je meer over svg en polyline wilt weten.