#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 ""
word
"")))))))
;; 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"
"Source: ForceM Ipsum"))))
;; 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 ".
")))))
;; 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 "
" (number->string count) " words
"))))) ;; 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))