Coding an “Live-Coder”

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

Answer

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, "rn"); // 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