Server now returns HTML and can pass back/forth data

templates/assets/main.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var optionResults;
+
+$(document).ready(function() {
+
+    $("#option-terms").on("submit", function(e) {
+        //
+        e.preventDefault();
+        sendRequest();
+    })
+});
+
+function serializeForm(id) {
+    //
+    return $(id).serializeArray()
+            .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
+}
+
+function sendRequest() {
+    //
+    var inputData = serializeForm("#option-terms");
+    // Get the right data-types
+    inputData.ExpiryDate = new Date(inputData.ExpiryDate).toJSON();
+    inputData.OptType = parseInt(inputData.OptType);
+    inputData.Rfr = parseFloat(inputData.Rfr);
+    inputData.Sims = parseInt(inputData.Sims);
+    inputData.Spot = parseFloat(inputData.Spot);
+    inputData.Strike = parseFloat(inputData.Strike);
+    inputData.ValueDate = new Date(inputData.ValueDate).toJSON();
+    inputData.Vol = parseFloat(inputData.impliedVol);
+
+    // Send request
+    var startTime;
+    $.ajax({
+        type:           "POST",
+        url:            "http://localhost:8080",
+        data:           JSON.stringify(inputData),
+        beforeSend:     function(request, settings) {
+            startTime = new Date().getTime();
+        },
+        success:        function(e) {
+            optionResults = e;
+            updateTable();
+            let requestTime = new Date().getTime() - startTime;
+            console.log("Request time: ", requestTime);
+        },
+    });
+}
+
+function updateTable() {
+    $("#results-table > tbody > tr").each(function(idx, el) {
+        $($(el).children()[1])[0].innerText =
+            optionResults["ClosedForm"][$($(el).children()[0]).text()].toFixed(4);
+        $($(el).children()[2])[0].innerText =
+            optionResults["MonteCarlo"][$($(el).children()[0]).text()].toFixed(4);
+    });
+}
+

templates/assets/styles.css

@@ -0,0 +1,61 @@
+body {
+	font-family: 'Poppins', sans-serif;
+	font-size: small;
+}
+
+form > p {
+	text-align: left;
+	margin-left: 10%;
+}
+
+p > select, button {
+	float: right;
+	margin-right: 20%;
+}
+
+p > input {
+	float: right;
+	margin-right: 20%;
+	text-align: right;
+}
+
+table {
+	border: none;
+	border collapse: collapse;
+}
+
+table td {
+	border-left: 1px solid #000;
+	padding: 0 40px 0 40px;
+}
+
+table td:first-child {
+	border-left: none;
+}
+
+table > tbody > tr > th {
+	text-align: left;
+}
+
+table > tbody > tr > td {
+	text-align: right;
+}
+
+h3 {
+	margin-left: 5%;
+}
+
+#option-terms {
+	/* float: right; */
+
+}
+
+#left-side {
+	float: left;
+	width: 33%;
+}
+
+#right-side {
+	float: left;
+	width: 66%;
+}