loading...
Cover image for Elm Calculator Part 9 - Combination Key Input

Elm Calculator Part 9 - Combination Key Input

pianomanfrazier profile image Ryan Frazier Originally published at pianomanfrazier.com on ・2 min read

This post is part of a series. To see all published posts in the series see the tag "elm calculator book".If you wish to support my work you can purchase the book on gumroad.

This project uses Elm version 0.19

  • Part 1 - Introduction
  • Part 2 - Project Setup
  • Part 3 - Add CSS
  • Part 4 - Basic Operations
  • Part 5 - Adding Decimal Support
  • Part 6 - Supporting Negative Numbers
  • Part 7 - Add Dirty State
  • Part 8 - Support Keypad Input
  • Part 9 - Combination Key Input (this post)
  • Part 10 - Testing
  • Part 11 - Netlify Deployment

Users can press backspace to delete a single digit. How would we allow the user to clear the whole input area? Or clear the whole stack?

We'll provide a keyboard combination to support this. So we can allow users to press CTRL + BACKSPACE and it would clear the input box and CTRL + SHIFT + BACKSPACE would clear the whole stack.

We have already done the hard work in the previous chapter. We need to tweak our update function to check for CTRL + SHIFT or just CTRL before we check the other keys.

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ...
        HandleKeyboardEvent event ->
            if event.ctrlKey && event.shiftKey then
                case event.keyCode of
                    KK.Backspace ->
                        update ClearAll model
                    _ ->
                        ( model, Cmd.none )
            else if event.ctrlKey then
                case event.keyCode of
                    KK.Backspace ->
                        update Clear model
                    _ ->
                    ( model, Cmd.none )
            else
                case event.keyCode of
                    KK.Multiply ->
                        ...

And that's it. We now have key combos.

The next chapter will cover testing. We will write a test using elm-test and elm-program-test to verify our calculator.

Posted on by:

pianomanfrazier profile

Ryan Frazier

@pianomanfrazier

I love static site generators, Elm, JavaScript and building things for the web. In my previous life I was a working classical pianist. I try to combine music and programming when I can.

Discussion

pic
Editor guide
 

Thank you I have finished the tutorial. The combination part is so easy but I'll have to dig deeper.