Get Account Tool

get_account_final.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<div class="container">
    <div><h1>My First App</h1></div>
    <input id="user_id" type="text">
    <button onclick="show_user()">Go</button>
    <div id="user_area"></div>
</div>

<script>

steem.api.setWebSocket('wss://steemd-int.steemit.com');

function show_user() {
    var user_id = $('#user_id').val();
    if (!user_id) {
        return;
    }
    console.log('Send getAccounts request');
    steem.api.getAccounts([user_id], function(err, response){
        if (err) {
            console.log('Error!');
            return;
        }
        console.log('Done!');
        user_info = JSON.parse(response[0].json_metadata).profile;
        user_info.id = user_id;

        var user_html = $('<div/>').append(
            $('<img/>', {src: user_info.profile_image, class: 'img-circle', width:120})
        ).append(
            $('<h2/>').text(user_info.id + ' - ' + user_info.name)
        ).append(
            $('<h5/>').text(user_info.location)
        ).append(
            $('<h5>').text(user_info.about)
        );
        $('#user_area').append(user_html);
    });
}

</script>