JSFiddle - React, Tailwind, and code Playground
HTML
<p>
Numbers 1-4 are winning numbers
</p>
<form id="form">
<input id="code" type="text" name="code" placeholder="Code" onfocus="this.placeholder=''" onblur="this.placeholder='Code'">
</form>
<button id="submit">Submit your number</button>
<div class="prize">
</div>
CSS
.prize{
display: none;
}
.prize.show{
display: block;
}
JavaScript
$( document ).ready(function() {
$( "#submit" ).click(function(){
$('.prize').addClass('show');
var prize = document.getElementById('code').value;
console.log(prize);
if (prize == 1){
$('.prize').html('<span style="color:red">YOU WIN AN IPAD</span>');
} else if (prize == 2){
$('.prize').html('<span style="color:red">YOU WIN AN IPAD</span>');
} else if (prize == 3){
$('.prize').html('<span style="color:red">YOU WIN AN IPAD</span>');
} else if (prize == 4){
$('.prize').html('<span style="color:red">YOU WIN AN IPAD</span>');
} else {
$('.prize').html('<span style="color:red">YOU WIN A PEN</span>');
}
});
});