Assign 4 - Calculation

Sine calculation

by dhizzybusy

HTML

<!DOCTYPE html>
<html lang="en">

  <head>

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

  <body>


    <div>
      <h1>
        <p>Working Code on <a href="https://jsfiddle.net/dhizzybusy/bpsorqy3/9/">jsfiddle</a></p>
      </h1>
      <div class="container">
        <div class="p-5">

          <p></p>Fill in values :
          <p></p> a sin(x + b) + c
          <p></p>a value: <input type="textbox" size="4" id="aval" value="1">
          <p></p>b value: <input type="textbox" size="4" id="bval" value="1">
          <p></p>c value: <input type="textbox" size="4" id="cval" value="1">
          <p></p>Accuracy : <input type="textbox" size="4" id="nval" value="20">
          <p></p>x min: <input type="textbox" size="4" id="xmin" value="0">
          x max: <input type="textbox" size="4" id="xmax" value="3.141592653589793">

          <p></p>
          <button class="btn btn-primary" onclick="displayCalc()">Calculate</button>
          <button class="btn btn-primary" onclick="plotValues()">Graph Simulation</button>
          <br>
          <div id="graphArea" style="min-width: 500px; height: 500px; margin: 0 auto"></div>
          <div id="answerArea"> </div>
        </div>
      </div>
      <br>
    </div>

  </body>
  </head>

</html>

JavaScript

function showMenu() {
  document.getElementById("menuList").classList.toggle("show");
}
var check = "LocalHost";
window.onclick = function(event) {
  if (!event.target.matches('.dropdownButton')) {
    var dropdownMenu = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdownMenu.length; i++) {
      var openDropdown = dropdownMenu[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }

}

function setProfile(page, check) {
  var bytes = CryptoJS.AES.decrypt(page.toString(), check);
  return bytes.toString(CryptoJS.enc.Utf8);
}
$(document).ready(function() {
  var newPage = getURLpage('page');
  load_page(newPage);
});

function load_page(page) {
  if (!setProfile(page, check)) {
    page = "U2FsdGVkX19QIZISZ8x7qw4et5EfbTBfbpvrsvyotbA=";
  }
  history.pushState(null, '', '/index.html?page=' + page);
  page = setProfile(page, check);
  var url = eval("page");
  $('#midPage').load(url, function() {
    $(window).resize();
  });
}

function getURLpage(name) {
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
  return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}


var displayAnswer = document.getElementById('answerArea');
var displayContainer = document.getElementById('graphArea');

function displayCalc() {
  displayContainer.style.display = "none";
  displayAnswer.style.display = "block";
  displayAnswer.innerHTML = calculate()[0];
}

function calculate() {
  var aValue = Number(document.getElementById('aval').value);
  var bValue = Number(document.getElementById('bval').value);
  var cValue = Number(document.getElementById('cval').value);
  var nValue = Number(document.getElementById('nval').value);
  var xMin = Number(document.getElementById('xmin').value);
  var xMax = Number(document.getElementById('xmax').value);
 ...