index.html


  <html>

  <head>
    <meta charset="UTF-8">
    <title>The Game of Life</title>

    <script defer type="text/javascript" src="life.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    
    <div id="sidebar">
      <h1>The Game of Life</h1>
          
      <div id="rules">
        <p>Cells floating in the great sea of life... in plain Javascript.</p>
        <h2><a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's Rules:</a></h2>
        <h3>A living cell:</h3>
        <ul>
          <li>With fewer than two living neighbors dies <strong>(isolation).</strong></li>
          <li>With two or three living neighbors survives <strong>(community).</strong></li>
          <li>With more than three living neighbors dies <strong>(overpopulation).</strong></li>
        </ul>
        <h3>An empty spot:</h3>
        <ul>
          <li>Will be hospitable to new life if it has three living neighbors <strong>(reproduction).</strong></li>
        </ul>
      <!-- <div class="button">
      <h3>Select manual cell creation method:</h3>
      <input type="radio" id="drag" name="selectionMethod" value="Drag!">
      <label for="drag">Drag</label>
      <input type="radio" id="click" name="selectionMethod" value="Click!" checked>
      <label for="click">Click</label>
      </div>
      -->
      <h3>Select Board Size:</h3>

      <div class="button">
      <label for="xAxis">X Axis Size (1 to 50):</label>
      <input type="text" id="xAxis" minlength="1" maxlength="2">
      </div>
      <div class="button">
      <label for="yAxis">Y Axis Size (1 to 99):</label>
      <input type="text" id="yAxis" minlength="1" maxlength="2">
      </div>
      <h3>Controls:</h3>
      <div class="button">
      <input type="button" id="start" value="Start With Random World">
      </div>
      <div class="button">
      <input type="button" id="create" value="Create World">
      </div>
      <div class="button">
      <input type="button" id="randomize" value="Randomize World">
      </div>
      <div class="button">
      <input type="button" id="pause" value="Pause">
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
      </div>

    </div>
    </div>
    <div id="game">
      <p id="label">Turn number: 0, Cells currently alive: 0.</p>
      <table id="board">
        <tr>
        </tr>
      </table>
      <p id="instruction">Click 'Create World' to create a default world, or set your own dimensions.
      </p>
    </div>
    
    
  </body>

  </html>