Painting Wall - Prática Java Script.

Explorando o Código:

O Que o Código Faz?

O código em questão é um conjunto de instruções JavaScript que alimenta uma aplicação web interativa de pintura. Ele cria uma grade de células, cada uma delas representando um pixel, que podem ser coloridas ou apagadas com o clique do mouse ou o toque na tela, dependendo do dispositivo utilizado.

https://github.com/CostaBruno22/PantingWall.git

Principais Elementos do Código

let container = document.querySelector(".container");
let gridButton = document.querySelector(".submit-grid");
let clearGridButton = document.querySelector(".clear-grid");  
let gridWidth = document.getElementById("width-rage");  
let gridHeight = document.getElementById("height-rage"); 
let colorButton = document.querySelector(".color-input");  
let eraseBtn = document.querySelector(".erase-btn");  
let paintBtn = document.querySelector(".paint-btn");  
let widthValue = document.querySelector(".width-value");  
let heightValue = document.querySelector(".height-value");

Estes são os elementos HTML que o código manipula. Eles incluem o contêiner da grade, botões para criar e limpar a grade, controles de largura e altura da grade, botões para escolher cor e modo de apagar/pintar, e elementos para exibir os valores de largura e altura.

let events = {
mouse: {
  down: "mousedown",
  move: "mousemove",
  up: "mouseup",
},
touch: {
  down: "touchstart",
  move: "touchmove",
  up: "touchend",
},
};

Aqui é feita a definição dos eventos associados ao mouse e ao toque, permitindo a interatividade com a grade tanto em dispositivos comuns quanto em dispositivos sensíveis ao toque.

let deviceType = "";


const isTouchDevice = () => {
try {
  document.createEvent("TouchEvent");
  deviceType = "touch;";
  return true;
} catch (e) {
  deviceType = "mouse";
  return false;
}
};


isTouchDevice();

Nesse trecho é onde ocorre a identificação do dispositivo usado, e se ele suporta eventos de toque e ajusta o tipo de dispositivo em conformidade.

gridWidth.addEventListener("input", () => {
widthValue.innerHTML =
  gridWidth.value < 9 ? `0${gridWidth.value}` : gridWidth.value;
});


gridHeight.addEventListener("input", () => {
heightValue.innerHTML =
  gridHeight.value < 9 ? `0${gridHeight.value}` : gridHeight.value;
});

Acima vemos o trecho que atualiza dinamicamente os valores de largura e altura exibidos na interface conforme o usuário interage com os controles.

window.onload = () => {
gridHeight.value = 0;
gridWidth.value = 0;
};

Por fim, chegamos a parte que define os valores iniciais de largura e altura quando a página é carregada.

Resumo da obra:

Ao estudar este código simples, aprendemos como elementos HTML podem ser manipulados dinamicamente usando JavaScript para criar uma aplicação interativa de pintura. Com eventos do mouse e touch, o código permite uma experiência de usuário flexível em diferentes dispositivos.