Web Design 1 Assignment 4

by Jake Jernigan

HTML

<h1>Sine Equation Calculator</h1>
Y= (a)sin(bx+c)+d<br><br> Amplitude (Y-min and Y-max):
<input type="text" id="a" size="3" value="1" /><br> Cycle/Period Length <br>(rate at which the cylce repeats):
<input type="text" id="b" size="3" value="1" /><br> Horizontal shift:
<input type="text" id="c" size="3" value="0" /><br> Vertical shift:
<input type="text" id="d" size="3" value="0" /><br> Domain (X-min and X-max):<br> X-Min
<input type="text" id="xmin" size="5" value="-10" /> X-Max
<input type="text" id="xmax" size="5" value="10" /><br><br>

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

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

JavaScript

function calculateSine(a, b, c, d, x) {
  return (a * (b * (Math.sin(x)) + c) + d);
}

function calculate() {
  //converts text to numerical values
  var a = Number($('#a').val());
  var b = Number($('#b').val());
  var c = Number($('#c').val());
  var d = Number($('#d').val());
  var xmin = Number($('#xmin').val());
  var xmax = Number($('#xmax').val());
  var x = 0;
  var y = 0;

  var s = "";
  //label to show the equation with entererd variables
  s = "Y = (" + a + ")sin(" + b + "x" + " + " + c + ") + " + c + "<br><br>";

  //loops through x values 1 at a time and rounds to 2 decimals
  for (x = xmin; x <= xmax; x++) {
    y = calculateSine(a, b, c, d, x);
    y = y.toFixed(2);
    s += " X = " + x + " Y = " + y + "<br>";
  }
  output.innerHTML = s;
}

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

});