From 675206955e0caa1dc619b55ac657ccc1001222af Mon Sep 17 00:00:00 2001 From: Diana Komarchuk Date: Tue, 14 Apr 2026 18:48:22 +0300 Subject: [PATCH 1/2] version 1 --- .github/workflows/test.yml-template | 29 +++++++++++++++++++++++++++++ README.md | 6 +++--- package-lock.json | 9 +++++---- package.json | 3 +-- src/scripts/main.js | 22 +++++++++++++++++++++- 5 files changed, 59 insertions(+), 10 deletions(-) create mode 100644 .github/workflows/test.yml-template diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..44ac4e963 --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm start & sleep 5 && npm test + - name: Upload tests report(cypress mochaawesome merged HTML report) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: reports diff --git a/README.md b/README.md index 1f4baa9ad..a9c9322e0 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://dianakomar.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/package-lock.json b/package-lock.json index 8d1e3b43b..cd393fce2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0", @@ -1467,10 +1467,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 860b60523..dc4b0d0a8 100644 --- a/package.json +++ b/package.json @@ -18,13 +18,12 @@ "postinstall": "npm run update", "test": "npm run lint && npm run test:only" }, - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0", diff --git a/src/scripts/main.js b/src/scripts/main.js index 35d0d8f74..42c109a87 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 notif = document.createElement('div'); + + notif.classList.add('notification', type); + + const titl = document.createElement('h2'); + const text = document.createElement('p'); + + titl.classList.add('title'); + + titl.textContent = title; + text.textContent = description; + + notif.setAttribute('style', `top: ${posTop}px; right: ${posRight}px;`); + + notif.append(titl, text); + + document.body.appendChild(notif); + + setTimeout(() => { + notif.style.display = 'none'; + }, 2000); }; pushNotification( From 0c6a29730ce4024af4edd9cc94895d4c950182a4 Mon Sep 17 00:00:00 2001 From: Diana Komarchuk Date: Tue, 14 Apr 2026 18:58:09 +0300 Subject: [PATCH 2/2] version 2 --- package-lock.json | 9 ++++----- package.json | 3 ++- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index cd393fce2..8d1e3b43b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.3", + "@mate-academy/scripts": "^1.8.5", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0", @@ -1467,11 +1467,10 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", - "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", + "version": "1.8.6", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", + "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", "dev": true, - "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index dc4b0d0a8..860b60523 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,13 @@ "postinstall": "npm run update", "test": "npm run lint && npm run test:only" }, + "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.3", + "@mate-academy/scripts": "^1.8.5", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0",