resources/public/index.html

<!DOCTYPE html>
<html lang="en-AU">
<head>
    <title>Stamp Duty Calculator POC</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <script src="http://ifightcrime.github.io/bootstrap-growl/jquery.bootstrap-growl.min.js"></script>

    <script language="JavaScript">
        function buildPayload() {
            return {
                "realEstateType": "Established",
                "state": "Vic",
                "homeBuyerType": "None",
                "purchaseType": "OwnerOccupied",
                "realEstateValue": 100000
            };
        }
        function getPayloadText() {
            var payloadText = readPayloadFromTextArea();
            try {
                var payload = JSON.parse(payloadText);
            } catch (e) {
                displayValidationFailedMessage("Your payload is invalid! Error was: " + e);
                throw e;
            }
            return payloadText;
        }
        function init() {
            document.getElementById("payload-text-area").value = JSON.stringify(buildPayload());
        }
        function readPayloadFromTextArea() {
            return document.getElementById("payload-text-area").value;
        }
        function displayValidationFailedMessage(message) {
            $.bootstrapGrowl(message,
                    {
                        type: 'danger',
                        align: 'center',
                        width: 'auto',
                        delay: 5000
                    });
        }
        function displaySuccessMessage(message) {
            $.bootstrapGrowl(message,
                    {
                        type: 'info',
                        align: 'center',
                        width: 'auto',
                        delay: 5000
                    });
        }
        function sendMessage() {
            var request = new XMLHttpRequest();
            request.open('POST', '/services/api/stampduty', true);
            request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
            request.onload = function () {
                if (this.status >= 200 && this.status < 400) {
                    console.log(this.response);
                    var resp = JSON.parse(this.response);
                    if (resp.success) {
                        displaySuccessMessage(this.response);
                    } else {
                        displayValidationFailedMessage(this.response);
                    }
                } else {
                    alert("something bad happened");
                }
            }
            request.send(getPayloadText());
        }
    </script>
</head>
<body onload="init()">
<div class="jumbotron" style="padding: 40px">
    <h1>Hi!</h1>
    <p>This is the landing page of the (clojure) Stamp Duty Calculator POC. Welcome!</p>
    <div>
        <textarea id="payload-text-area" style="width : 500px; height : 200px"></textarea>
    </div>
    <button class="btn-primary" onclick="sendMessage()">Click me to test!</button>
</div>
</body>
</html>