jQuery toggleClass example

Toggle class name on click in jQuery

by Neeraj

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <div id="testcases"></div>

    <script src="src/index.js"></script>
  </body>

</html>

CSS

body {
  font-family: sans-serif;
}

.pass {
  color: white;
  background-color: green;
  padding: 10px;
}

.fail {
  color: white;
  background-color: red;
  padding: 10px;
}

JavaScript

document.getElementById("app").innerHTML = `
<h1>Problem </h1>
<div>
  Create a function that checks if a string contains balanced parentheses, brackets, and braces.</br>
- There should be no unmatched opening or closing braces. (ex. '{' is invalid) </br>
- Braces must be closed in the same order that they were opened. (ex. '{[}]' is invalid)

</div>
`;


/**

Create a function that checks if a string contains balanced parentheses, brackets, and braces.
- There should be no unmatched opening or closing braces. (ex. '{' is invalid)
- Braces must be closed in the same order that they were opened. (ex. '{[}]' is invalid)

*/
function hasBalancedParens(value) {
  // Write code here.
  var fBracesOpen;
  var sBracesOpen;
  
  for(var i = 0; i < value.length; i++) {
  	var ch = value[i];
    if(ch === '{') {
    	fBracesOpen = true;
    } else if (ch === '}') {
    	fBracesOpen = false;
    } else if(ch === '[') {
    	sBracesOpen = true;
    } else if (ch === ']') {
    	sBracesOpen = false;
    } else if(ch === '(') {
    	sBracesOpen = true;
    } else if (ch === ')') {
    	sBracesOpen = false;
    }
  }
	return !fBracesOpen &&  !sBracesOpen;
}

const testcases = [{
    test: "",
    result: true
  },
  {
    test: "{}",
    result: true
  },
  {
    test: "[]",
    result: true
  },
  {
    test: "()",
    result: true
  },
  {
    test: "{}[]()",
    result: true
  },
  {
    test: "{[()]}",
    result: true
  },
  {
    test: "{{",
    result: false
  },
  {
    test: "))",
    result: false
  },
  {
    test: "{{}",
    result: false
  },
  {
    test: "{{[]]]",
    result: false
  },
  {
    test: "{[(}])",
    result: false
  },
  {
    test: "{(abc)}",
    result: true
  },
  {
    test: "(a(",
    result: false
  },
  {
    test: "([{a}b]c)",
    result: true
  }
];

const colorHash = {
  true: "green",
  false: "red"
};

testcases.forEach((testcase) => {
  const {
    test,
    result
  } = testcase;
  const output = hasBalancedParens(test);
  const...