Problem 2 - Create a function that checks if a string contains balanced parentheses, brackets, and braces.

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)

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.
 
}

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 isCorrect = result === output;
  const outputColor = colorHash[isCorrect];
  const score = isCorrect ? "PASS" : "FAIL";

  $(document).find("#testcases").append(`
    <div style="font-size: 20px; margin-top: 20px;">
      <b>${test}</b>
        should return
      <b>${result}</b>
        , returns
      <b>${output}</b>.
      <b style="color: ${outputColor}">${score}</b>.
    </div>
  `);
});