COP 4813 - Web Systems - JavaScript Calculator and Plotting

Assignment 4

by F Fornos

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div>
	<h1 id="mainh1" class="w-adjust">JavaScript Calculator and Plotting</h1>
</div>

<div>
<div>
	<a href="https://jsfiddle.net/fornosf/hg0newsq/" target="_blank">JS Fiddle Template</a>
      <br>&nbsp;
      <h2 id="a4_h2">Savings Interest Calculator</h2>
</div>
	  
<div id="a4_maindiv">		
<table id="a4table" class="w-adjust">
	 <tr>
		<td>
			Principal Amount<br><input id="sav_amt" type="number" value="10000" title="Enter Starting Principal Amount" placeholder="$ 0.00" required>		
		</td>
	 </tr>
	  
	 <tr>
		<td>
			Interest Rate<br><input id="sav_int" type="number" value="8" title="Enter Percent Interest Rate" placeholder="Percentage" required>
		</td>	  
	 </tr>
	  
	 <tr>
		<td>
			Compounding Period<br><input id="c_period" type="number" value="1" title="Enter Compouding Period" placeholder="Period" required>
		</td>	  
	 </tr>
	  
	 <tr>
		<td>
			Time in Years<br><input id="t_year" type="number" value="5" title="Enter Time in Years" placeholder="Number of Years" required>
		</td>	  
	 </tr>
	  
	 <tr>
		<td>
			<button id="btncalc" value="Calculate" onClick="calcmpamt()">Calculate</button>
			<button id="reset" value="Clear Values">Reset</button>
			<button id="chart" onclick="plotResults()">Graph</button>
		</td>
	 </tr>
	 
	 <tr>
		<td>
			Initial Year Earned Interest:<br>
			$&nbsp;<input type="text" id="sav_earn" size="10" style="padding-left:5px;" readonly>
		</td>		
	</tr>

	<tr>
		<td>
			Actual Total Interest Earnings:<br>
			$&nbsp;<input type="text" id="sav_growth" size="10" style="padding-left:5px;" readonly>
		</td>		
	</tr>

	<tr>
		<td>
			Actual Total Principal And Interest<br>
			$&nbsp;<input type="text" id="sav_total_pi" size="10" style="padding-left:5px;" readonly>
		</td>		
	</tr>
  
</table>

<div>
	<h2 id="a4_h2">Total Savings</h2><br>
    <div id="showTotalSavings"...

CSS

#mainh1 {
		font-size: 50px;
		font-weight: normal;
		width: 100%;
		padding: 0 10px;
		height: 62px;
		color: #070708;
		background-color: #CFD8EE;
		opacity: 0.8;
		text-align: center;
	}

#a4_h2 {
		display: block;
		width: 80%;
		max-width: 800px;
		margin: auto;
		color: #CFD8EE;
		background-color: #070708;
		opacity: 0.8;
		padding: 10px 10px;
		text-align: center;
		font-size: 20px;
		border: 2px solid #CFD8EE;
	}
	
	#a4table {
		width: 20%;
		max-width: 800px;
		left: 50%;
		margin: auto;
		color: #CFD8EE;
		background-color: #070708;
		opacity: 0.8;
		padding: 10px 10px;
		text-align: center;
		font-size: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		border: 1px solid #CFD8EE;
	}
	
	#a4_maindiv {
		color: #CFD8EE;
		background-color: #CFD8EE;
		opacity: 0.8;
		padding: 10px 10px;
		text-align: center;
		font-size: 20px;
		margin: auto;
		margin-top: 50px;
		width: 800px;
		height: auto;
		border: 1px solid #070708;
	}

JavaScript

function clear_field(field) {
	if (field.value==field.defaultValue) {

	field.value=''

}
}

function calcmpamt() {
	var vcpIntearnded;
	var princ;
	var ratepc;
	var years;
	var rate;
	var power;
	var totalearn;

	if (document.getElementById('sav_amt').value != "" && document.getElementById('sav_amt').value != "") {

	vcpIntearnded = document.getElementById('sav_amt').value * (document.getElementById('sav_int').value / 100) * 1 }


	if(vcpIntearnded) {

	document.getElementById('sav_earn').value = vcpIntearnded;

	if (document.getElementById('t_year').value != "") {
	princ = document.getElementById('sav_amt').value;
	ratepc = document.getElementById('sav_int').value;
	years = document.getElementById('t_year').value;
	rate = ratepc / 100;
	power = Math.pow((1 + rate), years);
	totalearn = Math.round(princ * power * 100) / 100;

	document.getElementById('sav_growth').value = Math.round((totalearn - princ) * 100) / 100;

	document.getElementById('sav_total_pi').value = Math.round((totalearn) * 100) / 100;
	}
}

}	
 
function calcInt(p,r,n,tmax){	
	
	var arrAns = [];
	var arrLabels = [];
	for (var t = 1; t < (tmax + 1); t++){
    let a = p * (1 + (r/n))**(n*t);
    arrAns.push(Math.round(100*a)/100);
    arrLabels.push('Year ' + t);
  }

	return [arrAns,arrLabels];
 
}

function showTotalSavings(objChart){
	var arrData = objChart.data.datasets[0].data;
	var arrLabels = objChart.data.labels;
	var printSavings = "<table>";
	for (var i = 0; i < arrData.length; i++){
		var bg = "background:#2471A3;";
		var border = "border:2px solid #070708;";
    
		printSavings = printSavings + "<tr style='" + bg + border + "'><td>" + arrLabels[i] + ": &nbsp;" + "</td><td>  $ " + arrData[i] + "</td></tr>";
		}
		
	printSavings = printSavings + "</table>";
	return printSavings;
}

function plotResults(){
	
	var p = parseFloat(document.getElementById('sav_amt').value);
	var r = parseFloat(document.getElementById('sav_int').value) / 100;
	var n =...