I have an application that creates a trailing-lights effect when you hover over colorless squares defined inside a container. When a mouseover event occurs, the squares are filled with a random color and when a mouseout event occurs the color fades away into its previous state. And this only works on desktops.

Here is a working demo https://therealrajan.github.io/HoverBoard/ and here is the GitHub repo I'm working with https://github.com/TheRealRajan/HoverBoard

This is all the code.

const container = document.querySelector('.container')
const colors = ['#3891a6', '#fde74c', '#ec9e57', '#e4795c', '#db5461','#e3655b','#95b8d1', '#666a86', '#edafb8', '#f42272', '#2541b2', '#1768ac', '#06bee1','#003459', '#662c91', '#17a398']

const SQUARES = 621

for(let i =0; i < SQUARES ; i++){
    const square = document.createElement('div')
    square.classList.add('square')

    square.addEventListener('mouseover', ()=> setColor(square))
    square.addEventListener('mouseout', ()=> removeColor(square))

    container.appendChild(square)
}

function setColor(element){
    const color = getRandomColor()
    element.style.background = color
    element.style.boxShadow = `0 0 5px ${color}`
}

function removeColor(element){
    element.style.background = '#1d1d1d'
    element.style.boxShadow = '0 0 2px #000'
}

function getRandomColor(){
    return colors[Math.floor(Math.random() * colors.length)]
}

I couldn't figure out how to convert it so it works with touch inputs. How do I change it so that it also works with touch events on devices with touchscreens?

square.addEventListener('mouseover', ()=> setColor(square))
square.addEventListener('mouseout', ()=> removeColor(square))