JSFiddle - React, Tailwind, and code Playground

by drvy

HTML

<img src="" alt="Imagen de usuario" id="userImage">
<br>
<input type="text" id="userName" value="" placeholder="Perfil de Instagram">
<button type="button" id="request">Ver imagen</button>

JavaScript

var instagramProfileImage = function(profile, callback) {
    var request = new XMLHttpRequest();

    request.open('GET', 'https://www.instagram.com/' + profile +'/?__a=1', true);

    request.onload = function() {
        if (this.status >= 200 && this.status < 400) {
            var data = JSON.parse(this.response);
            return callback(data.graphql.user.profile_pic_url_hd);

        } else {
            console.log('Error: puede que el usuario no exista.');
        }
    };

    request.onerror = function() {
        console.log('Error, la consulta no se ha realizado');
    };

    request.send();
};


document.getElementById('request').addEventListener('click', function (event) {
    var user = document.getElementById('userName').value;

    instagramProfileImage(user, function(url) {
        console.log(url);
        document.getElementById('userImage').src = url;
    });
});