Hey guys, I have written a program that stores and outputs values. I have to buttons an “add” button and a submit button. The add button should clear the input field (so its ready for a new input) and the submit button should output all the stored values (stored with the add button). At the moment I implemented it so when I press the add button I immediately receive the value in the output. But it should only be stored at that moment and then when pressing the submit button int should output all the values.
import Browser
import Html exposing (Html, Attribute, button, text, h1, h2, h3, p, div, input, text)
import Html.Attributes exposing (style)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Player =
{ player : String
, strength : Int
--, number : Int
--, playernumber : Int
--, placeholder : String
--, counter : Int
}
type alias Model =
{ content : String
, teams : List Player
, currentNumber : Int
, currentPlayernumber: Int
, currentPlayer : String
, currentStrength : Int
, placeholderPlayer : String
, placeholderCounter : Int
, placeholderStrength: Int
}
init : Model
init =
{ content = ""
, teams = []
, currentNumber = 0
, currentPlayernumber = 0
, currentPlayer = ""
, currentStrength = 0
, placeholderPlayer = ""
, placeholderCounter = 1
, placeholderStrength = 0
}
-- UPDATE
type Msg
= Change String
| ChangeNumber String
| ChangePlayernumber String
| ChangePlayer String
| ChangeStrength String
| Add
--| Submit String
update : Msg -> Model -> Model
update msg model =
case msg of
Change newContent ->
{ model | content = newContent }
ChangeNumber number ->
{ model | currentNumber = Maybe.withDefault 0 (String.toInt number) }
ChangePlayernumber playernumber ->
{ model | currentPlayernumber = Maybe.withDefault 0 (String.toInt playernumber) }
ChangePlayer player ->
{ model | currentPlayer = player }
ChangeStrength strength ->
{ model | currentStrength = Maybe.withDefault 0 (String.toInt strength) }
Add ->
{ model | teams = ({player = model.currentPlayer, strength = model.currentStrength} :: model.teams), currentPlayer = "", currentStrength = 0 }
{- Submit player ->
{ model | teams = } -}
-- VIEW
view : Model -> Html Msg
view model =
let
playername = "🏅 Player " ++ String.fromInt (List.length model.teams + 1)
in
div []
[ h1 [style "font-family" "impact"] [ text "Team Creator" ]
, p [style "font-family" "sans-serif", style "font-size" "15px", style "color" "grey"] [ text "With the Team Creator you can create teams. Insert information about the name and the strength(1-5) of every player and finally how many teams you want to have created by the Team Creator" ]
, h2 [style "font-family" "impact"] [ text "Number of Teams:" ]
, input [ placeholder "Number", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#32db64", value (String.fromInt model.currentNumber), onInput ChangeNumber] []
, h2 [style "font-family" "impact"] [ text "Players per Team:" ]
, input [ placeholder "Playernumber", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#32db64", value (String.fromInt model.currentPlayernumber), onInput ChangePlayernumber] []
, h2 [style "font-family" "impact"] [ text "Name and Strength:" ]
, div[] [ input [placeholder playername, style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#488aff", value model.currentPlayer, onInput ChangePlayer] [] ]
, input [ placeholder "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#4286F5", value (String.fromInt model.currentStrength), onInput ChangeStrength] []
, div [] [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "300px", style "border-radius" "25px", style "height" "40px", style "font-size" "20px", style "margin-right" "70px", onClick Add] [ text "+ADD Player" ] ]
, div [] [ button [ style "background-color" "#4286F5", style "color" "white", style "margin-top" "10px", style "width" "300px", style "border-radius" "25px", style "height" "40px", style "font-size" "20px", style "margin-right" "70px"] [ text "SUBMIT!" ] ]
, h2 [style "font-family" "impact", style "margin-top" "20px"] [ text "Generated Teams:" ]
, div [] (List.map (\{ player} -> div [] [ text player ]) model.teams)
]