JSFiddle - React, Tailwind, and code Playground

by Ray Toal

HTML

<input type="number" id="number">
<p id="result">

JavaScript

const numberBox = document.getElementById("number");
const result = document.getElementById("result");

function collatzSteps(n) {
  if (isNaN(n) || n < 1 || n > 1000000 || !Number.isInteger(n)) {
    return "-";
  } else {
    let steps = 0;
    while (n !== 1) {
      n = (n % 2 === 0) ? n / 2 : 3 * n + 1;
      steps += 1;
    }
    return steps;
  }
}

numberBox.addEventListener('input', () => {
  result.innerHTML = collatzSteps(+numberBox.value);
});