Liveplant live coding 1

by austinpray

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="panel panel-default">
    <div class="panel-heading">Current Action Endpoint</div>
    <div class="panel-body">
        <p>
            <code>https://liveplant.herokuapp.com/current_action</code>
        </p>
        <p>
            <button 
                type="button"
                id="sendRequestButton"
                class="btn btn-primary">Send Request</button>
        </p>
    </div>
    <ul class="list-group" id="output">
        <!-- this is where the request data will be output -->
    </ul>
</div>

CSS

body {
    font-family: sans-serif;
    padding: 1em;
}

JavaScript

// when you click the button with the id "sendRequestButton" run the handler function
jQuery('#sendRequestButton').on('click', function(e) {
    // make an ajax request
    jQuery.get('https://liveplant.herokuapp.com/current_action', function(data) {
        // create a new <li></li> element and store it in a variable
        var newListItem = jQuery(document.createElement('li'));
        // add the classes necessary for http://getbootstrap.com/components/#list-group
        newListItem.addClass('list-group-item');
        newListItem.text(
            'action is ' + data.action + ' and time is ' + data.unixTimestamp
        );
        // find the element with the id "output" and append the new list item to it
        jQuery('#output').append(newListItem);
    });
});