• Ideally this is a simple JQuery-based app. So start by creating one by first downloading jQuery
• Then create an appropriate project folder with essential files. It is a good practice to follow the below mentioned file structure.

• The main components to be created are HTML, CSS, JS buttons (render upon toggling) and a ‘run’ button. This can be done using simple lists in HTML.
• Wrap all the components and containers in appropriate classes and divisions which will then be used for references in styling. This step must be done in the future too, when the need arises.
• Create (three) containers in which the HTML, CSS, JS code snippets will be inputted by the user. For this use the textarea HTML tag.
• Finally wrap the ‘run’ button with the iframe element (can be done later). iframe element is used to render the desired output as a webpage within a webpage.

• Go back to currently existing code divisions and give appropriate class names to every relevant sub-structure of the code-editor. Few examples you may follow:

• Observe the sample code-editor image and also visit jsbin.com and implement similar styling to your code-editor. The reason for picking jsbin is because it’s styling is very beginner-friendly. But try to improve the styling of your site.
• Style each of the sub-structures like body, header, run, codeContainer, code label, iframe, etc.

• Since JQuery is being used, include its script (as a JavaScript tag) in the main HTML file. There are two ways of doing it. Explore them!
• Use .ready() method to wrap all the logic of the app’s functionalities. This is so that as soon as the DOM (Document Object Model) has been loaded, the functions and events can be triggered immediately.
• Now implement the logic of assigning a height to your code container (the pane of the code-editor where the code is input).

var windowHeight = /* Use .height() method for window-class selector */;
var headerBarHeight = /* Use .height() method for header-class selector */;
var codeContainerHeight = /* TODO */;
  
$(".codeContainer").height(/* Give the height's value along with units */);

• Then implement the logic for toggling (of buttons) the code containers to open/close.

$(".toggle").click(function() {
  $(this).toggleClass(/* Use an appropriate class name */);
  var activeDiv = /* use .HTML() method on 'this' constructor reference */;
  $(/* Logic to have a general class name */).toggle(500);
  var showingDivs = /* use .filter() and then .css() for this logic */
 
  console.log(showingDivs);
 
  var width = 100/showingDivs;
  /* Assign codeContainer it's width */

• Finally implement the ‘run’ feature which should be triggered when the user clicks the button.
• The webpage corresponding to the HTML, CSS, JS code snippets that were inputted must be rendered now. For this implement the required logic.
• For this use .contents() method (on the selector of iframe element). Using this you can insert HTML code. Basically you need to collect all the codes for the three code containers and form an HTML page containing the styling (CSS code input) and scripting (JS code input) and finally render the webpage of this new temporary HTML page made in a fourth container(the result container). This ‘new’ HTML page created is often referred to as Source Document or srcDoc.
• The code structure referred before looks like this-

$("#run").on( /* Event */, function() {
  $("iframe")./* TODO */
  /* Implement the 'run' logic command */
})

• Make sure that the styling code (CSS) and scripting code (JQuery/JavaScript) are included in the main HTML file.
• Create appropriate classes and IDs to execute all milestones while doing both styling (particular components need to be targeted) and scripting (while using selectors it becomes critical to use names that can be inter-connected).