index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dyck Paths Visualizer</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="app.css" />
    <!-- <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          tex2jax: {
            inlineMath: [['$', '$'], ['\\(', '\\)']],
            processEscapes: true
          },
          "HTML-CSS": {
            scale: 100,
            availableFonts: ["TeX"],
            linebreaks: { automatic: true }
          }
        });
      </script>      
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
    ></script> -->
  </head>
  <body>
    <div class="container text-center justify-content-center card">
      <div class="card-header">
        <h1>Dyck Paths Visualizer</h1>
        <a href="https://github.com/abyanmajid/dyckvis">See Source on GitHub</i></a>
      </div>
      <div class="card-body">
        <p>A <b>dyck path</b> is a sequence of steps from (0, 0) to (<i>n</i>, <i>n</i>) that lies strictly below, or touching, the diagonal line.</p>
        <p class="alert alert-warning">
            <b>DISCLAIMER:</b> <br>
            The greater the value of <b><i>n</i></b>, the longer it will take to load the visualizer! <i>The web app may crash if <b>n</b> is too large!</i> <br>
            As a general rule, I recommend inputting a positive integer <b>less than or equal to 10</b> for <i><b>n</b></i>.
        </p>
        <form>
          <div class="form-group">
            <label for="inputN">Enter a value for <i><b>n</b></i> =</label>
            <input type="N" id="inputN" placeholder="..." />
            <small>(Positive integers only!)</small>
          </div>
          <a type="submit" class="btn btn-danger btn-lg" id="button">
            Visualize
          </a>
        </form>
        <!-- <p id="catalan">
          $\displaystyle \LARGE C_n=\frac{1}{n+1}\binom{2n}{n}$
        </p> -->
        <div id="gridSection">
          <!-- Grid  -->
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
    <script src="app.js"></script>
  </body>
</html>