add task solution

README.md

@@ -2,13 +2,13 @@
 
 To inform the user about the success of the operation or any errors, websites typically use messages that appear on the screen for a short period.
 
-Your task: Create a function `pushNotification`, which takes the coordinates of the message, title, description, and type 
+Your task: Create a function `pushNotification`, which takes the coordinates of the message, title, description, and type
 (success, error and warning). `pushNotification` creates an element to display the message, appends it to the document, and hides it from the DOM after 2 seconds.
 Do not write any CSS styles or HTML code in this task. You should modify only the `main.js` file.
 
 Implementation guideline:
 - Print three messages: `success`, `error`, `warning` (call methods already exist in the `main.js` file);
-- The message is a block element with class `notification` + class, which depends on the input parameter type (`success`, `error`, `warning`); 
+- The message is a block element with class `notification` + class, which depends on the input parameter type (`success`, `error`, `warning`);
 - The message should have a title with class `title` (prefer `h2` element);
 - The message should have a description (prefer tag `p`);
 - Use [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) to execute a function or specified piece of code once the timer expires;
@@ -20,7 +20,7 @@ It's an expected result of your job:
 ### General instructions
 
 1. Replace `<your_account>` with your GitHub username in the link
-    - [DEMO LINK](https://<your_account>.github.io/js_notification_DOM/)
+    - [DEMO LINK](https://zubchenko-maksym.github.io/js_notification_DOM/)
 2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
     - Run `npm run test` command to test your code;
     - Run `npm run test:only -- -n` to run fast test ignoring linter;

src/scripts/main.js

@@ -1,7 +1,27 @@
 'use strict';
 
 const pushNotification = (posTop, posRight, title, description, type) => {
-  // write code here
+  const div = document.createElement('div');
+  const titleElem = document.createElement('h2');
+  const descriptionElem = document.createElement('p');
+
+  div.classList.add('notification');
+  div.classList.add(type);
+  titleElem.classList.add('title');
+  div.style.top = posTop + 'px';
+  div.style.right = posRight + 'px';
+
+  descriptionElem.textContent = description;
+  titleElem.textContent = title;
+
+  div.appendChild(titleElem);
+  div.appendChild(descriptionElem);
+  document.body.appendChild(div);
+
+  setTimeout(() => {
+    div.style.opacity = '0';
+    div.style.transition = 'opacity 0.5s ease-out';
+  }, 2000);
 };
 
 pushNotification(