From 34c67622825702fb0b09576d2ebd5269a10e23bc Mon Sep 17 00:00:00 2001 From: WHYSOSERIOUS1234 <103112614+WHYSOSERIOUS1234@users.noreply.github.com> Date: Mon, 5 Sep 2022 13:47:04 -0700 Subject: [PATCH 1/3] pixel update' --- pixel.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 pixel.js diff --git a/pixel.js b/pixel.js new file mode 100644 index 00000000..3639dada --- /dev/null +++ b/pixel.js @@ -0,0 +1,27 @@ + +let cont = document.querySelector('.container') +let currentColor = document.querySelector('.colorMe').value +let eraseMe = document.querySelector('.eraseMe') + + + +function grid(size) { + for(let i = 0; i < size * size; i++) { + let pixel = document.createElement('div') + pixel.classList.add('pixels') + pixel.addEventListener('click', () => { + pixel.style.backgroundColor = currentColor + }) + + cont.appendChild(pixel) + eraseMe.addEventListener('click' ,() => { + pixel.style.backgroundColor = "white" + }) + + } +} +grid(32.01) + + + + From 3427e1c25e363938f972b2bf3aaab9792bb1a386 Mon Sep 17 00:00:00 2001 From: WHYSOSERIOUS1234 <103112614+WHYSOSERIOUS1234@users.noreply.github.com> Date: Mon, 5 Sep 2022 13:49:16 -0700 Subject: [PATCH 2/3] pixel update2 --- index.html | 22 ++++++++++++++++++++++ pixel.css | 30 ++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 pixel.css diff --git a/index.html b/index.html index e69de29b..840f14bd 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + + +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/pixel.css b/pixel.css new file mode 100644 index 00000000..67e52601 --- /dev/null +++ b/pixel.css @@ -0,0 +1,30 @@ +body { + margin: 100px auto; + border: 10px solid silver; + margin-bottom: 10px; + height: 300px; + width: 500px; + border-radius: 15px; + border-bottom: 100px solid silver; + +} + +.container { +height: 300px ; +width: 498px; +display: flex ; +flex-wrap: wrap; +background-color: silver; +padding-bottom: 8px; +padding-left: 3px; +padding-top: 3px; +} +.pixels { +background-color: white; +border: 1px solid black; +height: 10.2px; +width: 10.1px; +} + + + From b96a8c89769f96991dd31ef505dcbeaa4a059109 Mon Sep 17 00:00:00 2001 From: WHYSOSERIOUS1234 <103112614+WHYSOSERIOUS1234@users.noreply.github.com> Date: Tue, 6 Sep 2022 14:58:08 -0700 Subject: [PATCH 3/3] pixel-update2 --- index.html | 4 ++-- pixel.css | 13 +++++++++++++ pixel.js | 16 ++++++++++++++++ 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 840f14bd..38f70488 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ Document -
@@ -16,7 +15,8 @@
- + +

Pixel Art Maker

\ No newline at end of file diff --git a/pixel.css b/pixel.css index 67e52601..8636c086 100644 --- a/pixel.css +++ b/pixel.css @@ -7,6 +7,7 @@ body { border-radius: 15px; border-bottom: 100px solid silver; + } .container { @@ -28,3 +29,15 @@ width: 10.1px; +.paintAll { +margin-left: 150px; +} + +.eraseMe { + margin-left: 130px +} + +.colorMe { + margin-left: 7px +} + diff --git a/pixel.js b/pixel.js index 3639dada..4cb16c6e 100644 --- a/pixel.js +++ b/pixel.js @@ -2,6 +2,7 @@ let cont = document.querySelector('.container') let currentColor = document.querySelector('.colorMe').value let eraseMe = document.querySelector('.eraseMe') +let paintAll = document.querySelector('.paintAll') @@ -12,16 +13,31 @@ function grid(size) { pixel.addEventListener('click', () => { pixel.style.backgroundColor = currentColor }) + + + pixel.addEventListener('mousedown', () => { + pixel.style.backgroundColor = undefined + }) + cont.appendChild(pixel) eraseMe.addEventListener('click' ,() => { pixel.style.backgroundColor = "white" }) + + paintAll.addEventListener('click', () => { + pixel.style.backgroundColor = paintAll + }) + } } grid(32.01) +let saveFile = document.querySelector('.storage') +function save() { + +}