Difficulty getting Timer to operate according to Math.random

Here it’s done with much less code, albeit with some naughty code :grinning:

1 Like

Not quite

starts counting down in minus numbers use < 0 instead of == -1

It continues counting down indefinitely. Of course you could hide the count after it turns yellow.

According to the start of this
Process: Person chooses a staging countdown number for the initial black screen, then it moves to the yellow screen. That works. The following script obtains a random number from 1-6 secs and puts it into the timer and the screen is yellow.

With the completion of the timer, the screen goes green for 5 secs, the resets back to the home screen, ready to start the sequence again.
Black, yellow, green and back to black
This sateen almost does it

Don’t know why the pen is so small and the html elements are so large.
So you need to scroll
Also it runs differently in chtome to how it runs in safari.
In Chrome it runs correctly.

I found that the random number mostly returned small numbers so I changed the range of random numbers.

With possibly far too much code, but closer to Paul and WebSteve’s version.

html

<body>
  <div id='staging-content'>
    <main id='countdown-content'>
      <section id='countdown-options-content'>
        <header class='countdown-options-header'>
          <h1>Ready, Set, Go</h1>
          <h2>Staging Duration (seconds)</h2>
        </header>

        <section class='timer-options'>
          <button id='button-05-seconds' type='button' value='5'>5</button>
          <button id='button-10-seconds' type='button' value='10'>10</button>
          <button id='button-15-seconds' type='button' value='15'>15</button>
        </section>
      </section>

      <section id='timer-display-content'>
        <h1 id='timer-display'></h1>
      </section>
    </main>
    <footer id='start-over'>
      <button class='start-over' type='button'>Start Over</button>
    </footer>
  </div>
<script src='./scripts/race-staging.js'></script>
</body>

css


/* defining the stage colour as a css variable */
:root {
  --stage-bgColor: black;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  font-family: arial, sans-serif;
  margin: 0;
  background-color: var(--stage-bgColor);
}

#staging-content {
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2em;
}

#countdown-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: white;
}

.timer-options {
  display: flex;
  gap: 1em;
  height: 5em;
}

#timer-display-content {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

#timer-display {
  font-size: 16em;
  margin: 0;
  display: none;
}

/* toggle the hidden class to show or hide countdown */
#timer-display.show {
  display: block;
}

.hidden {
  display: none;
}

#staging-content button {
  display: block;
  border-radius: 5px;
  font-weight: bold;
  font-size: 2em;
  color: white;
  width: 100%;
  background-color: #666;
  transition: color .3s linear;
  cursor: pointer;
}

#staging-content button:hover {
  background-color: #888;
}

#start-over button {
  font-size: 3em;
}

javascript

window.addEventListener('DOMContentLoaded', () => {
  const doc = window.document

  function getRandomIntInclusive (min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }

  // Stage callbacks
  function stagingCountdown (count) {
    countdown({
      count,
      bgColor: 'black',
      isVisible: true,
      callback: yellowCountdown
    })
  }

  function yellowCountdown () {
    countdown({
      count: getRandomIntInclusive(1, 6),
      bgColor: 'yellow',
      isVisible: false,
      callback: greenCountdown
    })
  }

  function greenCountdown () {
    countdown({
      count: 2,
      bgColor: '#3ddc32',
      isVisible: false,
      callback: resetAll
    })
  }

  function setLight (bgColor) {
    const root = doc.documentElement
    root.style.setProperty('--stage-bgColor', bgColor)
  }

  const countdownOptions = doc.getElementById('countdown-options-content')
  const timerDisplay = doc.getElementById('timer-display')
  let timer = null

  function startCountingFrom (event) {
    countdownOptions.classList.add('hidden')
    stagingCountdown(event.target.value)
  }

  function countdown ({ count, bgColor, isVisible, callback }) {
    timerDisplay.classList.toggle('show', isVisible)
    setLight(bgColor)

    function updateCounter (count) {
      timerDisplay.textContent = count

      timer = setTimeout(() => {
        if (count > 1) {
          updateCounter(count - 1)
        } else {
          callback()
        }
      }, 1000)
    }

    updateCounter(count)
  }

  // no redirects
  function resetAll () {
    timerDisplay.classList.remove('show')
    countdownOptions.classList.remove('hidden')

    clearTimeout(timer)
    setLight('black')
  }

  // EventListeners
  const timerButtons = doc.querySelectorAll('.timer-options button')

  timerButtons.forEach(
    (button) => button.addEventListener('click', startCountingFrom)
  )

  const resetButton = doc.querySelector('#start-over button')

  resetButton.addEventListener('click', resetAll)
})

codepen

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.