<main>
  <h2>Random Number Between Two Numbers with JavaScript</code></h2>

  <p>Choose min and max values using the inputs below. Then use the button to generate a random number between the two values (inclusive).</p>

  <div class="inputs">
    Min: <input type="number" value="1" step="1" min="0" class="min"> Max: <input type="number" value="20" step="1" class="max"><br>
    <button>Get Random Number</button>
    <output></output>
  </div>

</main>
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

.inputs {
  text-align: center;
}

input {
  width: 100px;
  text-align: right;
  line-height: 1.4;
}

button {
  display: block;
  margin: 10px auto;
}

output {
  display: block;
  color: red;
  padding: 10px 0;
  font-size: 1.3em;
}
let op = document.querySelector('output');

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

function checkValues () {
  if (document.querySelector('.min').value < document.querySelector('.max').value) {
    op.innerHTML = randomInteger(+document.querySelector('.min').value, +document.querySelector('.max').value);
  } else {
    op.innerHTML = "Min value must be lower than Max value.";
  }
}

document.querySelector('button').addEventListener('click', function () {
  checkValues();
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.