JSFiddle - React, Tailwind, and code Playground

by pat spag

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title> Spag's Place COP4813 </title>
        <link rel="stylesheet" type="text/css" href="../stylesheet.css"/>
        <script type="text/javascript"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="../scripts/assignment04.js"></script>
    </head>
    <body>
        <div class="menuTable">
            <ul class="menu">
                <li> <a href="../home.html">Home</a></li>
                <li class="myAssignments"><a href="javascript:void(0)" class="menuBtn"> My Assignments</a>
                    <div class="menuDropDown">
                        <a href="assignment01.html"> Assignment 1 </a>
                        <a href="../home.html"> Assignment 2</a>
                        <a href="assignment03.html"> Assignment 3</a>
                        <a href="assignment04.html"> Assignment 4</a>
                    </div>
                </li>
                <li class="myAssignments"><a href="javascript:void(0)" class="menuBtn"> Programming Sites</a>
                    <div class="menuDropDown">
                        <a href="https://www.w3schools.com">w3schools </a>
                        <a href="https://www.geeksforgeeks.org">geeksforgeeks</a>
                    </div>
                </li>
                <li> <a href="../about.html"> About </a> </li>
            </ul>
          </div>
        <h1> Intrest Calculator Compounded and Uncompunded comparasion</h1>
        <div>
            Intrest calcualtor...

JavaScript

var totalAmount = 0;
var principal = 0;
var rate = 0;
var time = 0;
var x = new Array();
var y = new Array();
var v = new Array();
//this set on the bottem is for compund intrest
var xx = new Array();
var yy = new Array();
var vv = new Array();

//cala is for uncompunded
function calculateA (principal, rate, time){
  return principal * (1 + rate * time);
}

//this calculate is uncompunded
function calculate(){
  principal = Number($('#principalTB').val());
  rate = Number($('#rateTB').val()) / 100;
  var firstYear = 0;
  var cYear = 0;
  var lastYear = Number($('#timeTB').val());
  var i = 0;
  v=[];
  for (cYear = firstYear; cYear <= lastYear; cYear++){
    x[i] = cYear;
    y[i] = calculateA(principal, rate, cYear);
    v[i] = [x[i], y[i]];
    i++;
  }
  time = i -1;
}


function outputDisplay(){
  var outputString = "";

  outputString = "A = " + principal + "*(1 + " + parseFloat(rate) + "*" + parseFloat(time.toFixed(2)) + "  ) "  ;
  outputString += "<br/> Simple and Uncompounded<br/><br/>";
  outputString += "A = $"+  calculateA(principal, rate, 1) + " after 1st year <br/>";
  for (var j = 2; j <= time; j++){
    outputString +=  "A =  $" + parseFloat(y[j].toFixed(2)) +  " after " + j + " years " + "<br/>";
    }

  output.innerHTML = outputString;
}

function calculateCompound (principal, rate, time){

  return principal * (Math.pow((1 + rate), time));
}
//compounded yearly
function calculate2(){
  principal = Number($('#principalTB').val());
  rate = Number($('#rateTB').val()) / 100;
  var firstYear = 0;
  var cYear = 0;
  var lastYear = Number($('#timeTB').val());
  var i = 0;
  vv=[];
  for (cYear = firstYear; cYear <= lastYear; cYear++){
    xx[i] = cYear;
    yy[i] = calculateCompound(principal, rate, cYear);
    vv[i] = [xx[i], yy[i]];
    i++;
  }
  time = i -1;
}
function outputDisplay2(){
  var outputString2 = "";

  outputString2 = "<br/> A = " + principal + "*(1 + " + parseFloat(rate) + "/t)<sup> " + parseFloat(time.toFixed(2)) + "t</sup> "  ;
 ...