From 3c242cc04c47d810b1b1eedf6f5e7e53a0b1a321 Mon Sep 17 00:00:00 2001
From: Assem Mohamed <129564950+Assem29@users.noreply.github.com>
Date: Fri, 21 Apr 2023 04:07:46 +0200
Subject: [PATCH 1/2] 'task done'

---
 js/app.js | 36 ++++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/js/app.js b/js/app.js
index 86f5d86..344e8c5 100644
--- a/js/app.js
+++ b/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";
     }
-}
+}  

From fcd2d9a0518cf3be85e8726853c2d440a2ad2d6d Mon Sep 17 00:00:00 2001
From: Assem Mohamed <129564950+Assem29@users.noreply.github.com>
Date: Fri, 21 Apr 2023 04:15:36 +0200
Subject: [PATCH 2/2] 'task done'

---
 README.md | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index d66b02d..0761455 100644
--- a/README.md
+++ b/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.