From 2305440d9d70f09119af2091ecb15b2de6138866 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 21 Dec 2022 20:33:00 +0800
Subject: [PATCH] Added dismissible alert

---
 project-view.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/project-view.html b/project-view.html
index 93a1b7a..189cff7 100644
--- a/project-view.html
+++ b/project-view.html
@@ -88,6 +88,30 @@
 		</ul>
 	</div>
 </section>
+
+<!-- DISMISSIBLE ALERT -->
+<div class="dismissable-alert bg-slate-100 p-5 rounded drop-shadow-lg absolute top-3 inset-x-3 transition-transform ease-in duration-300">
+	<button class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"><i class="fa-solid fa-xmark"></i></button>
+	<h4 class="font-bold pr-5">Alert Title Goes Here</h4>
+	<p>This is an example alert message.</p>
+</div>
+
+<script>
+	var close = document.getElementsByClassName("close-button");
+	var i;
+
+	function dismissElement(targetElement) {
+		targetElement.style.transform = "translateX(100%)";
+		setTimeout(function(){ targetElement.style.display = "none"; }, 300);
+	}
+
+	for (i = 0; i < close.length; i++) {
+		close[i].onclick = function(){
+			var div = this.parentElement;
+			dismissElement(div);
+		}
+	}
+</script>
 </body>
 
 </html>
\ No newline at end of file