<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);
});
This Pen doesn't use any external CSS resources.