From 937157f076170b278c4c38c304ef0799dffa2942 Mon Sep 17 00:00:00 2001
From: Sushant Rahate <sushantrahate15@gmail.com>
Date: Sat, 15 May 2021 21:08:00 +0530
Subject: [PATCH] Replaced JS alert for Password copied to clipboard with CSS
 Toast

---
 password-generator/index.html |  1 +
 password-generator/script.js  |  4 +++-
 password-generator/style.css  | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/password-generator/index.html b/password-generator/index.html
index d28270e..c54161a 100644
--- a/password-generator/index.html
+++ b/password-generator/index.html
@@ -43,6 +43,7 @@
         Generate Password
       </button>
     </div>
+	<div id="copy-toast">&#x2714; Password copied to clipboard!</div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/password-generator/script.js b/password-generator/script.js
index ee4fe2b..617e7dc 100644
--- a/password-generator/script.js
+++ b/password-generator/script.js
@@ -16,6 +16,7 @@ const randomFunc = {
 
 clipboardEl.addEventListener('click', () => {
     const textarea = document.createElement('textarea')
+	const copyToast = document.getElementById("copy-toast");
     const password = resultEl.innerText
 
     if(!password) { return }
@@ -25,7 +26,8 @@ clipboardEl.addEventListener('click', () => {
     textarea.select()
     document.execCommand('copy')
     textarea.remove()
-    alert('Password copied to clipboard!')
+	copyToast.className = "show";
+    setTimeout(function () { copyToast.className = copyToast.className.replace("show", ""); }, 3000);
 })
 
 generateEl.addEventListener('click', () => {
diff --git a/password-generator/style.css b/password-generator/style.css
index c30058d..792f223 100644
--- a/password-generator/style.css
+++ b/password-generator/style.css
@@ -78,3 +78,18 @@ h2 {
   align-items: center;
   margin: 15px 0;
 }
+
+#copy-toast {
+  visibility: hidden;
+  position: fixed;
+  top: 30px;
+  align-items: center;
+  background-color: #5252bb;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+  padding: 16px;
+  z-index: 1;
+}
+
+#copy-toast.show{visibility:visible;-webkit-animation:fadein .5s,fadeout .5s 2.5s;animation:fadein .5s,fadeout .5s 2.5s}@-webkit-keyframes fadein{from{top:0;opacity:0}to{top:30px;opacity:1}}@keyframes fadein{from{top:0;opacity:0}to{top:30px;opacity:1}}@-webkit-keyframes fadeout{from{top:30px;opacity:1}to{top:0;opacity:0}}@keyframes fadeout{from{top:30px;opacity:1}to{top:0;opacity:0}}
\ No newline at end of file