Hoverboard

#javascript #webdev

Hello there! How're you doing? Hope you're well and sound.

This is just an article on a side-project which I'd made with @traversymedia tutorial. That guy is just awesome in making cool projects.

Let's Start Building!

We'll start with a new folder named Hoverboard (anything you wish) and will add index.html, style.css and script.js

Html :

<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="https://designshack.net/wp-content/uploads/hover-effects.png">
    <title>Hoverboard</title>
</head>
<body>
    <div class="container" id = "container">
        <!-- Squares are inserted by JS -->
    </div>
    <script src="script.js"></script>
</body>
</html>

I'll try to keep it short and brief as it doesn't demand it. Here's the thing, we created a container and gave it an id with the same class name in a div.

Inside the container, we'll generate some cool square boxes with the help of script.js.

JS :

const container = document.getElementById('container');
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'];
const SQUARES = 500;
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 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)]
}

That's pretty much up to it. What this code does is that it'll generate the SQUARES using an iterative loop (say upto 500 for now).

We got an array of different colors for the color effect when we hover over the square boxes to make it look just awesome.

Using the event listeners, we're able to make it possible and we made changes to the styles based on the actions of mouse over and out.

Styles :

*{
    box-sizing: border-box;
}

body{
    background-color: #111;
    display: flex;
    flex-direction: column;
    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: 400px;
}

.square{
    background-color: #1d1d1d;
    box-shadow: 0 0 2px #000;
    height: 16px;
    width: 16px;
    margin: 2px;
    transition: 2s ease;
}

.square:hover{
    transition-duration: 0s;
}

The beauty of transitions is exhibited here. All we need is the power of flexbox and that's it. Box-shadow is a way to go.

Repo ⚡
Live ⚡

I think that's it, my fellow developer. Thank you for your time!