πŸ‘©πŸ»β€πŸ’»Colorful Boxes In HTML

🧢 Tags:: #HTML #Random_Projects
2022-10-13 - 04:26

HTML Code

<!DOCTYPE html>

<html lang="en">

Β  <head>

Β  Β  <meta charset="UTF-8" />

Β  Β  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Β  Β  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Β  Β  <title>Document</title>

Β  Β  <link rel="stylesheet" href="style.css" />

Β  Β  <script src="app.js" defer></script>

Β  </head>

Β  <body>

Β  Β  <div class="container" id="container"></div>

Β  </body>

</html>

STYLE.CSS

* {

Β  Β  box-sitting:border-box

}

body{

Β  Β  background-color: #111;

Β  Β  display: flex;

Β  Β  align-items: center;

Β  Β  justify-content: center;

Β  Β  height: 100vh;

Β  Β  overflow: hidden;

Β  Β  margin: 0;

}

  

.container {

Β  Β  display: flex;

Β  Β  align-items: center;

Β  Β  justify-content: center;

Β  Β  flex-wrap: wrap;

Β  Β  max-width: 1600px;

  

}

  

.square {

Β  Β  background-color: #1d1d1d;

Β  Β  box-sizing: 0 0 2px black;

Β  Β  height: 50px;

Β  Β  width: 50px;

Β  Β  margin: 2px;

Β  Β  transition: 2s ease;

}

  

.square:hover {

Β  Β  transition-duration: 0s;

  

}

APP.JS

const container = document.getElementById('container')

const colors = ['#e74c4c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']

const SQUARES = 522

  

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 = getRandom()

Β  Β  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 getRandom() {

Β  Β  return colors[Math.floor(Math.random() * colors.length)]

}