Brackets validator

by zhukovroman

HTML

<input type="text" />

CSS

* {
  font-size: 1.2em;
}

input {
  width: 98%;
  padding: 0.2em;
}

.error {
  background-color: #ffc6c6;
}

.valid {
  background-color: #bdffc6;
}

JavaScript

var input = document.querySelector('input');

function isValid() {
  var str = input.value,
    openers = '<{[(',
    closers = '>}])',
    arr = [],
    valid = true;

  for (var i = 0, len = str.length; i < len; i++) {
    if (openers.indexOf(str[i]) >= 0) {
      arr.push(openers.indexOf(str[i]));
    } else if (closers.indexOf(str[i]) >= 0) {
      if (closers.indexOf(str[i]) != arr.pop()) {
        valid = false;
      }
    }
  }

  if (arr.length) {
    valid = false;
  }

  input.className = valid ? 'valid' : 'error';
}

input.addEventListener('keyup', isValid)