Alles aangepast.

demo/dom-exercises.rkt

@@ -2,82 +2,17 @@
 
 (require "../main.rkt")
 
-(provide exercise01
-         exercise02
-         exercise03
-         exercise04
-         exercise05
-         all-dom-exercises
-         show-dom-exercises)
+(provide generated-js)
 
-;; JavaScript DOM Exercises 01 Tutorial: https://youtu.be/EHF7xBUAmrQ
-
-;; Exercise 01
-;; Highlight all words over 8 characters long in the paragraph text.
-(define exercise01
+(define generated-js
   (js
-   (let* ([p (send document querySelector "p")])
-     (set! p.innerHTML
-           (regexp-replace* #px"\\b\\w{9,}\\b"
-                            p.innerHTML
-                            (λ (word)
-                              (string-append "<span style=\"background: yellow\">"
-                                             word
-                                             "</span>")))))))
-
-;; Exercise 02
-;; Add a link back to the source of the text after the paragraph tag.
-(define exercise02
-  (js
-   (let* ([p (send document querySelector "p")])
-     (send p insertAdjacentHTML
-           "afterend"
-           "<a href=\"https://forcemipsum.com/\">Source: ForceM Ipsum</a>"))))
-
-;; Exercise 03
-;; Split each new sentence on to a separate line in the paragraph text.
-;; A sentence is assumed to be terminated with a period.
-(define exercise03
-  (js
-   (let* ([p (send document querySelector "p")])
-     (set! p.innerHTML
-           (regexp-replace* #rx"\\.\\s*" p.textContent ".<br>")))))
-
-;; Exercise 04
-;; Count the number of words in the paragraph tag and display the count
-;; after the heading. Words are separated by one singular whitespace.
-(define exercise04
-  (js
-   (let* ([heading (send document querySelector "h1")]
-          [p       (send document querySelector "p")]
-          [words   (regexp-split #rx" " p.textContent)]
-          [count   (length words)])
-     (send heading insertAdjacentHTML
-           "afterend"
-           (string-append "<p>" (number->string count) " words</p>")))))
-
-;; Exercise 05
-;; Replace question marks with thinking faces and exclamation marks with
-;; astonished faces.
-(define exercise05
-  (js
-   (let* ([p    (send document querySelector "p")]
-          [step (regexp-replace* #rx"\\?" p.innerHTML "🤔")]
-          [out  (regexp-replace* #rx"!" step "😲")])
-     (set! p.innerHTML out))))
-
-(define all-dom-exercises
-  `((exercise01 . ,exercise01)
-    (exercise02 . ,exercise02)
-    (exercise03 . ,exercise03)
-    (exercise04 . ,exercise04)
-    (exercise05 . ,exercise05)))
-
-(define (show-dom-exercises)
-  (for ([entry (in-list all-dom-exercises)])
-    (displayln (format "// ~a" (car entry)))
-    (displayln (cdr entry))
-    (newline)))
+   (define title (send document getElementById "title"))
+   (set! (js-dot title innerHTML) "Hello from js-maker")
+   (send title addEventListener "click"
+         (lambda (evt)
+           (begin
+             (send console log "clicked")
+             (return #t))))))
 
 (module+ main
-  (show-dom-exercises))
+  (display generated-js))