diff --git a/.hintrc b/.hintrc new file mode 100644 index 0000000..6b3a691 --- /dev/null +++ b/.hintrc @@ -0,0 +1,9 @@ +{ + "extends": [ + "development" + ], + "hints": { + "disown-opener": "off", + "highest-available-document-mode": "off" + } +} \ No newline at end of file diff --git a/README.md b/README.md index d66b02d..9d161a6 100644 --- 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. + + diff --git a/index.html b/index.html index 232ce3b..90f1801 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ +
+
+
+
+
+
+
+
+ oninput="showPreview()"> +
+
+ oninput="showPreview()"> +
+
+ oninput="showPreview()"> +
+
- +
+
+
+ diff --git a/js/app.js b/js/app.js index 86f5d86..8519221 100644 --- a/js/app.js +++ b/js/app.js @@ -1,17 +1,50 @@ -document.getElementById("htmlCode").value="
\n\n
"; -document.getElementById("cssCode").value=""; -document.getElementById("jsCode").value=""; +// 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') || "
\n\n
"; +const cssSavedStorage = localStorage.getItem('cssStorage') || ""; +const jsSavedStorage = localStorage.getItem('jsStorage') || ""; + +// 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"; } -} +} \ No newline at end of file