Home›Programming›CSS›Live Code Editor using HTML, CSS and JavaScript

Live Code Editor using HTML, CSS and JavaScript

September 10, 2021

1097

In this video, we will create a Codepen like Live Code Editor for HTML, CSS and JavaScript with Live Realtime Preview.

Source Code :

index.html

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

    <link rel="stylesheet" href="style.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="app.js"></script>
  </body>
</html>

style.css

body{
  text-align: center;
}
textarea{
  width: 32%;
  float: top;
  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;
}

app.js

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();

ALSO READ How to create FAQ page using HTML and CSS ?