diff --git a/index.html b/index.html
index 1a138b6..7e9b97a 100644
--- a/index.html
+++ b/index.html
@@ -32,11 +32,15 @@
Grid Maker
+
+
+
diff --git a/main.js b/main.js
index 79a0fd1..35738b1 100644
--- a/main.js
+++ b/main.js
@@ -5,3 +5,72 @@ root.addEventListener("click", (event) => {
console.log(event.target.tagName);
console.log(event.target);
});
+
+const table = document.getElementsByTagName("table")[0];
+let rows = table.rows.length;
+let columns = table.rows[0].cells.length;
+
+// Add rows to grid
+const addRowButton = document.getElementById("add-row");
+addRowButton.addEventListener("click", () => {
+ table.insertRow(rows - 1);
+ for(let i = 0; i < columns; i++) {
+ table.rows[rows - 1].insertCell(0);
+ }
+ rows++;
+})
+
+// Add columns to grid
+const addColumnButton = document.getElementById("add-column");
+addColumnButton.addEventListener("click", () => {
+ for(let i = 0; i < rows; i++) {
+ table.rows[i].insertCell(0);
+ }
+ columns++;
+})
+
+// Remove rows from grid
+const removeRowButton = document.getElementById("remove-row");
+removeRowButton.addEventListener("click", () => {
+ if(rows) {
+ table.deleteRow(rows - 1);
+ rows--;
+ }
+})
+
+// Remove columns from grid
+const removeColumnButton = document.getElementById("remove-column");
+removeColumnButton.addEventListener("click", () => {
+ for(let i = 0; i < rows; i++) {
+ table.rows[i].deleteCell(0);
+ }
+ columns--;
+})
+
+// Choose a color
+const colorDropdown = document.getElementById("color-select");
+let color = "";
+colorDropdown.addEventListener("change", () => {
+ color = colorDropdown.value;
+})
+
+// Change color of cell when clicked
+const cells = document.getElementsByTagName("td");
+console.log(cells);
+for(let i = 0; i < cells.length; i++) {
+ cells[i].addEventListener("click", () => {
+ cells[i].style.backgroundColor = color;
+ console.log(cells[i].style.backgroundColor);
+ console.log("clicked");
+ })
+}
+
+// Fill all uncolored cells with selected color
+const fillUncoloredButton = document.getElementById("fill-uncolored");
+fillUncoloredButton.addEventListener("click", () => {
+ for(let i = 0; i < cells.length; i++) {
+ if(cells[i].style.backgroundColor == "") {
+ cells[i].style.backgroundColor = color;
+ }
+ }
+})