JSFiddle - React, Tailwind, and code Playground

by Tori Hoelscher

HTML

<h1>
 Kinetic Energy Calculator
</h1>
<h4>
You are trying to figure out how to calculate the Kinetic Energy of a ball and a feather. 
</h4>Kinetic Energy Calculator<br/><br>
K = (1/2)*(m*v<sup>2</sup>)<br/><br/>

     Weight (kg) <input type="text" id="m" size="5" value=1><br/>
     Velocity (m/s^2) <input type="text" id="v" size="5" value=98 /><br/>
     X Min<input type="text" id="xmin" value="-10" size=""/>
     X Max<input type="text" id="xmax" value="10" size="" />
<br/><br/>
    
<input type="button" value="Calculate" id="calculate" />
<input type="button" value="Plot" id="plot" />

<br/><br/>
<p id="output"> </p>  

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

JavaScript

// Global variables
var a = 0;
var b = 0;
var c = 0;
var n = 0;
var x = new Array();
var y = new Array(); 
var v = new Array();

function calculateK(m, v, mt) {
    return (1/2) * m * v* v * mt;
}

function calculate() {
    a = Number($('#m').val());
    b = Number($('#v').val());
    var mmin = Number($('#xmin').val());
    var mmax = Number($('#xmax').val());
    var mt = 0;
    
    
    var i = 0;
    for (mt = mmin; mt <= mmax; mt++) { //min, max of x
        x[i] = mt; //x array
        y[i] = calculateK(a, b, mt); //y array with calculation
        v[i] = [x[i], y[i]]; //plot points
        i++;
    }
    n = i - 1;
    
}

function displayValues()
{
   var s = "";
    
    s = "K = " + "(1/2)"+" v<sup>2</sup> + ";
    
    for (var i = 0; i <= n; i++)
    {
        s += " x = " + x[i] + " Y = " + y[i] + "<br/>";       
    }
    
    output.innerHTML = s;
}

function plotValues()
{
   calculate();
   chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Kinetic Energy',
                x: -20 //center
            },
            xAxis: {
                title: {
                    text: 'Weight'
                }
            },
            yAxis: {
                title: {
                    text: 'Velocity'
                }   
            }, 
       
       plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
...