[miniProjects] 36_Hoverboard

36_Hoverboard

💻주제 : 박스에 마우스를 올려놓으면 랜덤 색이 칠해짐.

✨JS

const container = document.getElementById('container')
const colors = ['#FFACAC', '#40128B', '#79E0EE', '#FFEA20', '#82CD47']
const SQUARES = 500

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

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

  container.appendChild(sqaure)
}

function setColor(element) {
  const color = getRandomColor()
  element.style.background = color
  element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${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)]
}

✨CSS

.square {
  background-color: #1d1d1d;
  box-shadow: 0 0 2px #000;
  width: 16px;
  height: 16px;
  margin: 2px;
  /* 2초 지나면 색이 사라짐 */
  transition: 2s ease;
}

.square:hover {
  /* 마우스를 올렸을 때 바로 색이 나타나도록 */
  transition-duration: 0s;
}