#lang racket/base

(require "../main.rkt")

(provide exercise01
         exercise02
         exercise03
         all-dom-exercises
         show-dom-exercises)

;; 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 (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
  (show-dom-exercises))