<div class="wrapper">
	<div class="buttons">
		<button type="button" class="button" data-filter="all">All</button>
		<button type="button" class="button" data-toggle=".frontend">Frontend</button>
		<button type="button" class="button" data-toggle=".backend">Backend</button>
		<button type="button" class="button" data-toggle=".sql">SQL</button>
		<button type="button" class="button" data-toggle=".other">Other</button>
	</div>

	<div class="container">
		<i class="devicon-html5-plain-wordmark colored frontend"></i>
		<i class="devicon-css3-plain-wordmark colored frontend"></i>
		<i class="devicon-sass-original colored frontend"></i>
		<i class="devicon-javascript-plain colored frontend"></i>
		<i class="devicon-typescript-plain colored frontend"></i>
		<i class="devicon-php-plain colored backend"></i>
		<i class="devicon-laravel-plain colored backend"></i>
		<i class="devicon-ruby-plain colored backend"></i>
		<i class="devicon-nodejs-plain-wordmark colored backend"></i>
		<i class="devicon-mysql-plain-wordmark colored sql"></i>
		<i class="devicon-postgresql-plain-wordmark colored sql"></i>
		<i class="devicon-sqlite-plain-wordmark colored sql"></i>
		<i class="devicon-docker-plain-wordmark colored other"></i>
		<i class="devicon-webpack-plain-wordmark colored other"></i>
		<i class="devicon-babel-plain colored other"></i>
		<i class="devicon-ubuntu-plain-wordmark colored other">
		</i>
		<i class="devicon-fedora-plain colored other"></i>
		<i class="devicon-vscode-plain colored other"></i>
	</div>
</div>

.wrapper {
	margin: 3rem;
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}

.button {
	border: 1px solid #333;
	border-right: none;
	color: #333;
	padding: .5rem 1rem;
	background-color: transparent;
	cursor: pointer;
	width: 100px;
	transition: .3s ease;
	position: relative;
	
	&:first-child {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}
	
	&:last-child {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border-right: 1px solid #333;
	}
	
	&.mixitup-control-active {
		color: #f0f0f0;
		background-color: #333;
	}
	
	&:after {
		position: absolute;
		content: '';
		width: 25px;
		height: 3px;
		bottom: -1rem;
		left: 50%;
		transform: translateX( -50% );
		background-color: #000;
	}

	&[data-filter] {
		&:after {
			content: none;
		}
	}

	&[data-toggle=".frontend"] {
		&:after {
			background-color: #1976D2;
		}
	}
	
	&[data-toggle=".backend"] {
		&:after {
			background-color: #388E3C;
		}
	}
	
	&[data-toggle=".sql"] {
		&:after {
			background-color: #FFA000;
		}
	}
	
	&[data-toggle=".other"] {
		&:after {
			background-color: #455A64;
		}
	}
}

.container {
	max-width: 800px;
	gap: .5rem;
	display: flex;
	flex-wrap: wrap;

	i {
		font-size: 100px;
		border-radius: 4px;
		border: 2px solid #000;
		background-color: #f0f0f0;
		padding: .5rem;
		display: block;

		&.frontend {
			border-color: #1976D2;
			background-color: #E3F2FD;
		}
		
		&.backend {
			border-color: #388E3C;
			background-color: #E8F5E9;
		}
		
		&.sql {
			border-color: #FFA000;
			background-color: #FFF8E1;
		}
		
		&.other {
			border-color: #455A64;
			background-color: #ECEFF1;
		}
	}
}

import mixitup from "https://cdn.skypack.dev/mixitup@3.3.1";

mixitup( '.container', {
	selectors: {
        target: 'i'
    },
});

// icon shuffle
const icons = document.querySelectorAll( '.container i' );
const iconsArr = shuffle( Array.from( icons ) );
const container = document.querySelector( '.container' );
container.innerHTML = '';
iconsArr.forEach( icon => container.appendChild( icon ) );

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
	return array;
}