JSFiddle - React, Tailwind, and code Playground

by andrelaszlo

HTML

<button id="send">
  Oui, je m’inscris
</button>

<input type="range" id="speed" value="500" min="100" max="5000" step="100">

<p>
  Delay: <span id="state"></span> seconds
</p>

CSS

body {
  text-align: center;
  font-family: sans-serif;
  font-size: 1.5em;
}

button {
  font-size: 1.2em;
  margin: 2em auto 1em auto;
  width: 300px;
  display: block;
  font-weight: 800;
  text-transform: uppercase;
}

input[type="range"] {
  width: 300px;
}

JavaScript

var msgs = ["Oui, je m’inscris", "Mais grave !", "Oh oui !", "Carrément !"];
var btn = document.querySelector("#send");
var speed = document.querySelector("#speed");
var state = document.querySelector("#state");
var interval;

function updateMsg() {
  let msg = msgs.shift();
  msgs.push(msg);
  btn.innerHTML = msg;
}

function updateSpeed() {
	let delay = speed.value;
	clearInterval(interval);
  interval = setInterval(updateMsg, delay);
  state.innerHTML = delay/1000;
}

speed.addEventListener("input", updateSpeed);

updateSpeed();