{"id":174,"date":"2022-01-17T11:35:12","date_gmt":"2022-01-17T11:35:12","guid":{"rendered":"https:\/\/kindsonthegenius.com\/elm\/?p=174"},"modified":"2022-01-17T11:46:34","modified_gmt":"2022-01-17T11:46:34","slug":"elm-parsing-user-input","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/","title":{"rendered":"Elm – Parsing User Input"},"content":{"rendered":"

In the previous lesson<\/a>, we covered how to grab user input from a TextBox using a button click event.<\/p>\n

    \n
  1. Update Model With User Input<\/a><\/li>\n
  2. Custom Function for Input Parsing<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Update Model With User Input<\/strong><\/h4>\n

    Now what we would like to do is to use the text entered in the text field to update the a field in the model. I’ll call this field score.<\/p>\n

    So let’s follow the steps<\/p>\n

    Step 1<\/strong> – Change the init method to include two more fields in the model like so:<\/p>\n

    init<\/span> =<\/span>\r\n    {value =<\/span> 877<\/span>,\r\n    firstName =<\/span> \"Kindson\"<\/span>,\r\n    score =<\/span> 99<\/span>}\r\n<\/pre>\n
     <\/p>\n
    Step 2<\/strong> – Import the toInt()<\/strong> <\/em>function from String in the import section. This is because, we expect a number to be input.<\/p>\n
    Step 3<\/strong> – We now want to update the score when the TextChanged message is called. So we’ll modify the case section of our update method by using the | operator to assign a new score to the model but keeping the model unchanged as we learnt earlier.<\/p>\n
    case<\/span> msg of<\/span>\r\n    Add<\/span> -><\/span>\r\n        {model |<\/span> value =<\/span>  20<\/span>}\r\n    TextChanged<\/span> newText -><\/span>\r\n        {model |<\/span> score =<\/span> toInt newText}\r\n<\/pre>\n
    What is happening here is that we are converting the newText to using toInt function and assigning the result to the score.<\/p>\n
    The problem here is that toInt() returns a a type ‘maybe’ while score if of type number.<\/p>\n
     <\/p>\n
    2. Custom Function to Handle Input<\/strong><\/h4>\n
    Now the user input from the TextBox when converted using toInt()<\/em> <\/strong>return ‘maybe’<\/em><\/strong> and the maybe could be either:<\/p>\n
    just val<\/strong> – this is returned when the conversion is successfully and the number equivalent (val) of the argument is returned.<\/p>\n
    Nothing<\/strong> – this is returned when the toInt() fails. For example, you try to convert “abc” to number using toInt()<\/p>\n
    Therefore in this custom function we will write, will simply return 0 when Nothing is returned by the toInt() function.<\/p>\n
    Our custom function is given below. I call it parseInput()<\/p>\n
    parseInput<\/span> text =<\/span> \r\n    let<\/span> \r\n        theMaybe =<\/span> toInt text\r\n    in<\/span>\r\n    case<\/span> theMaybe of<\/span> \r\n        Just<\/span> val -><\/span> \r\n            val\r\n        Nothing<\/span> -><\/span> \r\n            0<\/span>    \r\n<\/pre>\n
     <\/p>\n
    Now we can use out custom function in the update method like so<\/p>\n
    TextChanged<\/span> newText -><\/span>\r\n    {model |<\/span> score =<\/span> parseInput newText}\r\n<\/pre>\n
     <\/p>\n
    Finally we’ll modify the Add function to add the user input number to\u00a0 the model value. You can do this like so<\/p>\n
    Add<\/span> -><\/span>\r\n    {model |<\/span> value =<\/span>  model.<\/span>value +<\/span> model.<\/span>score}\r\n<\/pre>\n
     <\/p>\n
    Now you can go ahead to recompile the program. You will notice that when you click the button, the\u00a0 value in the TextBox is continually added to the score and displayed.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In the previous lesson, we covered how to grab user input from a TextBox using a button click event. Update Model With User Input Custom … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-174","post","type-post","status-publish","format-standard","hentry","category-elm-programming-tutorial"],"yoast_head":"\nElm - Parsing User Input - Elm Programming<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elm - Parsing User Input - Elm Programming\" \/>\n<meta property=\"og:description\" content=\"In the previous lesson, we covered how to grab user input from a TextBox using a button click event. Update Model With User Input Custom …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/\" \/>\n<meta property=\"og:site_name\" content=\"Elm Programming\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-17T11:35:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-17T11:46:34+00:00\" \/>\n<meta name=\"author\" content=\"kindsonthegenius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kindsonthegenius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-parsing-user-input\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-parsing-user-input\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#\\\/schema\\\/person\\\/2a5153913a1c6885206701c60aef361e\"},\"headline\":\"Elm – Parsing User Input\",\"datePublished\":\"2022-01-17T11:35:12+00:00\",\"dateModified\":\"2022-01-17T11:46:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-parsing-user-input\\\/\"},\"wordCount\":367,\"commentCount\":0,\"articleSection\":[\"Elm Programming Tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-parsing-user-input\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-parsing-user-input\\\/\",\"url\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-parsing-user-input\\\/\",\"name\":\"Elm - Parsing User Input - Elm Programming\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#website\"},\"datePublished\":\"2022-01-17T11:35:12+00:00\",\"dateModified\":\"2022-01-17T11:46:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#\\\/schema\\\/person\\\/2a5153913a1c6885206701c60aef361e\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-parsing-user-input\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-parsing-user-input\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-parsing-user-input\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elm – Parsing User Input\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#website\",\"url\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/\",\"name\":\"Elm Programming\",\"description\":\"Elm Programming Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#\\\/schema\\\/person\\\/2a5153913a1c6885206701c60aef361e\",\"name\":\"kindsonthegenius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"caption\":\"kindsonthegenius\"},\"sameAs\":[\"https:\\\/\\\/kindsonthegenius.com\\\/elm\"],\"url\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/author\\\/kindsonthegenius-3\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elm - Parsing User Input - Elm Programming","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/","og_locale":"en_US","og_type":"article","og_title":"Elm - Parsing User Input - Elm Programming","og_description":"In the previous lesson, we covered how to grab user input from a TextBox using a button click event. Update Model With User Input Custom …","og_url":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/","og_site_name":"Elm Programming","article_published_time":"2022-01-17T11:35:12+00:00","article_modified_time":"2022-01-17T11:46:34+00:00","author":"kindsonthegenius","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kindsonthegenius","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/#article","isPartOf":{"@id":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/kindsonthegenius.com\/elm\/#\/schema\/person\/2a5153913a1c6885206701c60aef361e"},"headline":"Elm – Parsing User Input","datePublished":"2022-01-17T11:35:12+00:00","dateModified":"2022-01-17T11:46:34+00:00","mainEntityOfPage":{"@id":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/"},"wordCount":367,"commentCount":0,"articleSection":["Elm Programming Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/","url":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/","name":"Elm - Parsing User Input - Elm Programming","isPartOf":{"@id":"https:\/\/kindsonthegenius.com\/elm\/#website"},"datePublished":"2022-01-17T11:35:12+00:00","dateModified":"2022-01-17T11:46:34+00:00","author":{"@id":"https:\/\/kindsonthegenius.com\/elm\/#\/schema\/person\/2a5153913a1c6885206701c60aef361e"},"breadcrumb":{"@id":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kindsonthegenius.com\/elm\/elm-parsing-user-input\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kindsonthegenius.com\/elm\/"},{"@type":"ListItem","position":2,"name":"Elm – Parsing User Input"}]},{"@type":"WebSite","@id":"https:\/\/kindsonthegenius.com\/elm\/#website","url":"https:\/\/kindsonthegenius.com\/elm\/","name":"Elm Programming","description":"Elm Programming Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kindsonthegenius.com\/elm\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kindsonthegenius.com\/elm\/#\/schema\/person\/2a5153913a1c6885206701c60aef361e","name":"kindsonthegenius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","caption":"kindsonthegenius"},"sameAs":["https:\/\/kindsonthegenius.com\/elm"],"url":"https:\/\/kindsonthegenius.com\/elm\/author\/kindsonthegenius-3\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts\/174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":6,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts\/174\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}