From 0d93d42c498b26f176d9cc79524edcfe4f7e500d Mon Sep 17 00:00:00 2001 From: Maksim Vashuk Date: Wed, 13 May 2026 13:21:35 +0200 Subject: [PATCH] jsgrowth dom --- .github/workflows/test.yml-template | 29 ++++++++++++ README.md | 2 +- package-lock.json | 9 ++-- package.json | 2 +- src/scripts/main.js | 72 ++++++++++++++++++++++++++++- 5 files changed, 107 insertions(+), 7 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 00000000..44ac4e96 --- /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 064d543f..aaafef5b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ 1. Replace `` with your Github username in the link - - [DEMO LINK](https://.github.io/js_growth_table_DOM/) + - [DEMO LINK](https://MaksVash.github.io/js_growth_table_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 bf93e753..f2c093b8 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 cb1ab6ac..cf906474 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,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", diff --git a/src/scripts/main.js b/src/scripts/main.js index a765fdb1..894cf153 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,73 @@ 'use strict'; -// write code here +const container = document.querySelector('.container'); +const field = document.querySelector('.field'); + +function updateButtonsState() { + const rows = field.querySelectorAll('tr'); + + const columnsCount = rows.length > 0 ? rows[0].cells.length : 0; + + const appendRowBtn = container.querySelector('.append-row'); + const removeRowBtn = container.querySelector('.remove-row'); + const appendColumnBtn = container.querySelector('.append-column'); + const removeColumnBtn = container.querySelector('.remove-column'); + + appendRowBtn.disabled = rows.length >= 10; + appendRowBtn.classList.toggle('disabled', rows.length >= 10); + + removeRowBtn.disabled = rows.length <= 2; + removeRowBtn.classList.toggle('disabled', rows.length <= 2); + + appendColumnBtn.disabled = columnsCount >= 10; + appendColumnBtn.classList.toggle('disabled', columnsCount >= 10); + + removeColumnBtn.disabled = columnsCount <= 2; + removeColumnBtn.classList.toggle('disabled', columnsCount <= 2); +} + +updateButtonsState(); + +container.addEventListener('click', (e) => { + if (!e.target.classList.contains('button')) { + return; + } + + const rows = field.querySelectorAll('tr'); + const currentColumnsCount = rows.length > 0 ? rows[0].cells.length : 4; + const targetContainer = field.querySelector('tbody') || field; + + if (e.target.classList.contains('append-row') && rows.length < 10) { + const newRow = document.createElement('tr'); + + for (let i = 0; i < currentColumnsCount; i++) { + newRow.appendChild(document.createElement('td')); + } + targetContainer.appendChild(newRow); + } + + if (e.target.classList.contains('remove-row') && rows.length > 2) { + rows[rows.length - 1].remove(); + } + + if ( + e.target.classList.contains('append-column') && + currentColumnsCount < 10 + ) { + rows.forEach((row) => { + row.appendChild(document.createElement('td')); + }); + } + + if (e.target.classList.contains('remove-column') && currentColumnsCount > 2) { + rows.forEach((row) => { + const lastTd = row.lastElementChild; + + if (lastTd) { + lastTd.remove(); + } + }); + } + + updateButtonsState(); +});