intern2grow · Ayman98-art · Oct 3, 2023
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "disown-opener": "off",
+    "highest-available-document-mode": "off"
+  }
+}
diff --git a/README.md b/README.md
@@ -5,3 +5,9 @@ hello there, your task is to implement auto-save functionality with localStorage
 fork the repository and start working on it.
 
 best of luck.
+
+<!-- 
+    https://github.com/Assem29
+
+    I appreciate this man's role in understanding this code and solving this task
+-->
diff --git a/index.html b/index.html
@@ -10,61 +10,77 @@
     <link rel="stylesheet" href="./css/style.css">
 </head>
 <body class="bg-light mt-5 pt-2" onresize="show_all()">
+
     <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom fixed-top">
         <div class="container-fluid">
             <a class="navbar-brand" href="#home">Online Live Web Code Editor</a>
         </div>
     </nav>
 
     <div class="container-fluid mt-2">
+
         <div class="row mb-2" id="controls">
+
             <div class="col-3">
                 <div class="container-fluid p-0">
                     <button class="btn btn-light w-100 p-1 border rounded" onclick="show('html')">HTML</button>
                 </div>
             </div>
+
             <div class="col-3">
                 <div class="container-fluid p-0">
                     <button class="btn btn-light w-100 p-1 border rounded" onclick="show('css')">CSS</button>
                 </div>
             </div>
+
             <div class="col-3">
                 <div class="container-fluid p-0">
                     <button class="btn btn-light w-100 p-1 border rounded" onclick="show('js')">JS</button>
                 </div>
             </div>
+
             <div class="col-3">
                 <div class="container-fluid p-0">
                     <button class="btn btn-primary w-100 p-1 border rounded" onclick="show('result')">Result</button>
                 </div>
             </div>
+
         </div>
 
         <div class="row">
+
             <div class="col-lg-4 col-md-12 col-sm-12" id="html">
                 <div class="container-fluid border rounded p-1 bg-dark text-light editor">
                     <textarea id="htmlCode" placeholder="HTML Code" 
-					oninput="showPreview()"></textarea>
+                        oninput="showPreview()">
+                    </textarea>
                 </div>
             </div>
+
             <div class="col-lg-4 col-md-12 col-sm-12" id="css">
                 <div class="container-fluid border rounded p-1 bg-dark text-light editor">
                     <textarea id="cssCode" placeholder="CSS Code" 
-					oninput="showPreview()"></textarea>
+                        oninput="showPreview()">
+                    </textarea>
                 </div>
             </div>
+
             <div class="col-lg-4 col-md-12 col-sm-12" id="js">
                 <div class="container-fluid border rounded p-1 bg-dark text-light editor">
                     <textarea id="jsCode" placeholder="JavaScript Code" 
-					oninput="showPreview()"></textarea>
+                        oninput="showPreview()">
+                    </textarea>
                 </div>
             </div>
+
             <div class="col-lg-12 col-md-12 col-sm-12 mt-2 mb-2" id="result">
                 <div class="container-fluid border rounded p-1 result bg-white">
-                    <iframe id="preview-window"></iframe>
+                    <iframe id="preview-window" title="preview"></iframe>
                 </div>
             </div>
+
         </div>
+
     </div>
 
     <footer>
@@ -73,6 +89,7 @@
             <a class="text-reset fw-bold" href="https://ahmed0saber.github.io/bootstrap-projects/portfolio/" target="_blank">Ahmed Saber</a>
         </div>
     </footer>
+
 </body>
 <script src="./bootstrap/bootstrap.bundle.min.js"></script>
 <script src="./js/app.js"></script>

diff --git a/js/app.js b/js/app.js
@@ -1,17 +1,50 @@
-document.getElementById("htmlCode").value="<div>\n\n</div>";
-document.getElementById("cssCode").value="<style>\n\n</style>";
-document.getElementById("jsCode").value="<script>\n\n</script>";
+// SetItem in localStorage
+document.getElementById("htmlCode").addEventListener('input', ()=>{
+    const htmlStorage = document.getElementById('htmlCode').value
+    localStorage.setItem('htmlStorage', htmlStorage);
+})
+document.getElementById("cssCode").addEventListener('input', ()=>{
+    const cssStorage = document.getElementById('cssCode').value
+    localStorage.setItem('cssStorage', cssStorage);
+})
+document.getElementById("jsCode").addEventListener('input', ()=>{
+    const jsStorage = document.getElementById('jsCode').value
+    localStorage.setItem('jsStorage', jsStorage);
+})
+
+// getItem in localStorage
+const htmlSavedStorage = localStorage.getItem('htmlStorage') || "<div>\n\n</div>";
+const cssSavedStorage = localStorage.getItem('cssStorage') || "<style>\n\n</style>";
+const jsSavedStorage = localStorage.getItem('jsStorage') || "<script>\n\n</script>";
+
+// equal value on localStorage with value i write on document;
+document.getElementById('htmlCode').value = htmlSavedStorage
+document.getElementById('cssCode').value = cssSavedStorage
+document.getElementById('jsCode').value = jsSavedStorage
 
 function showPreview(){
     var htmlCode = document.getElementById("htmlCode").value;
-    var cssCode = ""+document.getElementById("cssCode").value+"";
-    var jsCode = ""+document.getElementById("jsCode").value+"";
+    var cssCode = "" + document.getElementById("cssCode").value + "";
+    var jsCode = "" + document.getElementById("jsCode").value + "";
+
+    // SetItem in localStorage;
+    localStorage.setItem('htmlStorage', htmlCode);
+    localStorage.setItem('cssStorage', cssCode);
+    localStorage.setItem('jsStorage', jsCode);
+
     var frame = document.getElementById("preview-window").contentWindow.document;
     frame.open();
     frame.write(htmlCode+cssCode+jsCode);
     frame.close();
 }
 
+// when user load page or revisit the page , 
+// find the svaed code he had written ;
+window.onload= function(){
+    showPreview()
+}
+
+// show in small screen
 function show(x){
     document.getElementById("html").style.display="none";
     document.getElementById("css").style.display="none";
@@ -20,6 +53,7 @@ function show(x){
     document.getElementById(x).style.display="block";
 }
 
+// show in small screen
 function show_all(){
     if(window.innerWidth>=992)
     {
@@ -34,4 +68,4 @@ function show_all(){
         document.getElementById("js").style.display="none";
         document.getElementById("result").style.display="none";
     }
-}
+}