A mostly AI coded js-maker, supervised by me.

2026-05-26 09:42:35 +02:00
parent 8e8afc321b
commit 2cf831c180
23 changed files with 4143 additions and 1 deletions
@@ -0,0 +1,83 @@
+#lang racket/base
+
+(require "../main.rkt")
+
+(provide exercise01
+         exercise02
+         exercise03
+         exercise04
+         exercise05
+         all-dom-exercises
+         show-dom-exercises)
+
+;; JavaScript DOM Exercises 01 Tutorial: https://youtu.be/EHF7xBUAmrQ
+
+;; Exercise 01
+;; Highlight all words over 8 characters long in the paragraph text.
+(define exercise01
+  (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)))
+
+(module+ main
+  (show-dom-exercises))