Scribd
Upload
333 views

HTML Compiler Code

This document contains HTML and JavaScript code to display an AngularJS code editor and live preview iframe. The editor area allows typing or editing AngularJS code which can then be run to display the output in a preview iframe below using the "See Result" button. Some additional styling is included to lay out the code editor and preview areas side by side.

Uploaded by

Soumodip Chakraborty
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
333 views

HTML Compiler Code

This document contains HTML and JavaScript code to display an AngularJS code editor and live preview iframe. The editor area allows typing or editing AngularJS code which can then be run to display the output in a preview iframe below using the "See Result" button. Some additional styling is included to lay out the code editor and preview areas side by side.

Uploaded by

Soumodip Chakraborty
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<html><head>

<title>Run the file</title><meta charset="UTF-8">


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="SHORTCUT ICON" href="../../img/logo.png">
<style type="text/css">
body
{
font-size:15px;
color:#222;
line-height:25px;
font-family:sans-serif;
}
.bkTitle
{
float:left;
margin-bottom:10px;
margin-top:-5px;
}
.df,.myF_lft,.mySubHd
{
float:left
}
#myContentHolder{background-color:#F1F1F1}.df{min-height:100px;width:100%}.myIfr
amecontainer,.myTextareacontainer{float:left;height:80%;width:50%}.myIframe,.myT
extarea{height:100%;padding:15px}.mySubHd{width:10%;height:30px}.myF_rgt{float:r
ight;padding-right:15px}#myIframewrapper,#myTextareawrapper{background-color:#ff
f;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);float:left;heig
ht:470px;margin-bottom:25px;width:100%}#myTextareaCode{background-color:#fff;bor
der:none;font-family:consolas,"courier new",monospace;font-size:15px;height:100%
;padding:8px;resize:none;width:100%;float:left}.vkHeader{float:left;height:25px;
margin-bottom:10px;width:100%}#iframeResult,#iframeSource{background-color:#fff;
height:100%;width:100%}.btnRunCode{background-color:black;border:none;border-rad
ius:2px;color:#fff;cursor:pointer;padding:10px;padding-right:10px;padding-left:1
0px;transition:background-color .3s ease 0s}.btnRunCode:hover{background-color:g
rey}</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery
/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="entry-content">
<div id="vkWrapper">
<div id="myHead" class="df">
<center>
<ins class="adsby" style="display:inline-block;width:728px;height:90px"></ins>
</center> </div>
<div class="df" id="myContentHolder">
<div class="myTextareacontainer">
<div class="myTextarea">
<div class="vkHeader">
<div class="myF_lft">Edit This Code : </div>
<div class="myF_rgt"> <button class="btnRunCode" type="button" onclick="runCode(
)">See Result </button> </div>
</div>
<div id="myTextareawrapper">
<textarea class="code_input" spellcheck="false" id="myTextareaCode" autocomplete
="off">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min
.js"&gt;&lt;/script&gt;
&lt;body&gt;
&lt;div ng-app=""&gt;
&lt;p&gt;Input something in the input box:&lt;/p&gt;
&lt;p&gt;Name : &lt;input type="text" ng-model="name" placeholder="Enter n
ame here"&gt;&lt;/p&gt;
&lt;h1&gt;My name is {{name}}&lt;/h1&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea>
</div>
</div>
</div>
<div class="myIframecontainer">
<div class="myIframe">
<div class="vkHeader">
<div class="myF_lft">Result : </div>
</div>
<div id="myIframewrapper"><iframe frameborder="0" id="iframeResult"></iframe></d
iv>
</div>
</div>
</div>
</div> <style type="text/css">.td-main-content-wrap .td-container{width:100%!imp
ortant;}</style>
<script type="text/javascript">
$(document).ready(function(){
});
function runCode_1() {

var text = document.getElementById("myTextareaCode").value;


var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
document.getElementById("myIframewrapper").innerHTML = "";
document.getElementById("myIframewrapper").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDoc
ument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
ifrw.document.body.contentEditable = true;
ifrw.document.body.contentEditable = false;
}
}
runCode_1();
function runCode() {

var text = document.getElementById("myTextareaCode").value;


var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
document.getElementById("myIframewrapper").innerHTML = "";
document.getElementById("myIframewrapper").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDoc
ument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
ifrw.document.body.contentEditable = true;
ifrw.document.body.contentEditable = false;
}
}

</script><p></p>
</div>

</body></html>

MATHWAY CODE-<center> <iframe src="https://www.mathway.com/ProblemWidget.aspx?af


filiateid=affil61322" frameborder="0" scrolling="auto" style="width:600px; heigh
t:565px; border:1px solid #E1E1E1;"></iframe> </center>

You might also like