Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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://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;
Expand Down
21 changes: 20 additions & 1 deletion src/scripts/main.js
Original file line number Diff line number Diff line change
@@ -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(
Expand Down