solution

README.md

@@ -1,9 +1,9 @@
 1. Replace `<your_account>` with your Github username in the link
-    - [DEMO LINK](https://<your_account>.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)
-

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();
+});