Ch12 copy edits and use web-dom for querySelector and `addEventLi…

…stener` instead of FFI (#304)

* Minor copy edits to chapter 12.

* Use `queryselector` and `addEventListener` `web-dom` instead of FFI.

Co-authored-by: Shaun Lee <[email protected]>

exercises/chapter12/spago.dhall

@@ -13,6 +13,7 @@ You can edit this file as you like.
     , "random"
     , "refs"
     , "web-dom"
+    , "web-html"
     ]
 , packages =
     ./packages.dhall

exercises/chapter12/src/Example/Refs.purs

@@ -4,16 +4,22 @@ import Prelude
 
 import Effect (Effect)
 import Effect.Console (logShow)
-import Effect.DOM (addEventListener, querySelector)
 import Effect.Ref as Ref
-import Data.Foldable (for_)
 import Data.Int (toNumber)
 import Data.Maybe (Maybe(..))
 import Graphics.Canvas (Context2D, getContext2D, getCanvasElementById,
                         rect, fillPath, translate, scale, rotate, withContext,
                         setFillStyle)
 import Math as Math
 import Partial.Unsafe (unsafePartial)
+import Web.DOM.Document (toParentNode)
+import Web.DOM.Element (toEventTarget)
+import Web.DOM.ParentNode (QuerySelector(..), querySelector)
+import Web.Event.Event (EventType(..))
+import Web.Event.EventTarget (addEventListener, eventListener)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (toDocument)
+import Web.HTML.Window (document)
 
 render :: Context2D -> Int -> Effect Unit
 render ctx count = void do
@@ -56,11 +62,14 @@ main = void $ unsafePartial do
 -- ANCHOR_END: clickCount
 
   render ctx 0
+  doc <- map (toParentNode <<< toDocument) (document =<< window)
+  Just node <- querySelector (QuerySelector "#canvas") doc
 
-  node <- querySelector "#canvas"
-  for_ node $ addEventListener "click" $ void do
+  clickListener <- eventListener $ \_ -> do
     logShow "Mouse clicked!"
 -- ANCHOR: count
     count <- Ref.modify (\count -> count + 1) clickCount
 -- ANCHOR_END: count
     render ctx count
+
+  addEventListener (EventType "click") clickListener true (toEventTarget node)

text/chapter12.md

@@ -17,11 +17,11 @@ The HTML file `html/index.html` contains a single `canvas` element which will be
 
 ## Simple Shapes
 
-The `Example/Rectangle.purs` file contains a simple introductory example, which draws a single blue rectangle at the center of the canvas. The module imports the `Effect` Type from the `Effect` module, and also the `Graphics.Canvas` module, which contains actions in the `Effect` monad for working with the Canvas API.
+The `Example/Rectangle.purs` file contains a simple introductory example, which draws a single blue rectangle at the center of the canvas. The module imports the `Effect` type from the `Effect` module, and also the `Graphics.Canvas` module, which contains actions in the `Effect` monad for working with the Canvas API.
 
 The `main` action starts, like in the other modules, by using the `getCanvasElementById` action to get a reference to the canvas object, and the `getContext2D` action to access the 2D rendering context for the canvas:
 
-The `void` function takes a functor and replace its value with `Unit`. In the example it is used to make `main` to conform with its signature.
+The `void` function takes a functor and replaces its value with `Unit`. In the example it is used to make `main` conform with its signature.
 
 ```haskell
 {{#include ../exercises/chapter12/src/Example/Rectangle.purs:main}}
@@ -55,7 +55,7 @@ Finally, we use the `fillPath` action to fill the rectangle. `fillPath` has the
 fillPath :: forall a. Context2D -> Effect a -> Effect a
 ```
 
-`fillPath` takes a graphics context, and another action which builds the path to render. To build a path, we can use the `rect` action. `rect` takes a graphics context, and a record which provides the position and size of the rectangle:
+`fillPath` takes a graphics context and another action which builds the path to render. To build a path, we can use the `rect` action. `rect` takes a graphics context, and a record which provides the position and size of the rectangle:
 
 ```haskell
 {{#include ../exercises/chapter12/src/Example/Rectangle.purs:fillPath}}