<p class="custom-random">Number</p>
<button  class="get-random">Get Random</button>
<div class="save-random">
  
</div>
<div class="otp">
  <label>Verify OTP : <label>
<input type="number" class="otp-input">
  <button class="otp">Verify</button>
</div>
.save-random {
    border-top: 1px solid #000;
    width: 200px;
    margin-top: 20px;
}
.save-random b {
    border: 1px solid #000;
    border-top: 0;
    background: #FF5722;
    padding: 5px 20px;
    font-weight: normal;
    display: block;
}
var count = 0,
  get;
$('.get-random').click(function() {
  min = Math.ceil(111);
  max = Math.floor(999);
  get = Math.floor(Math.random() * (max - min)) + min;
  $('.custom-random').text(get);
  count = count + 1;
  //$('.save-random').text(count);
  $('.save-random').append('<b>' + count + " : " + get + '</b>');
});
$('button.otp').click(function() {
  var input = $('.otp-input').val();
  if (get == input) {
    $('body').css('background', 'green');
  } else {
    $('body').css('background', 'red');
  }
  setTimeout(function() {
    $('body').css('background', '#fff');
  }, 3000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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