up

2017-02-28 12:54:48 +03:00 · 2017-02-28 12:54:48 +03:00 · 508969c13f
commit 508969c13f
parent 4272b7bb13
168 changed files with 340 additions and 10 deletions
--- a/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.css
+++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.css
@ -0,0 +1,14 @@
+.notification {
+  position: fixed;
+  z-index: 1000;
+  padding: 5px;
+  border: 1px solid black;
+  font-size: 20px;
+  background: white;
+  text-align: center;
+}
+
+.welcome {
+  background: #b80000;
+  color: yellow;
+}
--- a/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html
+++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html
@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+
+  <h2>Notification is on the right</h2>
+
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
+    magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
+    temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
+  </p>
+
+  <script>
+    function showNotification({top = 0, right = 0, className, html}) {
+
+      let notification = document.createElement('div');
+      notification.className = "notification";
+      if (className) {
+        notification.classList.add(className);
+      }
+
+      notification.style.top = top + 'px';
+      notification.style.right = right + 'px';
+
+      notification.innerHTML = options.html;
+      document.body.append(notification);
+
+      setTimeout(() => notification.remove(), 1500);
+    }
+
+    // test it
+    let i = 1;
+    setInterval(() => {
+      showNotification({
+        top: 10,
+        right: 10,
+        html: 'Hello ' + i++,
+        className: "welcome"
+      });
+    }, 2000);
+  </script>
+
+
+</body>
+</html>