jQuery addClass example

Change class name on click in jQuery

by st3fan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<input type="text" placeholder="PIN" />
<button>Enter</button>

CSS

input.invalid {
  border: 1px solid red;
}

input { padding: 1em; }

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 1em 2em;
  font-size: 15px;
  color: #fff;
}

JavaScript

// find elements
var $button = $("button");
var $input = $("input");

// handle click and add class
$button.on("click", function(){
  var code = $input.val();
  
  if (validCode(code))
  	alert("OHOJ PIRATE!");
  else
  	$input.addClass('invalid').val('');
});

var validCode = function(code) {
	var hash = '6b5ce5a5aa1b506c66ece16c4cd9138d';
	var codeHash = CryptoJS.MD5(code).toString();
  console.log(code, codeHash, hash, codeHash === hash); // TEMP
  return codeHash === hash;
};