From dc4966b3c7fa6417f9722066cd5fbf17f1d5ca33 Mon Sep 17 00:00:00 2001
From: "stan0men@yahoo.com" <stan0men@yahoo.com>
Date: Sun, 7 Jun 2026 20:39:18 +0300
Subject: [PATCH] Solution

---
 README.md           | 13 +++++++------
 src/scripts/main.js | 21 ++++++++++++++++++++-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 1f4baa9ad..cbfe2605f 100644
--- a/README.md
+++ b/README.md
@@ -2,13 +2,14 @@
 
 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,8 +21,8 @@ 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://Stan0men.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;
-    - Run `npm run test:only -- -l` to run fast test with additional info in console, ignoring linter.
+   - Run `npm run test` command to test your code;
+   - Run `npm run test:only -- -n` to run fast test ignoring linter;
+   - Run `npm run test:only -- -l` to run fast test with additional info in console, ignoring linter.
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 35d0d8f74..2db4d7764 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,7 +1,26 @@
 'use strict';
 
 const pushNotification = (posTop, posRight, title, description, type) => {
-  // write code here
+  const notification = document.createElement('div');
+
+  notification.classList.add('notification');
+  notification.classList.add(type);
+  notification.setAttribute('style', `top: ${posTop}px; right: ${posRight}px;`);
+
+  const titleElement = document.createElement('h2');
+  titleElement.classList.add('title');
+  titleElement.textContent = title;
+
+  const descriptionElement = document.createElement('p');
+  descriptionElement.textContent = description;
+
+  notification.appendChild(titleElement);
+  notification.appendChild(descriptionElement);
+  document.body.appendChild(notification);
+
+  setTimeout(() => {
+    notification.style.display = 'none';
+  }, 2000);
 };
 
 pushNotification(