Finaliza projeto

Author: m4rcos-dev

trybe-projetos/pixels-art/index.html

@@ -81,9 +81,9 @@ <h1 id="title" class="main-font bg-title">PIXEL ART</h1>
     </main>
 
     <footer>
-        <H3 id="footer" class="main-font">Desenvolvido como projeto na <a href="https://www.betrybe.com/">TRYBE</a> por <a href="https://www.linkedin.com/in/dev-marcospaulo">Marcos Paulo!</a></H3>
+        <H3 id="footer" class="main-font">Desenvolvido como projeto na <a href="https://www.betrybe.com/">TRYBE</a> por <a href="https://www.linkedin.com/in/dev-marcospaulo">Marcos Paulo</a>!</H3>
     </footer>
-    <script src="refatorando.js"></script>
+    <script src="script.js"></script>
 </body>
 
 </html>

trybe-projetos/pixels-art/refatorando.js

@@ -1,107 +1,19 @@
-//SELEÇÃO DO HTML.
-let selected = document.getElementsByClassName('selected')[0].classList[1];
-let colorStore = 'background-color: rgb(0, 0, 0)';
-
-const title = document.getElementById('title');
-
-const colorPalette = document.getElementById('color-palette');
-let colorRed = document.getElementsByClassName('color-red');
-let colorBlue = document.getElementsByClassName('color-blue');
-let colorGreen = document.getElementsByClassName('color-green'); 
-let color = document.getElementsByClassName('color');
-
-const clearBoard = document.getElementById('clear-board');
+//SELEÇÃO HTML
 const imputBoardSize = document.getElementById('board-size');
-const buttonGenerateBoard = document.getElementById('generate-board');
-
-
 let pixelBoard = document.getElementById('pixel-board');
-let line = document.getElementsByClassName('line');
-const board1 = document.getElementsByClassName('board1');
-const board2 = document.getElementsByClassName('board2');
-const board3 = document.getElementsByClassName('board3');
-const board4 = document.getElementsByClassName('board4');
-const board5 = document.getElementsByClassName('board5');
-let pixel = document.getElementsByClassName('pixel');
-
-//INICIA COM BACKGROUND-COLOR: BLACK;
-function colorize(paint) {
-    let aux = paint.classList[1];
-    paint.classList.replace(aux, selected);
-  }
-  
-  pixelBoard.addEventListener('click', function (event) {
-    colorize(event.target);
-    // console.log(event.target); //TESTAR SELEÇÃO
-  })
-
-//GERA CORES ALETORIAS NA PALETA DE CORES.
-function generateColor() {
-
-  const letters = '0123456789ABCDEF';
-  let color = '#';
-  
-  for (let e = 0; e < 6; e += 1) {
-    color += letters[Math.floor(Math.random() * 16)];
-  }
-  
-  return color;
-  
-}
-
-for (let f = 1; f < color.length; f += 1){
-  let capatAux = 'background-color: ' + generateColor();
-  color[f].setAttribute('style', capatAux);
-}
-
-
-//SELECIONA COR NA PALETA.
-function colorSelect(selection) {
-  for (let i = 0; i < color.length; i += 1) {
-    color[i].classList.remove('selected');
-    if (selection === color[i]) {
-      selection.classList.toggle('selected');
-      selected = document.getElementsByClassName('selected')[0].classList[1];
-    }
-  }
-}
-
-colorPalette.addEventListener('click', function (event) {
-  let teste = window.getComputedStyle(event.target);
-  let teste2 = teste.getPropertyValue('background-color');
-  colorStore = teste2;
-  colorSelect(event.target);
-  console.log(colorStore);
-  // console.log(color); //TESTAR SELEÇÃO
-  // console.log(selected); //TESTAR SELEÇÃO
-})
-
-//COLORE PIXEL.
-function colorize2(paint) {
-  // let aux = window.getComputedStyle(paint);
-  // let aux2 = aux.getPropertyValue('background-color');
-  // paint.setAttribute('style', 'background-color' + aux2)
-  // let aux = paint.classList[1];
-  paint.setAttribute('style', 'background-color: ' + colorStore);
-}
-
-pixelBoard.addEventListener('click', function (event) {
-  colorize2(event.target);
-  // console.log(event.target); //TESTAR SELEÇÃO
-})
-
-//LIMPA PIXELS.
-clearBoard.addEventListener('click', function () {
-  location.reload();
-});
+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');
+const clearBoard = document.getElementById('clear-board');
 
 //MUNDA QUANTIDADE DE PIXEL PARA PINTAR.
 function sizeBoard() {
   let imputValue = imputBoardSize.value;
   if (imputValue < 5) {
     imputValue = 5;
-  } else if (imputValue > 50) {
-    imputValue = 50;
+  } else if (imputValue > 30) {
+    imputValue = 30;
   } 
     for (let c = 0; c < imputValue; c += 1) {
       let newLine = document.createElement('div');
@@ -119,13 +31,33 @@ function sizeBoard() {
 }
 // console.log(pixelBoard); //TESTAR TAMANHO.
 
-
 buttonGenerateBoard.addEventListener('click', function () {
   if (imputBoardSize.value === '') {
-    alert('Board inválido!');
+    alert('Tamanho inválido!');
   } else {
     pixelBoard.innerHTML = '';
     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);
+})
+
+//LIMPAR TELA.
+clearBoard.addEventListener('click', function () {
+  location.reload();
+});