'task done'

README.md

@@ -1,7 +1,14 @@
 # live-web-code-editor
 
-hello there, your task is to implement auto-save functionality with localStorage, and auto-load the saved code when user revisits or refreshes the page.
+Problem:
 
-fork the repository and start working on it.
+I have been tasked with implementing an auto-save functionality for a text editor application that uses localStorage to save the code written by the user. The goal is to ensure that any changes I make to the code are automatically saved to my browser storage without any intervention. Additionally, the saved code should be loaded automatically when I revisit or refresh the page, allowing me to pick up where I left off.
 
-best of luck.
+
+Solution:
+
+
+To implement the auto-save functionality with localStorage, I  followed these steps:
+1-I will create a text editor component in my web application where users can write their code.
+
+2-I will define a function to save the user's code to the browser's localStorage. I can use the localStorage.setItem() method to save the code as a string, using a unique identifier to identify the code.

js/app.js

@@ -1,17 +1,45 @@
-document.getElementById("htmlCode").value="<div>\n\n</div>";
-document.getElementById("cssCode").value="<style>\n\n</style>";
-document.getElementById("jsCode").value="<script>\n\n</script>";
+var savedHtmlCode = localStorage.getItem("htmlCode") || "<div>\n\n</div>";
+var savedCssCode = localStorage.getItem("cssCode") || "<style>\n\n</style>";
+var savedJsCode = localStorage.getItem("jsCode") || "<script>\n\n</script>";
+
+document.getElementById("htmlCode").value = savedHtmlCode;
+document.getElementById("cssCode").value = savedCssCode;
+document.getElementById("jsCode").value = savedJsCode;
+
+document.getElementById("htmlCode").addEventListener("input", function() {
+  var htmlCode = document.getElementById("htmlCode").value;
+  localStorage.setItem("htmlCode", htmlCode);
+});
+
+document.getElementById("cssCode").addEventListener("input", function() {
+  var cssCode = document.getElementById("cssCode").value;
+  localStorage.setItem("cssCode", cssCode);
+});
+
+document.getElementById("jsCode").addEventListener("input", function() {
+  var jsCode = document.getElementById("jsCode").value;
+  localStorage.setItem("jsCode", jsCode);
+});
 
 function showPreview(){
     var htmlCode = document.getElementById("htmlCode").value;
     var cssCode = ""+document.getElementById("cssCode").value+"";
     var jsCode = ""+document.getElementById("jsCode").value+"";
+
+    localStorage.setItem("htmlCode", htmlCode);
+    localStorage.setItem("cssCode", cssCode);
+    localStorage.setItem("jsCode", jsCode);
+
     var frame = document.getElementById("preview-window").contentWindow.document;
     frame.open();
     frame.write(htmlCode+cssCode+jsCode);
     frame.close();
 }
 
+window.onload = function() {
+  showPreview();
+};
+
 function show(x){
     document.getElementById("html").style.display="none";
     document.getElementById("css").style.display="none";
@@ -34,4 +62,4 @@ function show_all(){
         document.getElementById("js").style.display="none";
         document.getElementById("result").style.display="none";
     }
-}
+}