Pythagorean Theorem

Assignment 4

by vzufelt

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-bundle.min.js"></script>
Pythagorean Theorem Equation Calculator<br/><br>
c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup><br/><br/>

     Input a <input type="text" id="a" size="5" value="0"/><br/>
     Input b <input type="text" id="b" size="5" value="0" /><br/>

    
<input type="button" value="Calculate" id="calculate" />
<input type="button" value="Plot" id="plot" />

<br/><br/>
<p id="output"> </p>
     Point x1 <input type="text" id="x1" size="5" value="0"/> y1 <input type="text" id="y1" size="5" value="0" /><br/>
     Point x2 <input type="text" id="x2" size="5" value="0"/> y2 <input type="text" id="y2" size="5" value="0" /><br/>
     Point x3 <input type="text" id="x3" size="5" value="0"/> y3 <input type="text" id="y3" size="5" value="0" /><br/>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

// Global variables
var a = 0;
var b = 0;
var n = 0;
//var ycoord = [];
//var xcoord = [];
var data = [
	{x: Number($('#x1').val()), value: Number($('#y1').val())},
  {x: Number($('#x2').val()), value: Number($('#y2').val())},
  {x: Number($('#x3').val()), value: Number($('#y3').val())}
];

function calculateC(a, b, x) {
    return a * x + b * x;
}

function calculate() {
    a = Number($('#a').val());
    b = Number($('#b').val());
    //ycoord = [Number($('#y1').val()),Number($('#y2').val()),Number($('#y3').val())];
    //xcoord = [Number($('#x1').val()),Number($('#x2').val()),Number($('#x3').val())];
}

function displayValues()
{
   var s = "";
   var w = "";
   var c = Math.sqrt((a**2) + (b**2));
   
    s = "C<sup>2</sup> = " + a + "<sup>2</sup> + " + b + "<sup>2</sup><br/><br/>";
		w = " C = " + c + "<br/>";       
		
    
    output.innerHTML = s;
    output.innerHTML = w;
}

function plotValues() {
var data = [
	{x: Number($('#x1').val()), value: Number($('#y1').val())},
  {x: Number($('#x2').val()), value: Number($('#y2').val())},
  {x: Number($('#x3').val()), value: Number($('#y3').val())}
];

	// create a chart
	var chart = anychart.quadrant(data);

	// configure scales
	chart.yScale().minimum(-50);
	chart.yScale().maximum(50);
	chart.xScale().minimum(-50);
	chart.xScale().maximum(50);

	// configure axes
	chart.xAxis(0, {ticks: true, labels: true});
	chart.xAxis(1, {ticks: true, labels: true});
	chart.yAxis(0, {ticks: true, labels: true});
	chart.yAxis(1, {ticks: true, labels: true});

	// set the chart title
	chart.title("Quadrant Chart: Axes");

	// set the container id
	chart.container("container");

	// initiate drawing the chart
	chart.draw();
 }

$('#calculate').click( function() {
     calculate();
     displayValues();    
});

$('#plot').click( function() {
     calculate();
     plotValues();   
});