This post is part of a series. If you wish to support my work you can purchase the PDF 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
- browse: https://gitlab.com/pianomanfrazier/elm-calculator/-/tree/v0.9
- diff: https://gitlab.com/pianomanfrazier/elm-calculator/-/compare/v0.9...v0.10
- ellie: https://ellie-app.com/72nYc5Zj9Hma1
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.