diff --git a/README.md b/README.md index 1f4baa9ad..661dddbb9 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://JordanKoby.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..600949a9b 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,14 +1,36 @@ 'use strict'; const pushNotification = (posTop, posRight, title, description, type) => { - // write code here + const notification = document.createElement('div'); + + notification.className = `notification ${type}`; + + notification.style.cssText = `top: ${posTop}px; right: ${posRight}px;`; + + const titleElement = document.createElement('h2'); + + titleElement.className = '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( 10, 10, 'Title of Success message', - 'Message example.\n ' + 'Notification should contain title and description.', + 'Message example.\n' + 'Notification should contain title and description.', 'success', ); @@ -16,7 +38,7 @@ pushNotification( 150, 10, 'Title of Error message', - 'Message example.\n ' + 'Notification should contain title and description.', + 'Message example.\n' + 'Notification should contain title and description.', 'error', ); @@ -24,6 +46,6 @@ pushNotification( 290, 10, 'Title of Warning message', - 'Message example.\n ' + 'Notification should contain title and description.', + 'Message example.\n' + 'Notification should contain title and description.', 'warning', );