From e23059454f69ff87152d9242c153e78789d49be0 Mon Sep 17 00:00:00 2001 From: "Shelton.Seaborn" Date: Fri, 2 Sep 2022 14:01:45 -0700 Subject: [PATCH 1/7] adds js index file --- pixel-art-maker.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 pixel-art-maker.js diff --git a/pixel-art-maker.js b/pixel-art-maker.js new file mode 100644 index 00000000..e69de29b From cbf67c626a1a35bf8d958989dd6446e38b1e7900 Mon Sep 17 00:00:00 2001 From: "Shelton.Seaborn" Date: Fri, 2 Sep 2022 16:11:27 -0700 Subject: [PATCH 2/7] adds Canvas and three boxes Co-authored-by: Greyes90 --- index.html | 11 +++++++++++ pixel-art-maker.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/index.html b/index.html index e69de29b..8e8bbebc 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,11 @@ + + +"Team Solid Snake Pixel Art Maker" + + +
width = '500px' height = '400px' +
+ + + + \ No newline at end of file diff --git a/pixel-art-maker.js b/pixel-art-maker.js index e69de29b..816a60d7 100644 --- a/pixel-art-maker.js +++ b/pixel-art-maker.js @@ -0,0 +1,28 @@ + + +//Add an event listener to each div so when clicked the background turns red. +function addEventListeners() { + var divs = document.getElementsById('square'); + divs.addEventListener('click', () => { + divs.style.background = 'red'; + })}; + +// var redOn = false +// let stopButton = document.getElementById('stopButton'); +// let stopLight = document.getElementById('stopLight'); +// // add event listener to detect a click event for the stop button +// stopButton.addEventListener('click', () => { +// if (redOn === false) { +// stopLight.style.background = "red"; +// return redOn = true; +// } else { +// stopLight.style.background = "black"; +// return redOn = false; +// } +// }); +//Create a small palette of two colors (e.g. red and blue) below the canvas using more div tags. +//Add an event listener to these div tags so when clicked the brush color is saved. +//Expand the dimensions of the pixel canvas. +// Expand the palette with more colors. (i.e. red, orange, yellow, green, blue, purple, brown, gray, black, white, etc.) +// Expand the palette with a brush color indicator. +// Improve the look and feel of the canvas and color palette. Be careful not to break your program's behavior! \ No newline at end of file From 858b09f398fe860ec84e1ad9e3c99467136eff66 Mon Sep 17 00:00:00 2001 From: "Shelton.Seaborn" Date: Fri, 2 Sep 2022 16:12:03 -0700 Subject: [PATCH 3/7] adds canvas and three boxes --- pixel-art-maker.css | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 pixel-art-maker.css diff --git a/pixel-art-maker.css b/pixel-art-maker.css new file mode 100644 index 00000000..613a4ab9 --- /dev/null +++ b/pixel-art-maker.css @@ -0,0 +1,38 @@ +head { + width:100%; + height:100%; +} +body { + widtth: 100%; + height: 100%; + margin:0; +} +#backgroung-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + justify-content: center; +} +#container { + display:flex; + width: 850px; + height: 550px; + margin-top: 175px; + padding: 20px; + background: rgb(56, 68, 230); + background: linear-gradient(0deg, rgb(59, 12, 230) 0%, rgb(37, 17, 219) 100%); + border-radius: 25px; + border: 2 px solid #555; + outline: 1px solid #222; + +} +div.square { + width: 40px; + height: 50px; + margin: ; + padding: 0; + outline: 1px solid #000; + background: white; + +} From 9bf081a4ac18324f5161b66b10cfc963a772095e Mon Sep 17 00:00:00 2001 From: "Shelton.Seaborn" Date: Fri, 2 Sep 2022 16:12:22 -0700 Subject: [PATCH 4/7] adds canvas and three boxes --- index.html | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 8e8bbebc..4589e0ef 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,17 @@ -"Team Solid Snake Pixel Art Maker" +"Team Solid Snake Pixel Art Maker" + -
width = '500px' height = '400px' -
+ +
+
+
+
+
+
+ From 4a4d9261bc94428ddcc6066567efc6adfef551eb Mon Sep 17 00:00:00 2001 From: "Shelton.Seaborn" Date: Tue, 6 Sep 2022 08:58:35 -0700 Subject: [PATCH 5/7] Pixel art maker grid complete Co-authored-by: Greyes90 --- index.html | 20 ++++++----------- pixel-art-maker.css | 43 ++++++++++++++++++------------------- pixel-art-maker.js | 52 +++++++++++++++++++++++++++++++++++++++------ 3 files changed, 74 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index 4589e0ef..2b7722a2 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,12 @@ -"Team Solid Snake Pixel Art Maker" - + +"Team Solid Snake Pixel Art Maker" + - - -
-
-
-
-
-
- - - +
+
+ \ No newline at end of file diff --git a/pixel-art-maker.css b/pixel-art-maker.css index 613a4ab9..9394321c 100644 --- a/pixel-art-maker.css +++ b/pixel-art-maker.css @@ -3,36 +3,35 @@ head { height:100%; } body { - widtth: 100%; - height: 100%; - margin:0; -} -#backgroung-container { width: 100%; height: 100%; - display: flex; - flex-direction: row; - justify-content: center; + margin:0; } -#container { - display:flex; - width: 850px; - height: 550px; - margin-top: 175px; - padding: 20px; - background: rgb(56, 68, 230); - background: linear-gradient(0deg, rgb(59, 12, 230) 0%, rgb(37, 17, 219) 100%); - border-radius: 25px; - border: 2 px solid #555; - outline: 1px solid #222; -} -div.square { +div.pixel{ width: 40px; height: 50px; - margin: ; + margin: 0; padding: 0; outline: 1px solid #000; + background: white; +} + +.pixels { background: white; + width: 24px; + height: 24px; + border: 1px solid black; + float: left; + +} + +#container { + margin: aut10; + background-color: grey; + width: 600px; + height: 600px; + border: 10px solid black; } + diff --git a/pixel-art-maker.js b/pixel-art-maker.js index 816a60d7..331dabed 100644 --- a/pixel-art-maker.js +++ b/pixel-art-maker.js @@ -1,11 +1,51 @@ -//Add an event listener to each div so when clicked the background turns red. -function addEventListeners() { - var divs = document.getElementsById('square'); - divs.addEventListener('click', () => { - divs.style.background = 'red'; - })}; +// //Add an event listener to each div so when clicked the background turns red. +// function addEventListeners() { +// var divs = document.getElementsById('square'); +// divs.addEventListener('click', () => { +// divs.style.background = 'red'; +// })}; + + // pixelFunc() + + // function pixelFunc() { + + + // for (let i = 0; i < 100; i++) { + // let container = document.createElement('container') + // let pixel = document.createElement('div'); + // container.appendChild(pixel); + // pixel.classList.add("pixels"); + // console.log('hello world') + + // } + + // let pixels = document.getElementsByClassName('pixels'); + // console.log(pixels); + // for(let j = 0; j < pixels.length; j++) { + // pixels[j].addEventListener("click"), function(e) { + // console.log("test") + // } + // } + // } + pixelFunc() + function pixelFunc() { + for (let i = 0; i < 529; i++) { + let pixel = document.createElement('div'); + container.appendChild(pixel); + pixel.classList.add("pixels"); + } + let pixels = document.getElementsByClassName('pixels'); + console.log(pixels); + for(let j = 0; j < pixels.length; j++) { + pixels[j].addEventListener(("click"), () => { + console.log("test"); + }); + } + } + + // var redOn = false // let stopButton = document.getElementById('stopButton'); From c49b41a5bc640514b792ee441dbf59b2e98fec16 Mon Sep 17 00:00:00 2001 From: "Shelton.Seaborn" Date: Tue, 6 Sep 2022 12:15:14 -0700 Subject: [PATCH 6/7] updated feature to allow coloring of individual pixels Co-authored-by: Greyes90 --- index.html | 8 ++++- pixel-art-maker.css | 10 +----- pixel-art-maker.js | 84 +++++++++++++++++---------------------------- 3 files changed, 39 insertions(+), 63 deletions(-) diff --git a/index.html b/index.html index 2b7722a2..60559562 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,15 @@ "Team Solid Snake Pixel Art Maker" + + +
+
- \ No newline at end of file + + + diff --git a/pixel-art-maker.css b/pixel-art-maker.css index 9394321c..11f1a7ee 100644 --- a/pixel-art-maker.css +++ b/pixel-art-maker.css @@ -8,14 +8,7 @@ body { margin:0; } -div.pixel{ - width: 40px; - height: 50px; - margin: 0; - padding: 0; - outline: 1px solid #000; - background: white; -} + .pixels { background: white; @@ -34,4 +27,3 @@ div.pixel{ border: 10px solid black; } - diff --git a/pixel-art-maker.js b/pixel-art-maker.js index 331dabed..e485b6c5 100644 --- a/pixel-art-maker.js +++ b/pixel-art-maker.js @@ -1,68 +1,46 @@ - - -// //Add an event listener to each div so when clicked the background turns red. -// function addEventListeners() { -// var divs = document.getElementsById('square'); -// divs.addEventListener('click', () => { -// divs.style.background = 'red'; -// })}; - - // pixelFunc() - - // function pixelFunc() { - - - // for (let i = 0; i < 100; i++) { - // let container = document.createElement('container') - // let pixel = document.createElement('div'); - // container.appendChild(pixel); - // pixel.classList.add("pixels"); - // console.log('hello world') - - // } - - // let pixels = document.getElementsByClassName('pixels'); - // console.log(pixels); - // for(let j = 0; j < pixels.length; j++) { - // pixels[j].addEventListener("click"), function(e) { - // console.log("test") - // } - // } - // } - pixelFunc() +var defaultColor = "#ff0000" + + + pixelFunc() function pixelFunc() { for (let i = 0; i < 529; i++) { let pixel = document.createElement('div'); container.appendChild(pixel); pixel.classList.add("pixels"); } - let pixels = document.getElementsByClassName('pixels'); + var pixels = document.getElementsByClassName('pixels'); console.log(pixels); for(let j = 0; j < pixels.length; j++) { pixels[j].addEventListener(("click"), () => { console.log("test"); }); + } + } + + var color = document.querySelector('#favcolor'); + + colorFunc(); + //create an event listener that changes the color of the pixel to the color of the color picker + function colorFunc(){ + let pixels = document.getElementsByClassName('pixels'); + + console.log(color); + for(let i = 0; i < pixels.length; i++) { + //add a class name + pixels[i].addEventListener(("click"), () => { + pixels[i].style.backgroundColor = color.value; + + console.log("is it working?"); + }); } } + // function updateBackground( e ) { + // pixels[j].style.backgroundColor = e.value + // } + /* mprove the mouse so it behaves like a real paintbrush. In other words, allow the user to paint by clicking and dragging across the canvas. For this, you'll need a combination of the mousedown, mouseenter, and mouseup events. +TIP: The mouseenter event doesn't bubble up the DOM tree. */ + - -// var redOn = false -// let stopButton = document.getElementById('stopButton'); -// let stopLight = document.getElementById('stopLight'); -// // add event listener to detect a click event for the stop button -// stopButton.addEventListener('click', () => { -// if (redOn === false) { -// stopLight.style.background = "red"; -// return redOn = true; -// } else { -// stopLight.style.background = "black"; -// return redOn = false; -// } -// }); -//Create a small palette of two colors (e.g. red and blue) below the canvas using more div tags. -//Add an event listener to these div tags so when clicked the brush color is saved. -//Expand the dimensions of the pixel canvas. -// Expand the palette with more colors. (i.e. red, orange, yellow, green, blue, purple, brown, gray, black, white, etc.) -// Expand the palette with a brush color indicator. -// Improve the look and feel of the canvas and color palette. Be careful not to break your program's behavior! \ No newline at end of file +// function onRed() { +// document.getElementById('stopLight').style.backgroundColor = "red"; \ No newline at end of file From f41654e68ac30c2b3e290e0e69d628b6cf9a087f Mon Sep 17 00:00:00 2001 From: "Shelton.Seaborn" Date: Tue, 6 Sep 2022 14:27:07 -0700 Subject: [PATCH 7/7] updated functionality and border styling Co-authored-by: Greyes90 --- index.html | 2 +- pixel-art-maker.css | 12 ++++++--- pixel-art-maker.js | 59 +++++++++++++++++++++++++++++++++++++++------ 3 files changed, 61 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 60559562..b25c2085 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ "Team Solid Snake Pixel Art Maker" - +
diff --git a/pixel-art-maker.css b/pixel-art-maker.css index 11f1a7ee..ed29962c 100644 --- a/pixel-art-maker.css +++ b/pixel-art-maker.css @@ -6,14 +6,17 @@ body { width: 100%; height: 100%; margin:0; + background-color: cadetblue; + font-family: "Segoe UI", Tahoma, Helvetica, sans-serif; + } .pixels { background: white; - width: 24px; - height: 24px; + width: 18px; + height: 18px; border: 1px solid black; float: left; @@ -24,6 +27,9 @@ body { background-color: grey; width: 600px; height: 600px; - border: 10px solid black; + border: 25px solid transparent; + border-image-slice: 27 27 27 27; + border-image-width: 25px; + border-image-source: url('https://aduvan.ru/wp-content/uploads/photo-gallery/wood-texturs/wood-texture_(8).jpg'); } diff --git a/pixel-art-maker.js b/pixel-art-maker.js index e485b6c5..66f55173 100644 --- a/pixel-art-maker.js +++ b/pixel-art-maker.js @@ -3,7 +3,7 @@ var defaultColor = "#ff0000" pixelFunc() function pixelFunc() { - for (let i = 0; i < 529; i++) { + for (let i = 0; i < 900; i++) { let pixel = document.createElement('div'); container.appendChild(pixel); pixel.classList.add("pixels"); @@ -19,8 +19,9 @@ var defaultColor = "#ff0000" var color = document.querySelector('#favcolor'); - colorFunc(); + //create an event listener that changes the color of the pixel to the color of the color picker + function colorFunc(){ let pixels = document.getElementsByClassName('pixels'); @@ -34,13 +35,55 @@ var defaultColor = "#ff0000" }); } } - // function updateBackground( e ) { - // pixels[j].style.backgroundColor = e.value - // } - /* mprove the mouse so it behaves like a real paintbrush. In other words, allow the user to paint by clicking and dragging across the canvas. For this, you'll need a combination of the mousedown, mouseenter, and mouseup events. + + /* improve the mouse so it behaves like a real paintbrush. In other words, allow the user to paint by clicking and dragging across the canvas. For this, you'll need a combination of the mousedown, mouseenter, and mouseup events. TIP: The mouseenter event doesn't bubble up the DOM tree. */ +let draw = false; +drawFunc(); +function drawFunc(){ + let pixels = document.getElementsByClassName('pixels'); +console.log('we here'); + console.log(color); + for(let i = 0; i < pixels.length; i++) { + console.log('we over there'); + + //color when i click + pixels[i].addEventListener(("click"), () => { + pixels[i].style.backgroundColor = color.value; + }); + //color when i hold down and drag + pixels[i].addEventListener('mouseover', function(){ + if(draw) return pixels[i].style.backgroundColor = color.value; + console.log("is this working?"); + }) + pixels[i].addEventListener('mousdown', function(){ + pixels[i].style.backgroundColor = color.value + }) + + // container.appendChild(pixels[i]) + } + } +// Set draw to true when the user press down the mouse +window.addEventListener("mousedown", function(){ + draw = true +}) +// Set draw to false when the user release the mouse +window.addEventListener("mouseup", function(){ + draw = false +}) +populateStorage(); +//save everything in the container +function populateStorage() { + localStorage.setItem('container'); + document.getElementById('container').value; + + setStyles(); +} +//save div class pixels and updated style(all the pixels that were colored in the grid) +function setStyles(){ -// function onRed() { -// document.getElementById('stopLight').style.backgroundColor = "red"; \ No newline at end of file + const currentPixel = localStorage.getItem('pixels'); + console.log('what am i storing?'); +} \ No newline at end of file