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. Assume that the velocity is 9.8 m/s<sup>2</sup>, but it can be changed if needed. Weight will be in Kg. The ball weighs 50 kg. Once you put in the weight, calculate the Kinetic Energy and plot the velocity of a ball that weighs 50 kgs and drops at normal gravitational speed. 
</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<sup>2</sup>) <input type="text" id="v" size="5" value=9.8 /><br/>
     X Min<input type="text" id="xmin" value="0" size=""/>
     X Max<input type="text" id="xmax" value="20" 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: 6,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
 ...