Requirements

• 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 his 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 */

})