Added dismissible alert

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>