JSFiddle - React, Tailwind, and code Playground

by csCoder

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1> Slope Equation:</h1>
    
    <fieldset>
      <label>y = mx + b</label> <br /><br />
      
      <table>
        <tr>
          <form>
            <div>
              <input id="rangeInputM" type="range" min="-10" max="10" oninput="m1.value=rangeInputM.value" />
              <input id="m1" type="number" value="1" min="-200" max="200" oninput="rangeInputM.value=m1.value" />
            </div>
          </form>

          <form>
            <div>
              <input id="rangeInputB" type="range" min="-10" max="10" oninput="b1.value=rangeInputB.value" />
              <input id="b1" type="number" value="1" min="-200" max="200" oninput="rangeInputB.value=b1.value" />
            </div>
          </form>

        </tr>
        <tr>
          <td><input id="btnGraph" type="button" value="Draw line" /></td>
        </tr>
      </table>
      
      <br />
      <h3>Graph</h3>
      
      <canvas id="Graph" style="background:aliceblue;border:1px solid #AFAFAF" width="600" height="600"></canvas>
     
    </fieldset>
    
      <script>
      function Graph(config) {
        // user defined properties
        this.canvas = document.getElementById(config.canvasId);
        this.minX = config.minX;
        this.minY = config.minY;
        this.maxX = config.maxX;
        this.maxY = config.maxY;
        this.unitsPerTick = config.unitsPerTick;

        // constants
        this.axisColor = '#aaa';
        this.font = '8pt Calibri';
        this.tickSize = 20;

        // relationships
      ...