Coding an "Live-Coder"

Question

I have a question, I'm working on an website like CodePen, Trinket where you can write your code and save it afterwards I'm basically done, but i dont know how to code an system that saves the "file" here some code:

        function showPreview() {
        var htmlcode = document.getElementById("htmlcode").value;
        var csscode = "<style>"+document.getElementById("csscode").value+"</style>";
        var jscode = "<scri"+"pt>"+document.getElementById("jscode").value+"</scri"+"pt>";
        var frame = document.getElementById("preview_window").contentWindow.document;
        frame.open();
        frame.write(htmlcode+csscode+jscode);
        frame.close();
     
    }

       <div class="code_area">
        <textarea id="htmlcode" placeholder="HTML CODE" oninput="showPreview()"></textarea>
        <textarea id="csscode" placeholder="CSS CODE" oninput="showPreview()"></textarea>
        <textarea id="jscode" placeholder="JAVASCRIPT CODE" oninput="showPreview()"></textarea>
    </div>
    <div class="preview_area">
        <iframe id="preview_window"></iframe>
    </div>

-ROSE

4

Store the text in a database – ggdx Dec 13 '20 at 16:30

score 2 · Answer 1 · answered Dec 13 '20 at 16:53

If you want to generate a file on the client side, well you can do this

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// download the file
download("hello.html","This is the content of the file");

G-Cyrillus · Accepted Answer · 2020-12-13T18:11:21.023

It could also be a good idea to add a doctype and a few tags to generate a proper HTML file.

Prompt can also help you to name that file you want to save .

possible example (without a frame to avoid cross-origin warnings)

function showPreview() {
  let htmlcode = document.getElementById("htmlcode").value;
  let csscode = "   <style>" + document.getElementById("csscode").value + "</style>\n";
  let jscode = "   <scri" + "pt>" + document.getElementById("jscode").value + "</scri" + "pt>\n";

  let code = jscode + csscode + htmlcode;
  let frame = document.getElementById("preview_area");
  frame.innerHTML = code;

}

function save() {
  let doc = `<!doctype html>
<html lang="en">
   <head>
     <meta charset="utf-8">
     <title>  HTML5 </title>
  </head>
<body>
`;
  let endOfdoc = `
  </body>
  </html>`;
  let filename = prompt("Please enter a name for your file", "");
  code = document.querySelector("#preview_area").innerHTML;
  code = doc + code + endOfdoc;
  code = code.replace(/\n/g, "\r\n"); // To retain the Line breaks.
  var blob = new Blob([code], {
    type: "text/html"
  });
  var anchor = document.createElement("a");
  anchor.download = filename + ".html";
  anchor.href = window.URL.createObjectURL(blob);
  anchor.target = "_blank";
  anchor.style.display = "none"; // just to be safe!
  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);
}

#preview_area {
  border: solid;
  margin: 0.25em;
  background: #fff
}

textarea {
  flex: 1;
  margin: 0.5em;
}

body {
  display: grid;
  height: 100vh;
  margin: 0;
  grid-template-rows: auto 1fr;
  background: #555;
}

.code_area {
  display: flex;
  flex-wrap: wrap; 
}

button {
  margin: auto;
}

<div class="code_area">
  <textarea id="htmlcode" placeholder="HTML CODE" oninput="showPreview()"></textarea>
  <textarea id="csscode" placeholder="CSS CODE" oninput="showPreview()"></textarea>
  <textarea id="jscode" placeholder="JAVASCRIPT CODE" oninput="showPreview()"></textarea>

</div>
<div id="preview_area">
</div> <button type="button" onclick="save()"> Save & download my beautiful code </button>

code to save the file inspired from Saving HTML5 textarea contents to file

codepen to play with : https://codepen.io/gc-nomade/pen/rNMjdmJ

Coding an "Live-Coder"

2 Answers2