Todo list with columns in elm

todo.elm

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode as Json

type Position = ToBeDone | Doing | Completed
type alias Todo = { name : String, position : Position }

type alias Model =
  { todos : List Todo, newTodoName : String }
  
model : Model
model =
  { todos = [], newTodoName = "" }
  
type Action =
  Complete Todo
  | Do Todo
  | Undo Todo
  | NewTodoName String
  | CreateTodo
  | KeyDown Int

updateTodos todos todo =
  let
    newTodos =
      List.map (\t ->
        if t.name == todo.name then
          todo
        else
          t) todos
  in
    newTodos
    
addTodo todos todoName =
  if todoName == "" then
    todos
  else
    { name = todoName, position = ToBeDone } :: todos
        
update : Action -> Model -> Model
update action model =
  case action of
    Complete todo ->
      { model | todos = (updateTodos model.todos { todo | position = Completed }) }
    Do todo ->
      { model | todos = (updateTodos model.todos { todo | position = Doing }) }
    Undo todo ->
      { model | todos = (updateTodos model.todos { todo | position = ToBeDone }) }
    CreateTodo ->
      { model | newTodoName = "", todos = (addTodo model.todos model.newTodoName) }
    NewTodoName name ->
      { model | newTodoName = name }
    KeyDown key ->
      if key == 13 then
        { model | newTodoName = "", todos = (addTodo model.todos model.newTodoName) }
      else
        model
     
view model =
  let
    buttonStyling =
      [("border", "3px solid black")
      ,("background-color", "white")
      ,("padding", "4px")
      ,("color", "black")
      ,("margin", "6px")
      ,("font-size", "14px")
      ,("cursor", "pointer")]
      
    inputStyling =
      [("height", "25px")
      ,("font-size", "14px")]
      
    columnStyling =
       [("width", "28%")
       , ("float", "left")
       , ("border", "3px solid black")
       , ("margin", "1%")
       , ("padding", "1%")]
      
    actionButton todo =
      case todo.position of
        Completed ->
          button [ style buttonStyling, onClick (Undo todo) ] [ text "Undo" ]
        Doing ->
          button [ style buttonStyling, onClick (Complete todo) ] [ text "Done" ]
        ToBeDone ->
          button [ style buttonStyling, onClick (Do todo) ] [ text "Begin" ]
      
    displayTodo todo =
      div [style [("margin", "6px")]] [
        actionButton todo
        , text (" " ++ todo.name)
      ]
   
    todosDisplay filter =
      List.map (displayTodo) (List.filter filter model.todos)
      
  in 
    div [ style [("width", "100%")] ]
      [ div [style columnStyling] [
          h3 [] [ text "Todo" ]
          , input [ style inputStyling
            , placeholder "Add Todo"
            , on "keydown" (Json.map KeyDown keyCode)
            , onInput NewTodoName
            , value model.newTodoName ] []
          , button [ style buttonStyling, onClick CreateTodo ] [ text "Create" ]
          , div [] (todosDisplay (\x -> ToBeDone == x.position))
          ]
        , div [style columnStyling]
          ((h3 [] [ text "Doing"]) :: (todosDisplay (\x -> Doing == x.position)))
        , div [style columnStyling]
          ((h3 [] [ text "Completed"]) :: (todosDisplay  (\x -> Completed == x.position)))
      ]
    
main = beginnerProgram { model = model, update = update, view = view }