JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<h1>Form Dummy Demo</h1>

<form method="GET" id="code-form">
  <div class="form-field">
    <input type="text" name="code" id="code" placeholder="Enter a code..." class="input">
  </div>

  <button type="submit" class="button">
    Submit Code
  </button>
</form>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1 {
  font-family: "Helvetica", "Arial";
  color: #898989;
}

.form-field {
  margin-bottom: 15px;
}

.input {
  border: 2px solid #CCD1D9;
  padding: 10px 8px;
  width: 100%;
}

.input-success {
  border-color: #A0D468;
}

.input-error {
  border-color: #ED5565;
}

.button {
  background-color: #656D78;
  color: #F5F7FA;
  padding: 10px 15px;
  border: none;
  width: 100%;
}

JavaScript

var codeForm = document.querySelector('#code-form');
var codeInput = codeForm.querySelector('#code');
var correctCode = '123456789';

codeForm.addEventListener('submit', function (e) {
	e.preventDefault();
  
  if (codeInput.value == correctCode) {
		alert("Here's your alert for success message.");
    codeInput.classList.add('input-success');
    return;
  }
  
  alert("Here's your alert for error message.");
  codeInput.classList.add('input-error');
});

codeInput.addEventListener('keyup', function () {
	if (this.classList.contains('input-error')) {
  	this.classList.remove('input-error');
  }
  else if (this.classList.contains('input-success')) {
  	this.classList.remove('input-success');
  }
});