title: Shading cells of a grid of "pixels" using javascript
body: <p>I'm working on sort of an Etch-a-Sketch project at the moment. The current issue im facing is how to make each cell of the grid incrementally get darker with every pass of the mouse cursor based on what the opacity of the cell being moused-over is. Currently whenever the cells of the grid are created it sets the background color to black and the opacity to 0, I have a function that I believe pulls the opacity of the current cell on mouseover and <em><strong>should</strong></em> increase that by 10% <code>shadeCells()</code>, however instead of doing that it just sets the opacity to 10% and each recurring pass of the mouse does nothing if the cell already has that 10% shade.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const container = document.querySelector('.gridContainer');
  const startButton = document.querySelector('.gridCreator');
  
  function createGrid(rows = 16, columns = 16) { // Creates  default grid of 16x16 on page load
    total = rows * columns;
  
    for (i = 0; i &lt; total; i++) {
      cells = document.createElement('div');
      cells.classList.add('cell');
      cells.setAttribute('style', 'margin: 0; padding: 0; background-color: black; opacity: 0;')
      //cellsToBeShaded = document.querySelectorAll('.cell');
      container.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
      container.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
      container.appendChild(cells);
    }
    shadeCells();
  }
  createGrid();
  
  function newGrid(layout) { // Prompts user for input between 2 and 100 to create new grid of a different size
    const cellCount = document.querySelectorAll('.cell');
  
    for (i = 0; i &lt; cellCount.length; i++) {
      container.removeChild(cellCount[i]);
    }
    do {
      layout = parseInt(prompt('How many columns and rows would you like to play? Pick between 12 and 100!'));
      gridSize = layout * layout;
    } while ((layout &lt; 2 &amp;&amp; Number) || (layout &gt; 100 &amp;&amp; Number));
    createGrid(layout, layout);
  }
  
  function shadeCells() { // Shades grid cells on mouseover
    const cells = document.querySelectorAll('.cell');
  
    cells.forEach(cell =&gt; {
      cell.addEventListener('mouseover', () =&gt; {
        //cell.style.backgroundColor = '#000';
        if (cell.style.opacity &gt;= 0.1) {
          cell.style.opacity += 0.1;
        } else {
          cell.style.opacity = 0.1;
        }
      })
    })
  }
  
  startButton.addEventListener('click', newGrid);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  #header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3%;
  }
  
  .headerText {
    font-size: 40px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
  }
  
  button {
    height: 50%;
    width: 7%;
    margin: 0%;
    align-self: flex-end;
    border-radius: 10px;
    border: solid black 1px;
    box-shadow: 3px 3px;
  }
  
  .gridContainer {
    margin: auto;
    height: 600px;
    width: 600px;
    border: solid black 1px;
    display: grid;
    grid-template-columns: repeat(auto, 1fr);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;div class="headerText"&gt;Etch-A-Sketch&lt;/div&gt;
    &lt;button class="gridCreator"&gt;Create Grid&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="gridContainer"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(Also <a href="https://codepen.io/codesharingaccount/pen/xxPjrMy" rel="nofollow noreferrer">https://codepen.io/codesharingaccount/pen/xxPjrMy</a>)</p>