diff --git a/README.md b/README.md index 064d543f..1acbdcea 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ 1. Replace `` with your Github username in the link - - [DEMO LINK](https://.github.io/js_growth_table_DOM/) + - [DEMO LINK](https://aakash1sadhu.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; - - 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. ### Task: Growth table @@ -15,6 +15,7 @@ Preview: ![Preview](./src/images/4x4.png) Some rules: + - Click on the button with class `append-row` should append a new row to the table. - Click on the button with class `remove-row` should remove the last row from the table. - Click on the button with class `append-column` should append a new column to the table. @@ -32,4 +33,3 @@ Examples: ![2x2](./src/images/2x2.png) ![3x10](./src/images/3x10.png) - diff --git a/src/scripts/main.js b/src/scripts/main.js index a765fdb1..52414f5a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,95 @@ 'use strict'; -// write code here +document.addEventListener('DOMContentLoaded', () => { + const table = document.querySelector('.field'); + + const buttons = { + appendRow: document.querySelector('.append-row'), + removeRow: document.querySelector('.remove-row'), + appendColumn: document.querySelector('.append-column'), + removeColumn: document.querySelector('.remove-column'), + }; + + const LIMITS = { + min: 2, + max: 10, + }; + + const getRowCount = () => table.rows.length; + const getColCount = () => table.rows[0].cells.length; + + const canAppendRow = () => getRowCount() < LIMITS.max; + const canRemoveRow = () => getRowCount() > LIMITS.min; + const canAppendColumn = () => getColCount() < LIMITS.max; + const canRemoveColumn = () => getColCount() > LIMITS.min; + + function updateButtons() { + buttons.appendRow.disabled = !canAppendRow(); + buttons.removeRow.disabled = !canRemoveRow(); + buttons.appendColumn.disabled = !canAppendColumn(); + buttons.removeColumn.disabled = !canRemoveColumn(); + } + + function appendRow() { + if (!canAppendRow()) { + return; + } + + const newRow = table.insertRow(); + const colCount = getColCount(); + + for (let i = 0; i < colCount; i += 1) { + newRow.insertCell().textContent = ''; + } + } + + function removeRow() { + if (!canRemoveRow()) { + return; + } + + table.deleteRow(getRowCount() - 1); + } + + function appendColumn() { + if (!canAppendColumn()) { + return; + } + + for (const row of table.rows) { + row.insertCell().textContent = ''; + } + } + + function removeColumn() { + if (!canRemoveColumn()) { + return; + } + + for (const row of table.rows) { + row.deleteCell(row.cells.length - 1); + } + } + + buttons.appendRow.addEventListener('click', () => { + appendRow(); + updateButtons(); + }); + + buttons.removeRow.addEventListener('click', () => { + removeRow(); + updateButtons(); + }); + + buttons.appendColumn.addEventListener('click', () => { + appendColumn(); + updateButtons(); + }); + + buttons.removeColumn.addEventListener('click', () => { + removeColumn(); + updateButtons(); + }); + + updateButtons(); +});