From b03bb6b88b4ed939b6fead1f9ceb49a3fed9b2d8 Mon Sep 17 00:00:00 2001 From: permaculture1 Date: Tue, 6 Sep 2022 13:06:27 -0700 Subject: [PATCH] "New working pixel maker" --- index.html | 22 ++++++++++++++++ index.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++ stylesheet.css | 8 ++++++ 3 files changed, 98 insertions(+) create mode 100644 index.js create mode 100644 stylesheet.css diff --git a/index.html b/index.html index e69de29b..54250c78 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,22 @@ + + + + pixArt + + + + + +
+
+
Red
+
Yellow
+
Blue
+
Green
+
Purple
+ + + +
+ + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..9f19c160 --- /dev/null +++ b/index.js @@ -0,0 +1,68 @@ +function pixArt() { + var pixel = document.getElementById('container'); + var rows = document.getElementsByClassName('rows'); + var columns = document.getElementsByClassName('columns'); + var colorButtons = document.getElementById('colorButtons') + var currentColor = ""; + + + + function makeRows(rowNum){ + for (let i = 0; i < rowNum; i++) { + let rowDiv = document.createElement('div'); + rowDiv.style.backgroundColor = 'white'; + + rowDiv.addEventListener("click",function(){ + rowDiv.style.backgroundColor = currentColor}); + + rowDiv.addEventListener("mousedown",function(){ + rowDiv.style.backgroundColor = currentColor + }) + rowDiv.addEventListener("mouseenter",function(){ + rowDiv.style.backgroundColor = currentColor + }) + rowDiv.addEventListener("mouseup",function(){ + rowDiv.style.backgroundColor = "" + }) + + pixel.appendChild(rowDiv).className = 'rows'; + + } + } + + +function buttonChange(){ + var redHolder = document.getElementById("redButton") + var yellowHolder = document.getElementById("yellowButton") + var blueHolder = document.getElementById("blueButton") + var greenHolder = document.getElementById("greenButton") + var purpleHolder = document.getElementById("purpleButton") + + + redHolder.addEventListener("click", function() { + currentColor = "red" + }) + yellowHolder.addEventListener("click", function() { + currentColor = "yellow" + }) + blueHolder.addEventListener("click", function() { + currentColor = "blue" + }) + greenHolder.addEventListener("click", function() { + currentColor = "green" + }) + purpleHolder.addEventListener("click", function() { + currentColor = "purple" + }) + +} + +buttonChange(); +makeRows(144); +} + +pixArt(); + +//make buttons the colors that they represent +//select an individual DIV +// create event listeners for on clicks on those DIV \ No newline at end of file diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 00000000..bd11a183 --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,8 @@ + .rows { + border-style: 5px solid black; + height: 50px; + width: 50px; + display: inline-block; + outline: 5px solid black; + outline-offset: -5px; + }