JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="mainContainer">
    <div id="infoContainer"><span class="status"></span><br><a class="name" target="_blank"><span class="name"></span></a><span class="playing" style="display:none;">playing </span><a class="game" target="_blank"><span class="game"></span></a>
    </div>
    <div id="streamContainer">
        <object type="application/x-shockwave-flash" data="http://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf" width="640" height="378" id="ember949-flash-player" style="visibility: visible;"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="wmode" value="opaque"><param name="bgcolor" value="000000"><param name="flashvars" value="channel=&amp;hide_chat=true&amp;auto_play=true&amp;eventsCallback=Twitch.player.FlashPlayer2.callbacks.callback0"></object>
    </div>
    <div id="conntrollers">
        <input class="streamerId" type="text" placeholder="Streamer Name" value="" />
        <input class="submit" type="button" value="Change Streamer" disabled="disabled" />
    </div>
    <div id="chatContainer">
        <iframe frameborder="0" scrolling="no" src="" height="100%" width="100%"></iframe>
    </div>
</div>

CSS

body{
    font-family:sans-serif;
    padding:3px;
    background:#666;
    width:640px;
    margin:0 auto;
}

a {
color: #6441a5;
font-size: 100%;
text-decoration: none;
}a:hover{
    text-decoration:underline;
}
#infoContainer{
background:rgba(255,255,255,0.7);
padding:7px;
}
#infoContainer > *{
    margin-right:7px;
    padding-bottom:3px;
}
#chatContainer{
    margin-top:4px;
    padding:2px;
    height:20em;
    width:100%;
    border-top:solid 1px black;
}

JavaScript

$(document).ready(function(){
	
    //Change Streamer
    $('.submit').click(function(){
        streamer();
        getInfo();
    });
	$('.streamerId').keypress(function(event){
        if(event.keyCode == 13){
            streamer();
            getInfo();
        }
    });
    
	//Creating cookie
	
	//Get streamer
	function streamer(){
        var streamerId = $('.streamerId').val(),
            stream = '<object type="application/x-shockwave-flash" data="http://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf" width="640" height="378" id="ember949-flash-player" style="visibility: visible;"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="wmode" value="opaque"><param name="bgcolor" value="000000"><param name="flashvars" value="channel='+streamerId+'&amp;hide_chat=true&amp;auto_play=true&amp;eventsCallback=Twitch.player.FlashPlayer2.callbacks.callback0"></object>';
        
		if(streamerId.length === 0){
			console.log('enter a streamer username');
		}else{
            $('#streamContainer').empty();
            $('iframe').attr('src','http://twitch.tv/'+streamerId+'/chat?popout=');
			$('#streamContainer').append(stream);
			console.log('StreamerId was changed');
		}
	}

	//submit disabled if input is empty
	$('.streamerId').keyup(function(){
		var empty = false;
		if ($(this).val().length === 0){
			empty = true;
		}
		if (empty){
			$('.submit').attr('disabled', 'disabled');
		} else {
			$('.submit').removeAttr('disabled');
		}
	});
	
	//Gets ifo of the streamer
    function getInfo(){
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            url: 'http://api.twitch.tv/api/channels/'+$('.streamerId').val(),
            success: function(data) {
                $('#infoContainer > a.name').attr('href','http://www.twitch.tv/'+data.display_name);
                $('#infoContainer > .name').html(data.display_name);
                $('#infoContainer > .status').html(data.status);
        ...