writing and running functions in browser - codemirror

index.html

<link href='https://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<div class="side col-md-12">
<div style="text-align:center" class="side col-md-4">

  <button style="width:90%" id="run" class="btn btn-primary">Run</button>
  <div class="console">
<p class="pconsole">/**
  </p>
   <p class="pconsole indent">* Function out put will go here.</p>
<p class="pconsole indent">* /</p>
</div>
  
</div>
<div class="side col-md-8">
<textarea id="codejs">
function challengeFunction () {
alert("good");
}

</textarea>
  </div>
</div>
</div>
</div>
<script id="script" type="text/javascript">

</script>

script.js

$(document).ready(function(){



var js = CodeMirror.fromTextArea(document.getElementById("codejs"), {
  mode:  "javascript",
  lineNumbers: true,
  theme: "dracula"
});



$("#run").click(function(){
$( "#chalfunction" ).remove();
var jsx = js.getValue();
var s = document.createElement('script');
s.setAttribute("id", "chalfunction");
s.textContent = jsx;//inne
document.body.appendChild(s);
$( ".pconsole" ).remove();
$(".console").append("<p class='pconsole indent'>" + challengeFunction() +" </p>");

});
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.8.0/addon/lint/lint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.8.0/addon/lint/css-lint.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

.container {
width:100%;
padding:0;
}
.row {
padding:0;
}
.side {
padding:0;
}
.console {
padding-top:10px;
padding-bottom:10px;
width:90%;
min-height:100px;
background:#1a1a1a;
margin:auto;
margin-top:20px;
border-radius:5px;
}
.pconsole {
margin-left:10px;
text-align: left;
color:#e6e6e6;
font-family:"Ubuntu Mono" !important;
}
.indent {
text-indent: 10px;
}
body {
  overflow: hidden;
}
.btn-primary {
background:white;
color:#428bca;
}
.side {
}
.CodeMirror {
float:right;
  display: inline-block;
  min-height: 100vh;
width:100%;
  background: gray !important;
  
  .CodeMirror-scroll {
    background: #5E5E5E !important;
  }
  
  .CodeMirror-gutter {
    background: darken(#5E5E5E, 10%) !important;
  }

}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.8.0/theme/dracula.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/codemirror.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

writing-and-running-functions-in-browser-codemirror.markdown

writing and running functions in browser - codemirror

A Pen by Jason on CodePen.

License.