Your IP : 216.73.217.62


Current Path : /home/kamilrogam/poligon/projekty/mondrianMosaic/assets/
Upload File :
Current File : /home/kamilrogam/poligon/projekty/mondrianMosaic/assets/init.js

/*jshint esversion:6,browser:true,devel: true*/
document.addEventListener('DOMContentLoaded', function () {
	const mondrian = document.getElementById('mondrian');
	document.body.style.margin = 0;
	mondrian.style.maxWidth = '100%';
	mondrian.style.margin = '0 auto';
	mondrian.style.display = 'grid';
	mondrian.style.gridGap = '6px';
	mondrian.style.gridTemplateColumns = 'repeat(auto-fit, minmax(50px, 1fr))';
	mondrian.style.gridAutoRows = '1fr';
	mondrian.style.gridAutoFlow = 'dense';
	mondrian.style.background = '#000';
	mondrian.style.border = '6px solid #000';

	const youLikeCats = 'Hell yeah';

	for (let i = 0; i < 120; i++) {
		let item = document.createElement('div');
		item.classList += 'mondrian-item';
		let child = document.createElement('img');
		child.classList += 'mondrian-item-child';

		item.style.gridColumn = 'span ' + (Math.floor(Math.random() * 3) + 1);
		item.style.gridRow = 'span ' + (Math.floor(Math.random() * 2) + 1);
		item.style.maxWidth = '250px';
		item.style.width = 'auto';
		item.style.lineHeight = 0;

		let childWidth = Math.floor(Math.random() * 500) + 100 + 'px';
		let childHeight = Math.floor(Math.random() * 80) + 10 + 'px';


		if (youLikeCats !== 'Hell yeah') {
			let childColor = (Math.random() * 0xFFFFFF << 0).toString(16);
			child.setAttribute('src', `http://placehold.it/${childWidth}x${childHeight}/${childColor}`);
		} else {
			let imgArray = [
			'https://i.imgflip.com/10eseu.jpg',
			'http://s4.storage.akamai.coub.com/get/b18/p/coub/simple/cw_image/2a4ffacc3d8/8b6ee6ed8927496cce41b/med_1409078052_1381498600_00063.jpg',
			'https://i.imgflip.com/vmpnp.jpg',
			'https://memegenerator.net/img/images/14700505.jpg',
			'http://1.bp.blogspot.com/-faGqmQCFz1c/Usa1TRmZUuI/AAAAAAAAKzo/kxtGUnpEdLI/s1600/grumpy-cat-large-face.jpg'
		];
			let n = Math.floor(Math.random() * 5);
			child.setAttribute('src', imgArray[n]);
		}
		child.style.width = '100%';
		child.style.height = '100%';
		child.style.objectFit = 'cover';
		item.appendChild(child);
		mondrian.appendChild(item);
	}
});