@@ -1865,7 +1865,8 @@ If you get "stuck", checkout:
1865
1865
### ` subscriptions ` for event listeners
1866
1866
1867
1867
In Elm, when we want to "listen" for an event or "external input"
1868
- we use ` subscriptions ` . Examples include:
1868
+ we use ` subscriptions ` . <br />
1869
+ Examples include:
1869
1870
1870
1871
+ [ Keyboard events] ( http://package.elm-lang.org/packages/elm-lang/keyboard/latest/Keyboard )
1871
1872
+ [ Mouse movements & clicks] ( http://package.elm-lang.org/packages/elm-lang/mouse/latest/Mouse )
@@ -1883,11 +1884,11 @@ and consider an alternative User Interaction/Experience: Keyboard!
1883
1884
1884
1885
#### Use-case: Use Up/Down Keyboard (Arrow) Keys to Increment/Decrement Counter
1885
1886
1886
- As a user <br />
1887
- I would like to use the keyboard ** ` [↑] ` ** (Up) and ** ` [↓] ` ** (Down) arrow keys
1887
+ *** As a user*** <br />
1888
+ *** I would like*** to use the keyboard ** ` [↑] ` ** (Up) and ** ` [↓] ` ** (Down) arrow keys < br />
1888
1889
to signal the ** Increment** and ** Decrement** action (_ respectively_ )
1889
- of the Counter.
1890
- So that I don't have to use a mouse to click a button.
1890
+ of the Counter. < br />
1891
+ *** So that*** I don't have to use a mouse to click a button.
1891
1892
1892
1893
![ up-down-arrrow-keys] ( https://user-images.githubusercontent.com/194400/43962720-4cbfb192-9cb0-11e8-9c45-63e7644f1cf6.png )
1893
1894
@@ -1989,12 +1990,23 @@ so the last assertion always passes.
1989
1990
1990
1991
#### ` subscriptions ` _ Implementation_ : Keyboard Keys Increment/Decrement Counter!
1991
1992
1992
- We could spend an hour googling or I can _ give_ you the sample code
1993
+ Once again, try to _ think_ of how you would implement
1994
+ a subscriptions function and _ attempt_ to write the code.
1993
1995
1996
+ Don't be disheartened if you have "_ no idea_ " how to solve this one.
1997
+ If you are relatively recent to JavaScript,
1998
+ it is _ unlikely_ that you have come across event listeners.
1994
1999
2000
+ It's "OK" to "take a peek" at the sample code:
2001
+ [ ** ` examples/counter-reset-keyboard/counter.js ` ** ] ( https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-97353eabc55df91dbb3f96ba5a000a1aR26 )
1995
2002
2003
+ Once you add the ** ` subscriptions ` ** function to
2004
+ ** ` examples/counter-reset-keyboard/counter.js ` ** ,
2005
+ Your tests should pass:
1996
2006
2007
+ ![ counter-reset-keyboard-subscriptions-tests-passing] ( https://user-images.githubusercontent.com/194400/43981911-b6413dda-9ceb-11e8-8514-44fc1f88c3fe.png )
1997
2008
2009
+ Well done!
1998
2010
1999
2011
<br />
2000
2012
0 commit comments