Add memory hex setup examples

project/memory-hex/exercises/01_button-setup.Rmd

@@ -0,0 +1,36 @@
+---
+example:
+  title: Timer Button
+  instructions: Add an event listener to toggle the `#timer-button` between **start**
+    and **stop** states.
+  hint: Use the button's `value` to track whether the next action should be `'start'`
+    or `'stop'`.
+  solution:
+    js: |+2
+      const timerBtn = document.getElementById('timer-button')
+      
+      timerBtn.addEventListener('click', ev => {
+        const btn = ev.currentTarget
+        const action = btn.value
+        console.log(action)
+      
+        if (action === 'start') {
+          btn.value = 'stop'
+          btn.textContent = 'Stop Timer'
+        } else if (action === 'stop') {
+          btn.value = 'start'
+          btn.textContent = 'Start Timer' 
+        }
+      })
+    css: ~
+output: js4shiny::html_document_plain
+
+---
+
+<div class="controls">
+  <button id="timer-button" value="start">Start Timer</button>
+</div>
+
+<div id="timer">
+  <span id="timer-minutes">00</span>:<span id="timer-seconds">00</span>
+</div>

project/memory-hex/exercises/02_compare-time.Rmd

@@ -0,0 +1,39 @@
+---
+example:
+  title: Compare Time
+  instructions: Find the number of minutes and seconds between `then` and `now`
+  runtime: repl_js
+  initial:
+    js: |+2
+      const then = new Date()
+      // or enter a time stamp for a not too distant date & time
+      // const then = new Date("2019-12-02 12:24:00")
+
+      setTimeout(() => {
+        const now = new Date()
+        console.log({then, now, diff: now - then})
+      }, 2123)
+  solution:
+    js: |+2
+      const then = new Date()
+      // const then = new Date("2019-12-02 12:24:00")
+
+      setTimeout(() => {
+        const now = new Date()
+        let seconds = Math.floor((now - then) / 1000)
+        
+        let minutes = 0
+        if (seconds >= 60) {
+          minutes = Math.floor(seconds / 60)
+          seconds = seconds - minutes * 60
+        }
+        
+        minutes = (minutes < 10 ? '0' : '') + minutes
+        seconds = (seconds < 10 ? '0' : '') + seconds
+        
+        console.log({seconds, minutes})
+      }, 2123)
+
+    css: ~
+output: js4shiny::html_document_plain
+---

project/memory-hex/exercises/03_button-timer.Rmd

@@ -0,0 +1,76 @@
+---
+example:
+  title: Timer Button
+  instructions: >
+    Create a function called `updateTimer()` containing the timer updating logic.
+    Then use `setInterval(updateTimer, 1000)` to update the timer every second
+    when the user clicks **Start**.
+  hint: >
+    Store the timer id in the button node and use `clearInterval()` to stop the timer
+    when the user clicks **Stop**.
+  initial:
+    js: |+2
+      const timerBtn = document.getElementById('timer-button')
+      
+      timerBtn.addEventListener('click', ev => {
+        const btn = ev.currentTarget
+        const action = btn.value
+        console.log(action)
+      
+        if (action === 'start') {
+          btn.value = 'stop'
+          btn.textContent = 'Stop Timer'
+        } else if (action === 'stop') {
+          btn.value = 'start'
+          btn.textContent = 'Start Timer'
+        }
+      })
+  solution:
+    js: |+2
+      const timerBtn = document.getElementById('timer-button')
+
+      const updateTimer = () => {
+        const then = timerBtn.startTime
+        const now = new Date()
+        let seconds = Math.floor((now - then) / 1000)
+        
+        let minutes = 0
+        if (seconds >= 60) {
+          minutes = Math.floor(seconds / 60)
+          seconds = seconds - minutes * 60
+        }
+        
+        minutes = (minutes < 10 ? '0' : '') + minutes
+        seconds = (seconds < 10 ? '0' : '') + seconds
+        
+        document.getElementById('timer-minutes').textContent = minutes
+        document.getElementById('timer-seconds').textContent = seconds
+      }
+      
+      timerBtn.addEventListener('click', ev => {
+        const btn = ev.currentTarget
+        const action = btn.value
+      
+        if (action === 'start') {
+          btn.value = 'stop'
+          btn.textContent = 'Stop Timer'
+          btn.startTime = new Date()
+          btn.timerId = setInterval(updateTimer, 1000)
+        } else if (action === 'stop') {
+          btn.value = 'start'
+          btn.textContent = 'Start Timer'
+          clearInterval(btn.timerId)
+        }
+      })
+    css: ~
+output: js4shiny::html_document_plain
+
+---
+
+<div class="controls">
+  <button id="timer-button" value="start">Start Timer</button>
+</div>
+
+<div id="timer">
+  <span id="timer-minutes">00</span>:<span id="timer-seconds">00</span>
+</div>