Instant html and javascript editor (a.k.a. online real-time html and javascript editor) allows to edit html and javascript source online and immediately see the outcome of html rendering and javascript execution. The ability to change the javascript code and html markup and immediately see the outcome is crucial for fast prototyping and proof of concept implementations. Html and javascript editor could also be used for hostless site demos.

Source Code.


HTML:

  
    <html>
    <head>
      <title>Real Time Editor</title>
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body id="body">
      <div class="buttons">
        <button class="button " onclick="viewport()" title="Change Viewport"><i class="fa fa-tv fa-2x"></i></button>
        <button class="button min" onclick="minimize()" title="Minimize Text Box"><i class="fa fa-window-minimize fa-2x"></i></button>
        <button class="button max" onclick="maximize()" title="Maximize Text Box"><i class="fa fa-window-maximize fa-2x"></i></button>
      </div>
      <div class="main" id="main">
        <textarea id="editor-textarea" onkeyup="refresh()">
    
          </textarea>
        <iframe id="viewer"></iframe>
      </div>
    </body>
    </html>
 
Markup

CSS:

  
    * {
      padding: 0px;
      margin: 0px;
  
    }
  
    body {
      background-color: #333;
    }
  
    .main {
      width: 100%;
      height: 94%;
      background-color: #333;
      display: inline-flex;
      transition: display .5s ease;
    }
  
    .grid {
      display: inline-grid;
    }
  
    #editor-textarea {
      width: 99%;
      height: 95%;
      margin: 5px;
      padding: 5px;
      margin-top: 0px;
      font-family: consolas;
    }
  
  
    #viewer {
      border: none;
      width: 99%;
      height: 95%;
      background-color: #fff;
      margin: 5px;
      margin-top: 0px;
    }
  
    .buttons {
      float: right;
      display: inline-flex;
      border: 1px solid #fff;
      margin-right: 5px;
    }
  
    .button {
      margin: 5px 2px 0px 2px;
      width: 100%;
      background-color: #333;
      color: #fff;
  border: 0px solid #fff;
      padding: 2px 10px;
      cursor: pointer;
    }
 
CSS

JavaScript: 

  
    <script>
    function refresh() {
      textarea = document.getElementById('editor-textarea');
      var textContent = textarea.value;
      document.getElementById('viewer').srcdoc = textContent;
    }

    function viewport() {
      var x = document.getElementById("main");
      x.classList.toggle("grid");
    }

    function minimize() {
      textarea = document.getElementById('editor-textarea');
      textarea.style.display="none"
    }

    function maximize() {
      textarea = document.getElementById('editor-textarea');
      textarea.style.display = "block";
    }
  </script>
JavaScript
Tags

Post a Comment

أحدث أقدم