JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<p>Which number is larger?</p>
<p><span id="result1"></span> or <span id="result2"></span></p>
<input type="number" id="myNumber">
<button type="button" onclick="checkNumber()">Submit</button>
<p><span style="color:red;" id="lock"></span></p>CSS
body { font-family: Arial; }JavaScript
randomNum();
function randomNum() {
fst = Math.floor(Math.random() * (99 - 10 + 1)) + 10;
snd = Math.floor(Math.random() * (99 - 10 + 1)) + 10;
if (fst == snd) {
randomNum();
}
else { document.getElementById('result1').innerHTML = fst;
document.getElementById('result2').innerHTML = snd;
}
}
function checkNumber() {
var winner;
fst = document.getElementById('result1').innerHTML;
snd = document.getElementById('result2').innerHTML;
if (fst > snd) { var winner = fst; }
else { var winner = snd; }
var myNum = document.getElementById('myNumber').value;
if (myNum == winner) {document.getElementById('lock').innerHTML = "Unlocked!";
document.getElementById('lock').style.color = "green";}
else {document.getElementById('lock').innerHTML = "Try Again!";
document.getElementById('lock').style.color = "red";
randomNum(); }
}