diff --git a/README.md b/README.md index 1f4baa9a..f2c181e8 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://ybriukhovetska.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 35d0d8f7..1548742e 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'); + + div.classList.add('notification', type); + div.style.top = `${posTop}px`; + div.style.right = `${posRight}px`; + + const h = document.createElement('h2'); + + h.classList.add('title'); + h.textContent = title; + + const p = document.createElement('p'); + + p.textContent = description; + div.append(h, p); + document.body.appendChild(div); + + setTimeout(() => { + div.style.display = 'none'; + }, 2000); }; pushNotification(