JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<!DOCTYPE html>
	<title>captcha</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="captcha.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="style.css">

<body>
	<div class="container">
		<form>
			<p id="question"></p><input id="ans" type="text">
			<div id="message">Please verify.</div>
			<div id="success">Validation complete :)</div>
			<div id="fail">Validation failed :(</div>			
			<button type="submit" value="submit">Submit</button>
			<button type="reset" value="reset">Reset</button>
		</form>
	</div>
</body>

CSS

*{
	padding: 0;
	margin: 0;
}

html, body{
	font-family: 'Open Sans';
	font-weight: lighter;
	font-size: 12px;
	width: 100%;
	height: 100%;
}

#success, #fail{
	display: none;

}

#message, #success, #fail{
	margin-top: 10px;
	margin-bottom: 10px;
}

.container{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

p{
	display: inline;
	margin-right: 5px;
}

input, button{
	font-family: 'Open Sans';
	font-weight: lighter;
	font-size: 12px;
}

input{
	border: 1px solid #FFBBD7;
	width: 30px;
	height: 20px;
	text-align: center;
}

button{
	border: none;
    border-radius: 1.5em;
    color: #FFF;
    background: #FFBBD7;
    padding: 2.5px 10px;
    width: 75px;
    height: 30px;
    cursor: pointer;
    transition: background .5s ease-in-out;
}

button:hover:enabled{
	background: #303030;
}

button:disabled{
	opacity: .5;
	cursor: default;
}

JavaScript

var total;

function getRandom(){return Math.ceil(Math.random()* 20);}
function createSum(){
		var randomNum1 = getRandom(),
			randomNum2 = getRandom();
	total =randomNum1 + randomNum2;
  $( "#question" ).text( randomNum1 + " + " + randomNum2 + "=" );  
  $("#ans").val('');
  checkInput();
}

function checkInput(){
		var input = $("#ans").val(), 
    	slideSpeed = 200,
      hasInput = !!input, 
      valid = hasInput && input == total;
    $('#message').toggle(!hasInput);
    $('button[type=submit]').prop('disabled', !valid);  
    $('#success').toggle(valid);
    $('#fail').toggle(hasInput && !valid);
}

$(document).ready(function(){
	//create initial sum
	createSum();
	// On "reset button" click, generate new random sum
	$('button[type=reset]').click(createSum);
	// On user input, check value
	$( "#ans" ).keyup(checkInput);
});