From b31d845c76d33ac7aa0ba235a95e3d12e0170e1e Mon Sep 17 00:00:00 2001
From: Valentyna <valya0322@ukr.net>
Date: Tue, 28 Apr 2026 18:09:51 +0300
Subject: [PATCH] createElement div h2 and p, position top and right,
 setTimeout

---
 README.md           |  6 +++---
 src/scripts/main.js | 27 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 1f4baa9ad..da27cf784 100644
--- a/README.md
+++ b/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://ValyaMeln.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;
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 35d0d8f74..d330a334d 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -2,6 +2,29 @@
 
 const pushNotification = (posTop, posRight, title, description, type) => {
   // write code here
+  const notification = document.createElement('div');
+
+  notification.className = `notification ${type}`;
+
+  const titleEl = document.createElement('h2');
+
+  titleEl.className = 'title';
+  titleEl.textContent = title;
+
+  const descEl = document.createElement('p');
+
+  descEl.textContent = description;
+
+  notification.append(titleEl, descEl);
+  // notification.style.position = 'absolute';
+  notification.style.top = posTop + 'px';
+  notification.style.right = posRight + 'px';
+
+  document.body.appendChild(notification);
+
+  setTimeout(() => {
+    notification.style.display = 'none';
+  }, 2000);
 };
 
 pushNotification(
@@ -27,3 +50,7 @@ pushNotification(
   'Message example.\n ' + 'Notification should contain title and description.',
   'warning',
 );
+
+pushNotification(10, 10, 'Success', 'Everything worked!', 'success');
+pushNotification(10, 60, 'Error', 'Something went wrong!', 'error');
+pushNotification(10, 110, 'Warning', 'Be careful!', 'warning');