oke.

demo/dom-exercises.rkt

@@ -2,17 +2,50 @@
 
 (require "../main.rkt")
 
-(provide generated-js)
+(provide exercise01
+         exercise02
+         exercise03
+         all-dom-exercises
+         show-dom-exercises)
 
-(define generated-js
+;; These demos intentionally use only the compact js-maker 3 surface language:
+;; define, let/let*, return, set!, send, js-dot and ordinary function calls.
+
+;; Exercise 01: replace the paragraph HTML.
+(define exercise01
   (js
-   (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))))))
+   (define (replaceParagraphHtml html)
+     (let ([p (send document querySelector "p")])
+       (set! (js-dot p innerHTML) html)
+       (return (js-dot p innerHTML))))))
+
+;; Exercise 02: add a source link after the paragraph tag.
+(define exercise02
+  (js
+   (define (addSourceLink)
+     (let ([p (send document querySelector "p")])
+       (send p insertAdjacentHTML
+             "afterend"
+             "<a href=\"https://forcemipsum.com/\">Source</a>")
+       (return #t)))))
+
+;; Exercise 03: read text content from the first paragraph.
+(define exercise03
+  (js
+   (define (paragraphText)
+     (let ([p (send document querySelector "p")])
+       (return (js-dot p textContent))))))
+
+(define all-dom-exercises
+  `((exercise01 . ,exercise01)
+    (exercise02 . ,exercise02)
+    (exercise03 . ,exercise03)))
+
+(define (show-dom-exercises)
+  (for ([entry (in-list all-dom-exercises)])
+    (displayln (format "// ~a" (car entry)))
+    (displayln (cdr entry))
+    (newline)))
 
 (module+ main
-  (display generated-js))
+  (show-dom-exercises))