JSFiddle - React, Tailwind, and code Playground

by piratescott

HTML

<link rel="stylesheet" href="http://www.funalternativestoporn.com/style.css">

<div id="stream"><a class="embedly-card" data-card-chrome="0" href="http://www.twitch.tv/piratescott">PirateScott - Twitch</a>

    <script>
        ! function(a) {
            var b = "embedly-platform",
                c = "script";
            if (!a.getElementById(b)) {
                var d = a.createElement(c);
                d.id = b, d.src = ("https:" === document.location.protocol ? "https" : "http") + "://cdn.embedly.com/widgets/platform.js";
                var e = document.getElementsByTagName(c)[0];
                e.parentNode.insertBefore(d, e)
            }
        }(document);
    </script>
</div>
<div id="stream-buttons">
<span></span>

</div>

JavaScript

var names = ["mulloiv", "piratescott", "vintersol", "gidders14"];

var obj = jQuery.parseJSON('{"name": {"life": "{life}","logo": "{logo}","status": "{status}","url": "{url}"}}');

wtfJSON();

function wtfJSON() {

    for (index = 0; index < names.length; ++index) {

        $.getJSON("https://api.twitch.tv/kraken/channels/" + names[index] + "/?callback=?", function (json) {
            if (json.stream != null) {

                $username = json.name;

                $("#stream-buttons span").append("<li id=\"streamers\"><img height=\"100px\" width=\"100px\" src=\"" + json.logo + "\"/><a href=\"" + json.url + "\"><p>" + json.display_name + "</p></a><p>Online</p><input id = \"btnSubmit\" type=\"submit\" value=\"" + $username + "\"/></li>");


            } else {

                $username = json.name;

                $("#stream-buttons span").append("<li id=\"streamers\"><img height=\"100px\" width=\"100px\" src=\"" + json.logo + "\"/><a href=\"" + json.url + "\"><p>" + json.display_name + "</p></a><p>Online</p><input id = \"btnSubmit\" type=\"submit\" value=\"" + $username + "\"/></li>");

            }


        });
    }
}

$(document).ready(function () {
    $("#btnSubmit").click(function () {
        $("#stream").append("chips");
    });
});