JSFiddle - React, Tailwind, and code Playground

HTML

<form>
      <label>Number of Clicks Before Reset:</label>
      <br/>
      <input id="resetClicks" type="text" value="100">
      <br/>
      <label>Flash Delay (ms)</label>
      <br/>
      <input id="flashDelay" type="text" value="200">
      <br/>
      <label>Flash Length (ms)</label>
      <br/>
      <input id="flashLength" type="text" value="200">
      <br/>
    </form>
    <div id="strobe"></div>
    <button>Flash</button>

CSS

body {
          background-color: #ccc;
      }

      form {
          padding: 1em;
      }

      #strobe {
          border: 1px solid black;
          height: 500px;
          width: 500px;
      }

      button {
          width: 500px;
          height: 50px;
          border-radius: 10px;
      }

JavaScript

(function() {
    saved = false
    delay = -1
    clicks = -1
    flashLength = -1

    $strobe = $("#strobe")
    $resetClicks = $("#resetClicks")
    $flashDelay = $("#flashDelay")
    $flashLength = $("#flashLength")
    $button = $("button")

    function flashOff() {
        $strobe.css("background-color", "transparent")
    }

    function flashOn() {
        $strobe.css("background-color", "#ffffff")
        setTimeout(flashOff, flashLength)
    }

    function scheduleFlash() {
        console.log("flash delay = " + delay)
        setTimeout(flashOn, delay)
    }

    function maybeReset() {
        if (delay > 0 && clicks >= resetClicks) {
            delay = 0
        }
    }

    function disableFields() {
        $resetClicks.prop("disabled", true)
        $flashDelay.prop("disabled", true)
    }

    function saveConfig() {
        delay = $flashDelay.val()
        resetClicks = $resetClicks.val()
        flashLength = $flashLength.val()
        saved = true
    }

    $("button").click(function() {
        if (!saved) {
            saveConfig()
            disableFields()
        }

        clicks++

        scheduleFlash()
        maybeReset()
    })
})()