JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
  <div id="mainDiv">
    <span type="text">SAP Community Coding Challenge Nr.2</span>
    <button type="button" id="button" onclick=onClick()>Calculate</button>
  </div>
  <div class="busy" id="busyIndicator"></div>
  <span type="text" id="SolutionText"></span>
  </body>
</html>

CSS

.busy {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #db197d;
    width: 48px;
    height: 48px;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

JavaScript

window.onload = ()=> {
      showBusy(false);
    };

    function onClick() {
      showBusy(true);
      document.getElementById("mainDiv").style.display = "none";
      setTimeout(() => calculateNum(), 0);
    }

    function calculateNum() {
      let sString = "";
      let oExternal = {
          iterators: 0,
          number: 0,
        };

      for (let i = 1; i < 1000000; i++) {
        let oInternal = {
          iterators: 0,
          number: i
        };

        oInternal = checkEven(oInternal);

        if (oInternal.iterators > oExternal.iterators) {
          oExternal.iterators = oInternal.iterators;
          oExternal.number = i;
        }
      }

      sString = "The solution is " +  oExternal.number + " with " + oExternal.iterators + " iterations";

      showBusy(false);
      let oSpan = document.getElementById("SolutionText");
      console.log(sString);
      console.log(oExternal.iterators);
      console.log(oExternal.number);
      oSpan.textContent = sString;
    }

    function checkEven(oInfo) {
      if (oInfo.number == 1) {
        return oInfo;
      }
      if (oInfo.number%2 == 0) {
        oInfo.number = oInfo.number/2;
        oInfo.iterators++;
        return checkEven(oInfo);
      } 

      oInfo.number = oInfo.number*3 + 1;
      oInfo.iterators++;
      return checkEven(oInfo);
    }

    function showBusy(bState) {
      document.getElementById("busyIndicator").style.display = bState ? "block" : "none";
    }