JSFiddle - React, Tailwind, and code Playground
HTML
<div align="center"><strong><em>EFC Calculator:</em></strong>
<br />
<div align="center">
<input type="text" id="efc_value" name="efc" placeholder="Enter EFC Here" value="Enter EFC here..." onblur="if(this.value == ''){ this.value = 'Enter EFC here...'; this.style.color = '#ebebeb';}" onfocus="if(this.value == 'Enter EFC here...'){ this.value = ''; this.style.color = '#000';}" style="color:#000000;" title="EFC Calculator" maxlength="5" />
</div>
<br />
<!--placeholder="Enter EFC Here" serves as placeholder for all browsers. Does not work for IE9 or below, hence the included JS, which allows placeholder in IE8-->
<input id="efc_12_13_button" type="button" value="EFC - 12 / 13" style="margin-bottom: 10px; width: 40%;" />
<input id="efc_13_14_button" type="button" value="EFC - 13 / 14" style="margin-bottom: 10px; width: 40%;" />
<br />
<input id="reset_efc" type="button" value="Reset" style="margin-bottom: 10px; width: 31%;" />
JavaScript
$(function () {
$('#efc_12_13_button').click(function () {
var efc = $('#efc_value').val();
var displayVals = setValuesForDisplay(efc);
displayConfirmationBox(efc, displayVals.pell, displayVals.ssg, displayVals.estpay, displayVals.monthpay, "2012-2013");
});
$('#efc_13_14_button').click(function () {
var efc = $('#efc_value').val();
var displayVals = setValuesForDisplay(efc);
displayConfirmationBox(efc, displayVals.pell, displayVals.ssg, displayVals.estpay, displayVals.monthpay, "2013-2014");
});
$('#reset_efc').click(function () {
$('#efc_value').val('');
});
});
function setValuesForDisplay(efc) {
var pell = 0;
var ssg = 0;
var estpay = 0;
var monthpay = 0;
if (efc == 0) {
pell = 5550;
estpay = -483;
} else if (efc <= 100) {
pell = 5500;
estpay = -433;
} else if (efc < 200) {
pell = 5400;
estpay = -333;
} else if (efc < 300) {
pell = 5300;
estpay = -233;
} else if (efc < 400) {
pell = 5200;
estpay = -133;
} else if (efc < 500) {
pell = 5100;
estpay = -33;
} else if (efc < 600) {
pell = 5000;
ssg = 67;
estpay = 0;
}
return {
pell: pell,
ssg: ssg,
estpay: estpay,
monthpay: monthpay
};
}
function displayConfirmationBox(efc, pell, ssg, estpay, monthpay, yearRange) {
confirm('Based on the ' + yearRange + ' EFC you entered (' + efc + '), you may receive...' + ' \n.........................................................' + ' \n-Potential PELL Grant Award: $' + pell + '.' + ' \n.........................................................' + ' \n-Potential Student Success Grant: $' + ssg + '.' + ' \n.........................................................' + ' \n-Tuition of 36 credits: $14,472' + ' \n.........................................................' + ' \n-Direct...