JSFiddle - React, Tailwind, and code Playground

by leiperte

HTML

<!--Assignment 4 Equation-->
<html>
  <center>
    <h1>
      <b>Area of a Circle</b>
    </h1>
  </center>

  <head>
    <script>
      window.onload = function() {
      var x = [];
      var y = [];
        var chart = new CanvasJS.Chart("chartContainer", {
          animationEnabled: true,
          theme: "light2",
          title: {
            text: "Area of Everyday Circles"
          },
          axisX: {
            title: "Radius (inches)"
          },
          axisY: {
            title: "Area (inches)"
          },
          data: [{
            type: "line",
            dataPoints: [{
                x: 1.3,
                y: 5.3,
                indexLabel: "Soda Can",
              },
              {
                x: 2.36,
                y: 17.50,
                indexLabel: "DVD",
              },
              {
                x: 4.5,
                y: 63.62,
                indexLabel: "Frisbee",
              },
              {
                x: 6,
                y: 113.10,
                indexLabel: "Dinner Plate",
              }, {
                x: 7.5,
                y: 176.71,
                indexLabel: "Car Tire",
              },

              {
                x: 9,
                y: 254.47,
                indexLabel: "Dart Board",
              },
             {x: "x", y:"y", indexLabel:"Your Circle", markerColor:"red", markerType:"cross"}
            ]
          }]
        });
        chart.render();
      }

    </script>
    
    <form oninput="out.value=parseInt(radius.value)*parseInt(radius.value)*3.14">
      <center>
        <p>
          The equation for the area of a circle is A = πr². <br> Where A stands for area, π is roughly equal to 3.14, and r for radius.<br><br>
          Calculate the area of a circle for a given whole number radius.<br>
          π * <input type="text" id="radius" size="5" placeholder="radius" title="Please enter only whole numbers" required>² = <output name="out"...