Tutorial to Build Online Code Playground

We all want to have our own code playground web app as code learner isn’t but due to no proper tutorial, we are unable to do it. Also, almost the maximum coding editor script that is available in the online marketplace is too complex for a beginner to understand due to the presence of PHP and MySQL. Isn’t it? So, today we will help to build your own code playground with a complete tutorial.

Key Features:

  • Real-Time Gradle
  • Flexible
  • Support all kinds of Html, CSS, Js codes function.
  • Easy Clear screen Support.
  • Totally Free.

Requirements

  1. The prior requirement you will need while building this project is a good & fast Pc. You can choose Mac Book, Asus Zenbook, Dell Inspiron, or any Pc with a high processor.
  2. A good code editor such as VS Code or atom.
  3. A notebook with a pen to write an explanation.
  4. Your concentration.

How to make a Code Playground:

  • Make a folder called code playground & make two separate folders called img, CSS, JS where you will store your image files, Css & javascript files.
  • Go through the notations down below & create an index.html. After that put the codes down below.
  • The next step is to go to your folders that you have created before & make files such as style.css[For Css section] & editor.js, jquery.min.js[ Javascript Folder] & put each code by following the description.
  • Lastly, test your web app live to check whether the steps that you have followed are correctly done. That’s it.

Index.html

<!DOCTYPE html>
<html>
<head>

  <!-- Site Information -->
  <meta charset="utf-8" />
  <title>Code Editor</title>
  <meta name="description" content="Preview HTML, CSS, and JavaScript live in your browser in realtime." />
  <meta name="keywords" content="editor, realtime editor, jsfiddle, codepen, stackoverflow, HTML, CSS, JavaScript" />
  <meta property="og:title" content="Live Editor" />
  <meta property="og:url" content="http://staticresource.com/editor" />
  <meta property="og:description" content="Preview HTML, CSS, and JavaScript live in your browser in realtime." />

  <!-- Cascading Style Sheets -->
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <link href="css/style.css" rel="stylesheet">

  <!-- JavaScript -->
  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/editor.js" type="text/javascript"></script>

  <!-- Mobile Settings -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">

  <!-- Favicon and Thumbnails -->
  <meta property="og:image" content="img/ico/thumb.png" />
  <link rel="shortcut icon" type="image/png" href="img/ico/favicon.png">
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/ico/apple-touch-icon-57-precomposed.png">

</head>
<body>
  <section>
    <h1>Code Playground</h1><a class="clearLink" href="#" title="Click to clear all">clear</a>
    <textarea id="html" value="" placeholder="HTML" autocapitalize="off" autofocus></textarea>
    <textarea id="css" value="" placeholder="CSS" autocapitalize="off"></textarea>
    <textarea id="js" value="" placeholder="JavaScript" autocapitalize="off"></textarea>
    <iframe id="preview"></iframe>
  </section>
</body>
</html>

 Style.css

/* Code Playground css Styles */

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
  }

html,
body,
section {
  height: 100%;
}

body {
  background: #eaeaea;
  padding: 0;
  margin: 0;
}

h1 {
  font-family: 'Source Sans Pro', sans-serif;
  text-align: center;
  color: #777;
  margin: 0;
  font-weight: 200;
}

section {
  background: #fff;
  width: 100%;
  min-height: 100%;
  padding: 15px;
  margin: 0;
  box-shadow: rgba(0,0,0,.15) 0 15px 50px;
  position: relative;
}

.clearLink {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px;
  background: #eaeaea;
  color: #777;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 10pt;
  text-shadow: rgba(255,255,255,0.5) 0 1px 2px;
  text-decoration: none;
  outline: none;
}

.clearLink:hover {
  background: #f0f0f0;
}

textarea {
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  width: 32%;
  min-height: 150px;
  margin: 15px 2% 0 0;
  float: left;
  font-size: 10pt;
  line-height: 14pt;
  font-weight: 200;
  padding: 10px;
  color: #333;
  border: 1px solid #cdcdcd;
  background: #fff;
  box-shadow: inset rgba(0,0,0,.05) 0 3px 10px;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

textarea:focus {
  border-color: #33dd33;
}

textarea#js {
  margin: 15px 0 0 0;
}

iframe {
  width: 100%;
  margin: 15px 0;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  min-height: 400px;
  margin: 15px 0 0 0;
}

@media (min-width:768px) {

  body {
    padding: 50px 50px 0 50px;
  }

  html,
  body,
  section {
    height: auto;
  }

}

editor.js

$(document).ready(function(){

  // Publish output from HTMl, CSS, and JS textareas in the iframe below
  onload=(document).onkeyup=function(){
    (document.getElementById("preview").contentWindow.document).write(
      html.value+"<style>"+css.value+"<\/style><script>"+js.value+"<\/script>"
    );
    (document.getElementById("preview").contentWindow.document).close()
  };

  // Pressing the Tab key inserts 2 spaces instead of shifting focus
  $("textarea").keydown(function(event){
    if(event.keyCode === 9){
      var start = this.selectionStart;
      var end = this.selectionEnd;
      var $this = $(this);
      var value = $this.val();
      $this.val(value.substring(0, start)+"  "+value.substring(end));
      this.selectionStart = this.selectionEnd = start+1;
      event.preventDefault();
    }
  });

  // Store contents of textarea in sessionStorage
  $("textarea").keydown(function(){
      sessionStorage[$(this).attr("id")] = $(this).val();
  });
  $("#html").html(sessionStorage["html"]);
  $("#css").html(sessionStorage["css"]);
  $("#js").html(sessionStorage["js"]);
  function init() {
    if (sessionStorage["html"]) {
        $("#html").val(sessionStorage["html"]);
      }
    if (sessionStorage["css"]) {
        $("#css").val(sessionStorage["css"]);
      }  
    if (sessionStorage["js"]) {
        $("#js").val(sessionStorage["js"]);
      }
  };

  // Clear textareas with button
  $(".clearLink").click(clearAll);

  function clearAll(){
    document.getElementById("html").value = "";
    document.getElementById("css").value = "";
    document.getElementById("js").value = "";
    sessionStorage.clear();
  }

});

jquery.min.js

The jquery.min.js is given in the button section as the codes are way too large to be inserted in a blog post.

Conclusion:

The code solely depends on the Javascript Files for it’s functioning make sure to go through the different notation given above the codes first. Make sure to check whether the codes you have to put are correctly written to ensure everything is correctly placed. It will help to avoid errors. Lastly, if you find the article useful kindly share it. Thank You.

Full resources:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.