mtlynch3/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button onclick="addR()">Add Row</button>
    <button onclick="addC()">Add Col</button>
    <button onclick="removeR()">Remove Row</button>
    <button onclick="removeC()">Remove Col</button>
    <button onclick="fillU()">Fill All Uncolored</button>
    <button onclick="fill()">Fill All</button>
    <button onclick="clearAll()">Clear</button>
    <select onchange="selected()" id="selectedID">
        <option value="SELECT">SELECT</option>
        <option value="Red">Red</option>
        <option value="Blue">Blue</option>
        <option value="Green">Green</option>
        <option value="Yellow">Yellow</option>
    </select>
    <table id="grid">
    </table>
    <script src="script.js"></script>
</body>
</html>

## script.js
let colorSelected;

//Adds a row
function addR() {
    let grid = document.getElementById("grid");
    let rows = document.getElementsByTagName("tr");

    //if grid is empty need to create row
    if (rows.length === 0) {
        let row = document.createElement("tr");
        let col = document.createElement("td");
        col.onclick = function(){
            this.style.backgroundColor = colorSelected;
        };

        row.appendChild(col);
        grid.appendChild(row);
    //otherwise append a new row with the current
    //amount of columns
    } else {
        let numCols = rows[0].childElementCount;
        let row = document.createElement("tr");
        for (let i = 0; i < numCols; i++){
            let col = document.createElement("td");
            col.onclick = function(){
              this.style.backgroundColor = colorSelected;
            };
            row.appendChild(col);
        }
        grid.appendChild(row);
    }
}
//Adds a column
function addC() {
    let grid = document.getElementById("grid");
    let rows = document.getElementsByTagName("tr");

    if (rows.length === 0) {
        let row = document.createElement("tr");
        let col = document.createElement("td");
        col.onclick = function (){
            this.style.backgroundColor = colorSelected;
        };
        row.appendChild(col);
        grid.appendChild(row);

    } else {
        for (let i = 0; i < rows.length; i++){
            let col = document.createElement("td");
            col.onclick = function(){
              this.style.backgroundColor = colorSelected;
            };
            rows[i].appendChild(col);
        }
    }
}

//Removes a row
function removeR() {
    let grid = document.getElementById("grid");
    let rows = document.getElementsByTagName("tr");
    if(rows.length === 0){
        alert("There is nothing to delete");
        return;
    }

    let lastRow = grid.lastElementChild;
    grid.removeChild(lastRow);

}
//Remove a column
function removeC() {
    let rows = document.getElementsByTagName("tr");
    let grid = document.getElementById("grid");

    if(rows.length === 0){
        alert("There is nothing to delete");
        return;
    }

    if(rows[0].childElementCount === 1) {
        grid.innerHTML = "";
        return;
    }

    for (let i = 0; i < rows.length; i++){
        let col = rows[i].lastElementChild;
        rows[i].removeChild(col);
    }

}
//sets global variable for selected color
function selected(){
    colorSelected = document.getElementById("selectedID").value;
}

function fill(){
    let cells = document.getElementsByTagName("td");

    for (let i = 0; i < cells.length; i++){
        cells[i].style.backgroundColor = colorSelected;
    }
}

function clearAll(){
    let cells = document.getElementsByTagName("td");

    for (let i = 0; i < cells.length; i++){
        cells[i].style.backgroundColor = "";
    }
}

function fillU(){
    let cells = document.getElementsByTagName("td");

    for (let i = 0; i < cells.length; i++){
        if (cells[i].style.backgroundColor === "") {
            cells[i].style.backgroundColor = colorSelected;
        }
    }
}


## styles.css
tr,td{
    border:1px;
    border-style: solid;
}
td{
    height: 50px;
    width: 50px;
    background-color: white;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Grid</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<button onclick="addR()">Add Row</button>
	<button onclick="addC()">Add Col</button>
	<button onclick="removeR()">Remove Row</button>
	<button onclick="removeC()">Remove Col</button>
	<button onclick="fillU()">Fill All Uncolored</button>
	<button onclick="fill()">Fill All</button>
	<button onclick="clearAll()">Clear</button>
	<select onchange="selected()" id="selectedID">
	<option value="SELECT">SELECT</option>
	<option value="Red">Red</option>
	<option value="Blue">Blue</option>
	<option value="Green">Green</option>
	<option value="Yellow">Yellow</option>
	</select>
	<table id="grid">
	</table>
	<script src="script.js"></script>
	</body>
	</html>
	let colorSelected;

	//Adds a row
	function addR() {
	let grid = document.getElementById("grid");
	let rows = document.getElementsByTagName("tr");

	//if grid is empty need to create row
	if (rows.length === 0) {
	let row = document.createElement("tr");
	let col = document.createElement("td");
	col.onclick = function(){
	this.style.backgroundColor = colorSelected;
	};

	row.appendChild(col);
	grid.appendChild(row);
	//otherwise append a new row with the current
	//amount of columns
	} else {
	let numCols = rows[0].childElementCount;
	let row = document.createElement("tr");
	for (let i = 0; i < numCols; i++){
	let col = document.createElement("td");
	col.onclick = function(){
	this.style.backgroundColor = colorSelected;
	};
	row.appendChild(col);
	}
	grid.appendChild(row);
	}
	}
	//Adds a column
	function addC() {
	let grid = document.getElementById("grid");
	let rows = document.getElementsByTagName("tr");

	if (rows.length === 0) {
	let row = document.createElement("tr");
	let col = document.createElement("td");
	col.onclick = function (){
	this.style.backgroundColor = colorSelected;
	};
	row.appendChild(col);
	grid.appendChild(row);

	} else {
	for (let i = 0; i < rows.length; i++){
	let col = document.createElement("td");
	col.onclick = function(){
	this.style.backgroundColor = colorSelected;
	};
	rows[i].appendChild(col);
	}
	}
	}

	//Removes a row
	function removeR() {
	let grid = document.getElementById("grid");
	let rows = document.getElementsByTagName("tr");
	if(rows.length === 0){
	alert("There is nothing to delete");
	return;
	}

	let lastRow = grid.lastElementChild;
	grid.removeChild(lastRow);

	}
	//Remove a column
	function removeC() {
	let rows = document.getElementsByTagName("tr");
	let grid = document.getElementById("grid");

	if(rows.length === 0){
	alert("There is nothing to delete");
	return;
	}

	if(rows[0].childElementCount === 1) {
	grid.innerHTML = "";
	return;
	}

	for (let i = 0; i < rows.length; i++){
	let col = rows[i].lastElementChild;
	rows[i].removeChild(col);
	}

	}
	//sets global variable for selected color
	function selected(){
	colorSelected = document.getElementById("selectedID").value;
	}

	function fill(){
	let cells = document.getElementsByTagName("td");

	for (let i = 0; i < cells.length; i++){
	cells[i].style.backgroundColor = colorSelected;
	}
	}

	function clearAll(){
	let cells = document.getElementsByTagName("td");

	for (let i = 0; i < cells.length; i++){
	cells[i].style.backgroundColor = "";
	}
	}

	function fillU(){
	let cells = document.getElementsByTagName("td");

	for (let i = 0; i < cells.length; i++){
	if (cells[i].style.backgroundColor === "") {
	cells[i].style.backgroundColor = colorSelected;
	}
	}
	}
	tr,td{
	border:1px;
	border-style: solid;
	}
	td{
	height: 50px;
	width: 50px;
	background-color: white;
	}