| Current Path : /home/kamilrogam/poligon/projekty/mondrianMosaic/assets/ |
| 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);
}
});