JSFiddle - React, Tailwind, and code Playground

by Marco Fucci

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="brand" href="#">API Analyser</a>

        </div>
    </div>
</div>
<div class="container">
    <form class="form-horizontal" id="apiForm">
        <h3>Request</h3>

        <div class="control-group">
            <label class="control-label" for="userToken">Facebook User Token</label>
            <div class="controls">
                <input class="span7" type="text" id="userToken" placeholder="AUTHENTICATION header">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <div class="btn-group">
                    <select class="span1" id="apiMethod">
                        <option value="GET">GET</option>
                        <option value="PUT">PUT</option>
                        <option value="POST">POST</option>
                    </select>
                </div>
                <input class="span6" style="width: 582px" id="apiUrl" type="text" placeholder="http://integration.plingoo.com/api/kraved/v1/...">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="apiData">POST/PUT Data</label>
            <div class="controls">
                <textarea class="span7" id="apiData" placeholder="json format"></textarea>
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary"...

JavaScript

$(function () {
    var userToken = $('#userToken'),
        apiMethod = $('#apiMethod'),
        apiUrl = $('#apiUrl'),
        apiData = $('#apiData'),
        apiResponseStatusCode = $('#apiResponseStatusCode');
        apiResponseData = $('#apiResponseData');


    $('#sendAction').click(function (e) {
        e.preventDefault();
        
        $.ajax({
            url: apiUrl.val(),
            type: apiMethod.val(),
            data: apiData.val(),
            dataType: 'jsonp',
            headers: {
                'AUTHORIZATION': userToken.val()
            },
            error: function (jqXHR, textStatus, errorThrown) {
                apiResponseStatusCode.val(textStatus);
                apiResponseData.val(errorThrown);
            },
            success: function (data, textStatus, jqXHR) {
                apiResponseStatusCode.val(textStatus);
                apiResponseData.val(data);
            }
        });
    });
});