JSFiddle - React, Tailwind, and code Playground

by q s

HTML

<body>
    <input id='userIdTextField' type='text' placeholder='user_id' />
    <input id='userIdSubmitButton' type="submit" value="Submit" />
    <div id='screenNameResultView'></div>
    <br>
    <input id='screenNameTextField' type='text' placeholder='screen_name'
    />
    <input id='screenNameSubmitButton' type="submit" value="Submit" />
    <div id='userIdResultView'></div>
    <br>
</body>

JavaScript

$(document).ready(function () {

    $('#userIdSubmitButton').click(function () {
        var userId = $('#userIdTextField').val();
        $.ajax({
            type: "GET",
            url: "http://api.twitter.com/1/users/show.json?user_id=" + userId + "&include_entities=true&callback=?",
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
            cache: true,
            timeout: 1000,
            success: function (json) {
                alert("Successfull: screen_name=" + json.screen_name);
                $('#screenNameResultView').text("screen_name=" + json.screen_name);
                console.log(json);
            },
            error: function () {
                alert("No Result");
            }
        });
    });

    $('#screenNameSubmitButton').click(function () {
        var screenName = $('#screenNameTextField').val();
        $.ajax({
            type: "GET",
            url: "http://api.twitter.com/1/users/show.json?screen_name=" + screenName + "&include_entities=true&callback=?",
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
            cache: true,
            timeout: 1000,
            success: function (json) {
                alert("Successfull: user_id=" + json.id);
                $('#userIdResultView').text("user_id=" + json.id);
                console.log(json);
            },
            error: function () {
                alert("No Result");
            }
        });
    });
});