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

---
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>