RandomGenerateNumbers_v1

HTML

<body>


<table width="800" border="1" align="center">
<tr>
    <td id="generatedNum" colspan="6" align="left"><span>Random Numbers generated : 1</span></td>
</tr>      
<tr>
    <td colspan="3" align="center">Number 1</td>
    <td colspan="3" align="center">Number 2</td>
</tr>    
  
<tr>
    <td colspan="3" id="number1" class="numberStyle"><span>1</span></td>
 <td colspan="3" id="number2" class="numberStyle"><span>2</span></td>
</tr>
    
<tr height="50px";>
    <td colspan="6"><input type="button" value="MATCH!" style="font-size:50px;"></input></td>

</tr>
<tr>
    <td>Correct:</td>
    <td id="correctScore"><span>0<span></td>
    <td><span>Wrong<span></td>
    <td id="wrongScore"><span>0<span></td>
    <td><span>Missed<span></td>
    <td id="missedScore"><span>0<span></td>
        
</tr>
</table>

</body>
</html>

CSS

body{font-size:40px;
text-align:center;
background-color: antiquewhite;}
table {margin-top:100px;
background-color:white;}
td { width:150px;}
span {font-size:40px;}
#correctScore{
	background-color:green;
}
#wrongScore{
	background-color:red;
	
}
#missedScore{
	background-color:blueviolet;
	
}
.numberStyle {
    padding: 10px 10px 10px 10px; 
    color:blue;
}
    
.numberStyle span {
    font-size:100px;
}

JavaScript

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

document.getElementById('generate').addEventListener('click', function() {
  var num1 = getRandomInt(1, 3);
  var num2 = getRandomInt(1, 3);
  var output = (num1 === num2 ? 'Both numbers are the same' : 'Both numbers are different'); document.getElementById('output').innerHTML = output;
});