Javascript small project-3

web designing code editor:-

HTML code-


<!DOCTYPE html>
<html>
  <head>
    <title>Code Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="web_app1.css">
  </head>

  <body>

    <textarea id="html" placeholder="HTML"></textarea>
    <textarea id="css" placeholder="CSS"></textarea>
    <textarea id="js" placeholder="JavaScript"></textarea>
    <iframe id="code"></iframe>

    <script type="text/javascript" src="web_app1.js"></script>

  </body>
</html>

CSS code-

body {
    text-align: center;
  }
  
  textarea {
    width: 32%;
 
    min-height: 250px;
    overflow: scroll;
    margin: auto;
    display: inline-block;
    background: #F4F4F9;
    outline: none;
    font-family: Courier, sans-serif;
    font-size: 14px;
  }
  
  iframe {
    bottom: 0;
    position: relative;
    width: 100%;
    height: 35em;
  }

Javascript code-

function compile() {

    var html = document.getElementById("html");
    var css = document.getElementById("css");
    var js = document.getElementById("js");
    var code = document.getElementById("code").contentWindow.document;
    
     document.body.onkeyup = function(){
        code.open();
        code.writeln(html.value+"<style>"+css.value+"</style>"+"<script>" + js.value + "</script>");
        code.close();
      };
    };

compile();



output:-


                                                     *******************





Comments

Post a Comment

Please do not enter any spam link in the comment box.

Popular Posts