diff --git a/README.md b/README.md index 1f4baa9ad..602e0f760 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 `` with your GitHub username in the link - - [DEMO LINK](https://.github.io/js_notification_DOM/) + - [DEMO LINK](https://Yevhen-Srdk.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..8790d1748 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 div = document.createElement('div'); + const h2 = document.createElement('h2'); + const p = document.createElement('p'); + + div.classList.add('notification', type); + h2.classList.add('title'); + + h2.textContent = title; + p.textContent = description; + + div.appendChild(h2); + div.appendChild(p); + document.body.appendChild(div); + + div.style.top = posTop + 'px'; + div.style.right = posRight + 'px'; + + setTimeout(() => { + div.style.display = 'none'; + }, 2000); }; pushNotification(