Merge pull request #31 from ThuanTheSecond/main

Solves issue 30#
VBproDev · Nov 12, 2024 · ddff7ec · ddff7ec
2 parents a4b71e4 + 348f4cc
commit ddff7ec
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -61,6 +61,13 @@
 </head>
 
 <body>
+  <div class="d-flex justify-content-center">
+    <div class="popup_saved d-flex align-items-center bg-success text-white rounded-pill py-2 px-4 position-fixed top-0 mt-3 transition-opacity">
+      <span>Design has been saved</span>
+      <button class="btn-close btn-close-white ms-2" aria-label="Close"></button>
+    </div>
+  </div>
+
   <div class="d-flex justify-content-center p-2">
     <h4 class="me-1">Line Color:</h4>
     <input class="color me-3" type="color" />

diff --git a/min/script.min.js b/min/script.min.js
diff --git a/min/stylesheet.min.css b/min/stylesheet.min.css
diff --git a/script.js b/script.js
@@ -8,7 +8,9 @@ const ctx = canvas.getContext('2d');
 const design = document.querySelector('.design');
 const userDesign = document.querySelector('.user-design');
 const save = document.querySelector('.save');
+const popup_saved = document.querySelector('.popup_saved');
 const curveInputContainer = document.querySelector('.curve-input-container');
+const btnClose = document.querySelector('.btn-close');
 const localCanvas = localStorage.getItem('canvasArray');
 const previewLineHandler = (e) => {
     clear();
@@ -339,6 +341,15 @@ set === null || set === void 0 ? void 0 : set.addEventListener('click', () => {
 });
 save === null || save === void 0 ? void 0 : save.addEventListener('click', () => {
     localStorage.setItem('canvasArray', JSON.stringify(canvasArray));
+    num = num + canvasArray.length;
+    popup_saved.classList.add('show');
+    btnClose === null || btnClose === void 0 ? void 0 : btnClose.addEventListener('click', () => {
+        clearTimeout(saveTimer);
+        popup_saved.classList.remove('show');
+    });
+    const saveTimer = setTimeout(() => {
+        popup_saved.classList.remove('show');
+    }, 2300);
 });
 userDesign === null || userDesign === void 0 ? void 0 : userDesign.addEventListener('click', () => {
     clear();

diff --git a/script.ts b/script.ts
@@ -7,7 +7,9 @@ const ctx = canvas.getContext('2d');
 const design = document.querySelector('.design') as HTMLInputElement;
 const userDesign = document.querySelector('.user-design');
 const save = document.querySelector('.save');
+const popup_saved = document.querySelector('.popup_saved') as HTMLDivElement;
 const curveInputContainer = document.querySelector('.curve-input-container')!;
+const btnClose = document.querySelector('.btn-close');
 const localCanvas = localStorage.getItem('canvasArray');
 
 const previewLineHandler = (e: MouseEvent | PointerEvent) => {
@@ -361,6 +363,17 @@ set?.addEventListener('click', () => {
 
 save?.addEventListener('click', () => {
     localStorage.setItem('canvasArray', JSON.stringify(canvasArray));
+    num = num + canvasArray.length;
+    popup_saved.classList.add('show');
+
+    btnClose?.addEventListener('click', () => {
+        clearTimeout(saveTimer);
+        popup_saved.classList.remove('show');
+    })
+
+    const saveTimer = setTimeout(() => {
+        popup_saved.classList.remove('show');
+    }, 2300);
 });
 
 userDesign?.addEventListener('click', () => {