Validate Brackets

Developed UI for quick develop problem solving logic

by RaviMakwana

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div id="banner-message">
  <p>Validate Brackets</p>
  <input class="form acidTrip " value="(())" onchange="validateBrackets(this.value)"/><br/> 
  <label></label><br/> 
</div>

CSS

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

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

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

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}


@keyframes acidTrip {
  from {
    filter: hue-rotate(0deg);
    width: 0;
  }
  50% {
    filter: hue-rotate(360deg);
  }
  to {
    filter: hue-rotate(0deg);
    width:100px;
  }
}

.acidTrip {
  animation-name: acidTrip;
  color: white;
  background-image: linear-gradient(50deg, purple, orange);
  width:100px;
  background-attachment: fixed;
  background-clip: text;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
.acidTrip:after {
  content:"x";
}

JavaScript

// find elements

var input = $("input")
var label = $("label")
var banner = $("#banner-message") 
 /*
 validate brackets logic
 input: string
 output: bool
 */ 
 function validateBrackets(text){
 	var arr = [...text]; 
  var Round = 0;
  for(let a of arr){
  	if(a == "(")
    	Round++;
    else if(a == ")")
    	Round--;
  }
  label.html(Round==0? "Text is Valid": "Text is invalid")
  return Round == 0;
 }
 $(document).ready(()=>{
 	validateBrackets(input.val())
 })