Replaced JS alert for Password copied to clipboard with CSS Toast

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>

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', () => {

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}}