diff --git a/README.md b/README.md index 1f4baa9ad..966817994 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 `` with your GitHub username in the link - - [DEMO LINK](https://.github.io/js_notification_DOM/) + - [DEMO LINK](https://Ruslan-oss-max0.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..5deb640eb 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,7 +1,27 @@ 'use strict'; const pushNotification = (posTop, posRight, title, description, type) => { - // write code here + const message = document.createElement('div'); + + message.classList.add('notification', type); + + const titleText = document.createElement('h2'); + const text = document.createElement('p'); + + titleText.className = 'title'; + titleText.textContent = title; + text.textContent = description; + message.appendChild(titleText); + message.appendChild(text); + + message.style.top = `${posTop}px`; + message.style.right = `${posRight}px`; + + setTimeout(() => { + message.style.display = 'none'; + }, 2000); + + document.body.appendChild(message); }; pushNotification(