Yoshyn/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <style>
      html, body {
        height: 100%;
        margin-right: 5%;
        margin-left: 5%;
      }

      .info, .success, .warn, .error {
        padding: 10px;
        margin: 10px;
        position: relative;
      }

      .info:before, .success:before, .warn:before, .error:before {
        text-align: center;
        font-style: normal;
        font-weight: bold;
      }

      .info .close:after, .success .close:after, .warn .close:after, .error .close:after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        color: #888;
        cursor: pointer;
        content: 'X';
      }

      .info {
        color: #204a8e;
        background: #c9ddff;
        border: 1px solid #4c699b;
      }
      .info:before { content: 'ℹ '; }

      .success {
        color: #2b7515;
        background: #ecffd6;
        border: 1px solid #617c42;
      }
      .success:before { content: '✔ '; }

      .warn {
        color: #756e15;
        background: #fffbd1;
        border: 1px solid #87803e;
      }
      .warn:before { content: '⚠ '; }

      .error {
        color: #ba3939;
        background: #ffe0e0;
        border: 1px solid #a33a3a;
      }
      .error:before { content: '☓ '; }
    </style>
    <title>Notification Sample</title>
  </head>
  <body>
  </body>
  <script type="text/javascript" src="notification.js"></script>
</html>


## notification.js
(function () {
  ['info', 'success', 'warn', 'error'].forEach((level) => {
    window[`${level}Message`] = function (message, target) {
      const messageNode = document.createElement('div');
      messageNode.classList.add(level);

      const msg = document.createElement('span');
      msg.innerHTML = message;
      messageNode.appendChild(msg);

      const close = document.createElement('div');
      close.innerHTML = '';
      close.classList.add('close');
      close.onclick = () => { messageNode.remove(); };
      messageNode.appendChild(close);

      if (!target) { target = document.getElementsByTagName('body')[0]; }
      console.log(target);
      target.prepend(messageNode);
    };
  });

  window.infoMessage('testing');
  window.successMessage('testing');
  window.warnMessage('testing');
  window.errorMessage('testing');
})();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<style>
	html, body {
	height: 100%;
	margin-right: 5%;
	margin-left: 5%;
	}

	.info, .success, .warn, .error {
	padding: 10px;
	margin: 10px;
	position: relative;
	}

	.info:before, .success:before, .warn:before, .error:before {
	text-align: center;
	font-style: normal;
	font-weight: bold;
	}

	.info .close:after, .success .close:after, .warn .close:after, .error .close:after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	color: #888;
	cursor: pointer;
	content: 'X';
	}

	.info {
	color: #204a8e;
	background: #c9ddff;
	border: 1px solid #4c699b;
	}
	.info:before { content: 'ℹ '; }

	.success {
	color: #2b7515;
	background: #ecffd6;
	border: 1px solid #617c42;
	}
	.success:before { content: '✔ '; }

	.warn {
	color: #756e15;
	background: #fffbd1;
	border: 1px solid #87803e;
	}
	.warn:before { content: '⚠ '; }

	.error {
	color: #ba3939;
	background: #ffe0e0;
	border: 1px solid #a33a3a;
	}
	.error:before { content: '☓ '; }
	</style>
	<title>Notification Sample</title>
	</head>
	<body>
	</body>
	<script type="text/javascript" src="notification.js"></script>
	</html>
	(function () {
	['info', 'success', 'warn', 'error'].forEach((level) => {
	window[`${level}Message`] = function (message, target) {
	const messageNode = document.createElement('div');
	messageNode.classList.add(level);

	const msg = document.createElement('span');
	msg.innerHTML = message;
	messageNode.appendChild(msg);

	const close = document.createElement('div');
	close.innerHTML = '';
	close.classList.add('close');
	close.onclick = () => { messageNode.remove(); };
	messageNode.appendChild(close);

	if (!target) { target = document.getElementsByTagName('body')[0]; }
	console.log(target);
	target.prepend(messageNode);
	};
	});

	window.infoMessage('testing');
	window.successMessage('testing');
	window.warnMessage('testing');
	window.errorMessage('testing');
	})();