From dd42dd5909b619db8d7aa359e8bff8d26338c4a6 Mon Sep 17 00:00:00 2001
From: Taher Barakat <taher.barakat12223@gmail.com>
Date: Sun, 24 Mar 2024 12:44:19 +0300
Subject: [PATCH] apply localstorage concept to save inputs and outputs

---
 js/app.js | 72 +++++++++++++++++++++++++++++++------------------------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/js/app.js b/js/app.js
index 86f5d86..baeccb0 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,37 +1,47 @@
-document.getElementById("htmlCode").value="<div>\n\n</div>";
-document.getElementById("cssCode").value="<style>\n\n</style>";
-document.getElementById("jsCode").value="<script>\n\n</script>";
+if (localStorage.getItem("live-code-editor"))
+     var { htmlCode, cssCode, jsCode } = JSON.parse(
+          localStorage?.getItem("live-code-editor")
+     );
 
-function showPreview(){
-    var htmlCode = document.getElementById("htmlCode").value;
-    var cssCode = ""+document.getElementById("cssCode").value+"";
-    var jsCode = ""+document.getElementById("jsCode").value+"";
-    var frame = document.getElementById("preview-window").contentWindow.document;
-    frame.open();
-    frame.write(htmlCode+cssCode+jsCode);
-    frame.close();
+document.getElementById("htmlCode").value = htmlCode || "<div>\n\n</div>";
+document.getElementById("cssCode").value = cssCode || "<style>\n\n</style>";
+document.getElementById("jsCode").value = jsCode || "<script>\n\n</script>";
+showPreview();
+function showPreview() {
+     var htmlCode = document.getElementById("htmlCode").value;
+     var cssCode = "" + document.getElementById("cssCode").value + "";
+     var jsCode = "" + document.getElementById("jsCode").value + "";
+     var frame =
+          document.getElementById("preview-window").contentWindow.document;
+     let code = { htmlCode, cssCode, jsCode };
+     localStorage.setItem("live-code-editor", JSON.stringify(code));
+
+     frame.open();
+     frame.write(htmlCode + cssCode + jsCode);
+     frame.close();
 }
 
-function show(x){
-    document.getElementById("html").style.display="none";
-    document.getElementById("css").style.display="none";
-    document.getElementById("js").style.display="none";
-    document.getElementById("result").style.display="none";
-    document.getElementById(x).style.display="block";
+function show(x) {
+     document.getElementById("html").style.display = "none";
+     document.getElementById("css").style.display = "none";
+     document.getElementById("js").style.display = "none";
+     document.getElementById("result").style.display = "none";
+     document.getElementById(x).style.display = "block";
 }
 
-function show_all(){
-    if(window.innerWidth>=992)
-    {
-        document.getElementById("html").style.display="block";
-        document.getElementById("css").style.display="block";
-        document.getElementById("js").style.display="block";
-        document.getElementById("result").style.display="block";
-    }
-    if(window.innerWidth<992 && document.getElementById("html").style.display=="block")
-    {
-        document.getElementById("css").style.display="none";
-        document.getElementById("js").style.display="none";
-        document.getElementById("result").style.display="none";
-    }
+function show_all() {
+     if (window.innerWidth >= 992) {
+          document.getElementById("html").style.display = "block";
+          document.getElementById("css").style.display = "block";
+          document.getElementById("js").style.display = "block";
+          document.getElementById("result").style.display = "block";
+     }
+     if (
+          window.innerWidth < 992 &&
+          document.getElementById("html").style.display == "block"
+     ) {
+          document.getElementById("css").style.display = "none";
+          document.getElementById("js").style.display = "none";
+          document.getElementById("result").style.display = "none";
+     }
 }