Adicona escolha de cor e função pintar pixel

Author: m4rcos-dev

trybe-projetos/pixels-art/index.html

@@ -26,11 +26,12 @@ <h1 id="title" class="main-font bg-title">PIXEL ART - SUA ARTE EM 8 BIT</h1>
                 <input id="board-size" type="number" min="1"
                     oninput="validity.valid ? this.save = value : value = this.save;" placeholder="Min: 5 Max: 50"
                     class="main-font">
-                <button id="generate-board" class="main-font">VQV</button>
+                <button id="generate-board" class="main-font">VQV!</button>
             </div>
 
             <div id="color" class="main-font horizontal">Escolha uma cor:
                 <input id="palette-color" class="horizontal main-font" type="color">
+                <button id="select-color" class="main-font">VQV!</button>
                 <button id="clear-board" class="main-font">Limpar</button>
             </div>
         </div>

trybe-projetos/pixels-art/refatorando.js

@@ -2,7 +2,9 @@
 const imputBoardSize = document.getElementById('board-size');
 let pixelBoard = document.getElementById('pixel-board');
 const buttonGenerateBoard = document.getElementById('generate-board');
-
+let paletteColor = document.getElementById('palette-color');
+let colorStore = 'background-color: rgb(0, 0, 0)';
+const buttonSelectColor = document.getElementById('select-color');
 
 //MUNDA QUANTIDADE DE PIXEL PARA PINTAR.
 function sizeBoard() {
@@ -36,3 +38,20 @@ buttonGenerateBoard.addEventListener('click', function () {
     sizeBoard();
   }
 })
+
+//SELECIONA COR
+buttonSelectColor.addEventListener('click', function(event){
+  let aux = paletteColor.value
+  colorStore = aux;
+  console.log(aux);
+  console.log(colorStore);
+})
+
+//COLORE PIXEL
+function colorize2(paint) {
+  paint.setAttribute('style', 'background-color: ' + colorStore,);
+}
+
+pixelBoard.addEventListener('click', function (event) {
+  colorize2(event.target);
+})