Run script on input

by SpAm

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
Run this code
<textarea id="code" resizable class="form-control" data-saveid="masnotsramCodeToRun"></textarea>

On this:
<textarea id="input" class="form-control" data-saveid="masnotsramInput"></textarea>

<div style="margin-top:10px;">
  <button type="button" id="run" class="pull-right btn btn-default">Run</button>
  <div class="clearfix"></div>
</div>



<div style="text-align:center;margin-top:100px;">
Console (also appears in normal console)
  <div>
    <div style="text-align:left;overflow:scroll;" id="console" class="well"></div>
  </div>
  <button type="button" id="clear" class="btn btn-default" style="margin-top:10px;">Clear</button>
</div>


</div>

CSS

textarea {
  width:100%;
  max-width:100%;
  min-height:150px;
}

#console {
  width:75%;
  margin:0px auto;
  height:200px;
}


.error {
  color:red;
}

JavaScript

window.oldConsole = window.console;

window.console = {
	log:function(...msg){
    var div = $('<div class="log"></div>');
    $.each(msg, function(i, m){
      $('#console').append($('<span class="log"></span>').text(m));
    });
    oldConsole.log(...msg);
  },
  error:function(){
  	var div = $('<div class="log error"></div>');
    div.text(msg);
  	$('#console').append(div);
  }
};


$('#run').click(function(){
  var input = $('#input').val();
  var code = $('#code').val();
	eval(code);
});

$('#clear').click(function(){
  $('#console').empty();
});

$('[data-saveid]').keyup(function(){
  localStorage.setItem($(this).attr('data-saveid'), $(this).val());
});

$('[data-saveid]').each(function(){
	$(this).val(localStorage.getItem($(this).attr('data-saveid')));
});