Advertisement
Kenedy-Hernique

Project: Etch-a-Sketch

Aug 28th, 2020 (edited)
121
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let screen = document.querySelector('.screen');
  2.  
  3. let answer = parseInt(prompt("Please enter the dimension number: "));
  4. let resetButton = document.createElement('button');
  5. let body = document.querySelector('.body');
  6.  
  7. resetButton.addEventListener('click', resetScreen)
  8.  
  9. resetButton.innerText = 'Reset';
  10. body.appendChild(resetButton);
  11.  
  12. let allSquares;
  13.  
  14. function resetScreen(){
  15.     allSquares.forEach(allSquares => allSquares.style.backgroundColor = 'white');
  16.     answer = parseInt(prompt("Please enter the dimension number: "));
  17.     createGrid(answer);
  18. }
  19.  
  20. function createGrid (answer){
  21.     gridElementWidth = 960/(answer);
  22.     for(let i=1; i<=(answer*answer); i++){
  23.         let gridDiv = document.createElement('div');
  24.         gridDiv.classList.add('square');
  25.         screen.appendChild(gridDiv);
  26.     }
  27.     screen.setAttribute('style',`display: grid; grid-template-rows: repeat(${answer}, ${gridElementWidth}px); grid-template-columns: repeat(${answer}, ${gridElementWidth}px)`);
  28.     allSquares = document.querySelectorAll('.square');
  29. }
  30.  
  31. function changeColor(e){
  32.     const r = randomValue(0,255);
  33.     const g = randomValue(0,255);
  34.     const b = randomValue(0,255);
  35.     const rgb = `rgb(${r},${g},${b})`;
  36.     e.target.style.backgroundColor = rgb;
  37.     console.log('OK');
  38. }
  39.  
  40. function randomValue(min,max) {
  41.     return Math.floor(Math.random()*(max-min+1))+min;
  42. }
  43.  
  44. createGrid(answer);
  45. allSquares.forEach(allSquares => {
  46.     allSquares.addEventListener('mouseenter', changeColor);
  47. });
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement