JSFiddle - React, Tailwind, and code Playground

by Dmitry

HTML

<div id="controls">
	<div class="control">
		<input type="text" name="url" placeholder="http://">
	</div>
	<div class="control">
		<select name="size">
			<option value="360x640">Mobile &ndash; width 320px</option>
			<option value="720x640">Tablet &ndash; width 720px</option>
		</select>
	</div>
	<div class="control">
		<button type="submit" id="reload">reload</button>
	</div>
	<div class="control">
		<button type="submit" id="goback">go back</button>
	</div>
</div>


<div id="content">
	<div class="canvas">
		<iframe src="http://tools.taapo.com/go/?url=http://www.theverge.com/" id="frame-target"></iframe>
	</div>
</div>

CSS

body { background: #eee; padding: 90px 0; }
iframe { width: 360px; height: 640px; margin: 0 auto; background: #fff; border: 2px solid #555; display:block; box-shadow: 3px 3px 3px 0px rgba(204,204,204,1); }
#content { width: 1200px; margin: auto; }
#controls { position: fixed; left: 0; top: 0; width: 100%; background: #555; color: #fff; padding: 20px 50px; box-shadow: 3px 3px 3px 0px rgba(204,204,204,1) }
#controls .control { float: left; margin-right: 20px;  }
#controls input, #controls select, #controls button { padding: 5px; border: 1px solid #eee; }

JavaScript

var history = [],
    state = 0;

function pushState( url ){
    history.push({url:url});
    state++;
}

function prevState(){
    if ( !history.length ) {
        return null;
    }
    // return prev element
    if ( history.length == 1 ) {
        return history[0];
    } else {
        // remove current element
        history.pop();
        
        if ( history.length == 1 ) {
            return history[0];
        } else {
            return history.pop();
        }
    }
}

function isUrl( url ){
    return /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/.test( url );
}

$(function(){
    var default_url = $('#content iframe').attr('src');
    if ( default_url.length ) {
        default_url = default_url.replace(/^(http:\/\/tools\.taapo\.com\/go\/\?url=)/,"");
        if ( isUrl( default_url ) ) {
            pushState( default_url );
        }
    }
    
    $('#controls input[name="url"]').bind("enterKey",function(e){
       var url = $(this).val();
       if ( !/^http/.test( url ) ) {
           url = 'http://' + url;
       }
        
       if ( !isUrl( url ) ) {
           console.error('Entered url is invalid');
           return;
       }
       pushState( url );
       url = 'http://tools.taapo.com/go/?url=' + encodeURIComponent( url );
       $('#content iframe').attr('src', url );
    });    
    
    $('#controls input[name="url"]').keyup(function(e){
        if (e.keyCode == 13) {
            e.preventDefault();
            $(this).trigger("enterKey");
        }
    });
    
    $('#controls select[name="size"]').change(function(){
        var size = $(this).val().split('x');
        $('#content iframe').width( size[0] ).height( size[1] );
    });
    
    $('#controls').on('click', '#reload', function(){
       $('#content iframe').attr('src', $('#content iframe').attr('src') );
    });
    
    $('#controls').on('click', '#goback', function(){
        var prev = prevState();
        if ( prev === null...