roller.html

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<script>
function success(data) {
    document.getElementById("diceRoll").innerHTML = "Rolls: " + data['rolls'] + " = " + data['total'];
}

function getMethod(apiCall) {
$.ajax({
  type: 'GET',
  url: apiCall,
  async: false,
  dataType: 'json',
  success: success
});

}

function myFunction() {
    var text;
    var fullURL = "http://api.d20futurepath.com/v1/tasks/roll/"
    var apiCall

    // Get the value of the input field with id="diceStr"
    text = document.getElementById("dice").value;
    apiCall = fullURL + text;
    // document.getElementById("diceRoll").innerHTML = apiCall;
    getMethod(apiCall)
    
}
</script>
<body>

<h1>Future Path Dice Rolling Tool</h1>

<p>Please input the dice IE: d20+d4:</p>

<input id="dice">

<button type="button" onclick="myFunction()">Submit</button>

<p id="diceRoll"></p>

</body>
</html> 