From f506e7204e10957ae9641650499eee400e1bcbc5 Mon Sep 17 00:00:00 2001
From: Mohab Yaser <mohabkhaleefa540@gmail.com>
Date: Wed, 15 Nov 2023 19:53:18 +0200
Subject: [PATCH] Added feature: enable localStorage usage to store the user
 input

---
 index.html |  4 ++++
 main.js    | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 style.css  | 46 +++++++++++++++++++++++++++++++++-----
 3 files changed, 108 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 8b0e0b3..11e2b68 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,10 @@
     <div class="gen-btn-container">
       <button class="gen-btn">Generate</button>
     </div>
+    <div class="storage-btns-container">
+      <button class="storage-save">Save</button>
+      <button class="storage-reset">Reset</button>
+    </div>
     <div class="problems-container"></div>
     <script src="main.js"></script>
   </body>
diff --git a/main.js b/main.js
index 464b521..cca4ef1 100644
--- a/main.js
+++ b/main.js
@@ -104,6 +104,68 @@ function dummy_data() {
     // document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
 }
 
+document.getElementsByClassName('storage-reset')[0].addEventListener('click',
+    () => {
+        localStorage.clear();
+    });
+
+document.getElementsByClassName('storage-save')[0].addEventListener('click',
+    () => {
+        let tags_btns = document.getElementsByClassName("tag-btn");
+        let tags = '';
+        for (let i = 0; i < tags_btns.length; i++) {
+            let tag = tags_btns[i];
+            if (tag.style.backgroundColor === green) {
+                tags += i.toString() + ',';
+            }
+        }
+
+        tags = tags.slice(0, -1);
+
+        let [from, to, problems_cnt] = document.getElementsByClassName("another-class");
+        from = from.value;
+        to = to.value;
+        problems_cnt = problems_cnt.value;
+
+        let found_handles = document.getElementsByClassName("accepted-handle tooltip");
+        let handles = '';
+
+        for (let i = 0; i < found_handles.length; i++) {
+            handles += found_handles[i].innerText + ',';
+        }
+
+        handles = handles.slice(0, -1);
+
+        localStorage.setItem('tags', tags);
+        localStorage.setItem('from', from);
+        localStorage.setItem('to', to);
+        localStorage.setItem('problems_cnt', problems_cnt);
+        localStorage.setItem('handles', handles);
+    });
+
+function load_from_local_storage() {
+    let tags_btns = document.getElementsByClassName("tag-btn");
+    let tags = localStorage.getItem('tags').split(',');
+
+    if (tags.length > 1) {
+        for (let i = 0; i < tags.length; i++) {
+            tags_btns[+tags[i]].style.backgroundColor = green;
+        }
+    }
+
+    let [from, to, problems_cnt] = document.getElementsByClassName("another-class");
+    from.value = localStorage.getItem('from');
+    to.value = localStorage.getItem('to');
+    problems_cnt.value = localStorage.getItem('problems_cnt');
+
+    let handles = localStorage.getItem('handles').trim().split(',');
+    console.log(handles);
+
+    for (let i = 0; i < handles.length; i++) {
+        add_handle(handles[i]);
+    }
+}
+
 window.addEventListener("load", () => {
     document.getElementsByClassName("tags-container")[0].innerHTML = tags();
 
@@ -125,6 +187,7 @@ window.addEventListener("load", () => {
         });
     }
 
+    load_from_local_storage();
     // dummy_data();
 });
 
@@ -189,7 +252,7 @@ document
         handles = handles.split(',');
         handles = new Set(handles);
 
-        handles.forEach(async (handle) => {
+        handles.forEach(async(handle) => {
             handle = handle.trim();
             if (handle === "")
                 Swal.fire({
diff --git a/style.css b/style.css
index a819bf3..868af31 100644
--- a/style.css
+++ b/style.css
@@ -6,8 +6,8 @@ body {
 	max-width: 800px;
 	min-width: 600px;
 	margin: auto;
-/*	margin-top: 100px;*/
-/*	margin-bottom: 100px;*/
+	margin-top: 50px;
+	margin-bottom: 50px;
 	padding: 8px;
 }
 
@@ -237,15 +237,16 @@ input {
 }
 
 .gen-btn-container {
+	display: block;
 	text-align: center;
 	margin: 10px;
 }
 
 .gen-btn {
-	width: 150px;
+	width: 180px;
 	height: 40px;
-	border: 3px solid;
-	border-radius: 10px;
+	border: 0px solid;
+	border-radius: 7px;
 	font-family: monospace;
 	font-weight: bold;
 	font-size: 20px;
@@ -268,4 +269,37 @@ input {
 	border-radius: 4px;
 	width: 50px;
 	font-size: 15px;
-}
\ No newline at end of file
+}
+
+.storage-btns-container {
+	display: block;
+	text-align: center;
+}
+
+.storage-save, .storage-reset {
+	cursor: pointer;
+	width: 90px;
+	font-family: monospace;
+	height: 30px;
+	font-size: 18px;
+	font-weight: bold;
+	border: 0px solid grey;
+	border-radius: 7px;
+	transition: 0.5s;
+}
+
+.storage-reset {
+	background-color: lightcoral;
+}
+
+.storage-reset:hover {
+	background-color: #fd4a4a;
+}
+
+.storage-save {
+	background-color: lightgreen;
+}
+
+.storage-save:hover {
+	background-color: #4fff4f;
+} 
\ No newline at end of file