notifications

creator.html

@@ -216,6 +216,7 @@
 	<script defer src="data/scripts/main.js"></script>
 	<script defer src="data/scripts/versions/m15/version.js"></script>
 	<!-- <script async src="data/scripts/palettes/darkMode.js"></script> -->
+	<div class='notificationContainer'></div>
 </body>
 <footer id='footer'>
 	<script async src='data/scripts/footer.js'></script>

data/scripts/main.js

@@ -897,15 +897,14 @@ function textCodeReference() {
 	textCodeReferenceArray.forEach(item => document.getElementById('textCodeReference').innerHTML += '<div>' + item[0] + '</div><div>' + item[1] + '</div>')
 }
 
-
-
-
-
-
-
-
-
-
+function notify(message, color) {
+	document.getElementsByClassName('notificationContainer')[0].innerHTML += `
+	<div class='notification' style='background-color: ` + color + `'>
+		<div>` + message + `</div>
+		<div class='deleteNotification' onclick='this.parentElement.parentNode.removeChild(this.parentElement)'>X</div>
+	</div>
+	`
+}//notify('MessageGoesHere', '#aaffaadd')
 
 //Must run last:
 initialize()

styles.css

@@ -392,8 +392,24 @@ input[type='checkbox'], select, option, input[type='file'], button {
 }
 
 
-.testClass {
-	border: 1px solid red;
+.notificationContainer {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	color: black;
+}
+.notification {
+	display: grid;
+	grid-template-columns: auto 1rem;
+	grid-gap: 1rem;
+	margin: 0.5rem;
+	padding: 0.5rem;
+	background: green;
+}
+.notification > .deleteNotification {
+	text-align: center;
+	cursor: pointer;
 }