<h1>Generate a <em>Random Number</em> Between...</h1>

<input type="number" id="lownumber" value="1" />
and
<input type="number" id="highnumber" value="100" />

<br />

<button id="getit">Generate!</button>

<div id="randomnumber"></div>
body {
  font: 14px Georgia, serif;
  text-align: center;
}

h1 {
  font: bold 20px system-ui, Helvetica, Sans-Serif;
}

input[type="number"] {
  padding: 10px;
  color: #999;
  font: bold 20px system-ui, Helvetica, Sans-Serif;
  width: 60px;
  margin: 10px 0;
}
#randomnumber {
  font-size: 80px;
}
View Compiled 
function IsNumeric(n) {
  return !isNaN(n);
}

$(function () {
  $("#getit").click(function () {
    var numLow = $("#lownumber").val();
    var numHigh = $("#highnumber").val();

    var adjustedHigh = parseFloat(numHigh) - parseFloat(numLow) + 1;

    var numRand = Math.floor(Math.random() * adjustedHigh) + parseFloat(numLow);

    if (
      IsNumeric(numLow) &&
      IsNumeric(numHigh) &&
      parseFloat(numLow) <= parseFloat(numHigh) &&
      numLow != "" &&
      numHigh != ""
    ) {
      $("#randomnumber").text(numRand);
    } else {
      $("#randomnumber").text("Careful now...");
    }

    return false;
  });

  $("input[type=text]").each(function () {
    $(this).data("first-click", true);
  });

  $("input[type=text]").focus(function () {
    if ($(this).data("first-click")) {
      $(this).val("");
      $(this).data("first-click", false);
      $(this).css("color", "black");
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js