Last active
May 1, 2019 22:08
-
-
Save ammaratef45/4d3088576f9bf702440a2980fbd6e375 to your computer and use it in GitHub Desktop.
Pixel art maker un-color if colored
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Variables to define elements | |
const color = document.getElementById("colorPicker"); | |
const height = document.getElementById("inputHeight"); | |
const width = document.getElementById("inputWidth"); | |
//Variables to define user input responses for options | |
let colorInput = "#000000"; | |
color.addEventListener('change', function(response) { | |
colorInput = response.target.value; | |
}); | |
let heightInput = ""; | |
height.addEventListener('change', function(response) { | |
heightInput = response.target.value; | |
}); | |
let widthInput = ""; | |
width.addEventListener('change', function(response) { | |
widthInput = response.target.value; | |
}); | |
//defining click | |
const submitClick = document.getElementById("submit"); | |
//adding an event listener to prevent refresh on submit | |
document.getElementById("submit").addEventListener("click", function(event){ | |
event.preventDefault() | |
}); | |
//create the grid | |
submitClick.addEventListener("click", function makeGrid() { | |
let grid = document.getElementById("pixelCanvas"); | |
for (row=1; row<=widthInput; row++) { | |
let newRow = grid.insertRow(0); | |
for (column=1; column<=heightInput; column++) { | |
newRow.insertCell(0) | |
} | |
} | |
}); | |
//colors the cells | |
const table = document.getElementById("pixelCanvas"); | |
table.addEventListener('click', function changeColor(event) { | |
const td = event.target; | |
if(td.style['backgroundColor']) { | |
td.removeAttribute('style') | |
} else { | |
td.style.backgroundColor = colorInput; | |
} | |
event.stopPropagation(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment