Fiddle Console

A basic console that works in jsfiddle result section

by Sree K

HTML

<!--------------- DON'T EDIT --------------->
<!------------------------------------------>
<!-- AUTHOR: Fr0z3nfyr -->
<!-- Console Definition below - DO NOT EDIT -->
<div id="console-heading"><strong>Console:</strong></div>
<div id="console-panel"></div>
<script>
  /*************** DO NOT EDIT ***************/
  /*******************************************/
  /* AUTHOR: Fr0z3nfyr */
  /* Console Definition below - DO NOT EDIT */
  let _consoleLog = "<code class=\"console-log\"></code>";
  let _consoleInfo = "<code class=\"console-info\"></code>";
  let _consoleWarn = "<code class=\"console-warn\"></code>";
  let _consoleError = "<code class=\"console-error\"></code>";
  console = {
      log: function (text) {
          $("#console-panel").append($(_consoleLog).html(text));
      },
      info: function (text) {
          $("#console-panel").append($(_consoleInfo).html(text));
      },
      warn: function (text) {
          $("#console-panel").append($(_consoleWarn).html(text));
      },
      error: function (text) {
          $("#console-panel").append($(_consoleError).html(text));
      }
  };
  /*******************************************/
  /*******************************************/
</script>

CSS

#console-heading {
  position: fixed;
  top: calc(100vh - 80px);
  /* border-top: 1px solid grey; */
  border-bottom: 1px solid grey;
  background-color: #d3d3d3;
  width: 100%;
  left: 0;
  padding-left: 5px;
  font-family: "Lucida Console", Monaco, monospace;
}
#console-panel {
  position: fixed;
  top: calc(100vh - 60px);
  right: 0px;
  bottom: 5px;
  width: 100%;
  height: 60px;
  background-color: #eee;
  overflow-y: scroll;
  padding: 4px 0;
}
#console-panel code {
  display: block;
  margin-left: 4px;
}
#console-panel code.console-log:before {
  content: "\00A0  LOG: ";
  margin-right: 10px;
}
#console-panel code.console-info {
  color: #00659c;
}
#console-panel code.console-info:before {
  content: "\2139 INFO: ";
  margin-right: 8px;
}
#console-panel code.console-warn {
  color: #ec7a08;
}
#console-panel code.console-warn:before {
  content: "\26A0 WARN: ";
  margin-right: 7px;
}
#console-panel code.console-error {
  color: #c00;
}
#console-panel code.console-error:before {
  content: "\2297 ERROR: ";
}

JavaScript

for(i=0;i<5;i++) {
	console.log(i);
  console.info(i);
  console.warn(i);
  console.error(i);
}