0
0 Comments

HTML Code

<!DOCTYPE html>
 <title>captcha</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 <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;
}

JS

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);
});

Jagdish Sarma Asked question March 22, 2023
Add a Comment