Dear internet, I decided to learn javascript. ES6 has some pretty cool features, and the minimal syntax is freaking awesome. I am learning mainly from freecodecamp.org, youtube and a book I stumbled upon a while ago: eloquent javascript.
There is a long road ahead, however everything starts with a first step, so here I am taking the first step with this exercise.
So, I made a simple script that makes a non-uniform rectangles
grid on the screen, the result can be considered more or less generative art.
First I start with an array of random numbers where each number is unique.
const myArr = [];
function randomize() {
maxNo = 16; // range of the random generated nr
rNo = Math.floor(Math.random() * Math.ceil(maxNo)) // generate random nr
const summit = myArr.reduce((a, b) => (a + b), 0); // sum of array numbers
// see if the total is 100
if (summit < (100 - maxNo)) {
if (myArr.includes(rNo)) {
randomize();
} else {
myArr.push(rNo);
randomize();
}
} else {
return
}
}
Next I am going to create the html elements
function populate() {
randomize();
// Prepare your array
const arrDiff = (100 - myArr.reduce((a, b) => (a + b), 0))
myArr.push(arrDiff);
myArr.sort((a, b) => a - b);
// populate the html
const myCompo = [];
const freak = document.querySelector('#monsters');
const roar = document.createElement('div');
roar.classList.add('roaw');
freak.appendChild(roar);
myArr.forEach (function(el, item) {
let node = document.createElement('div');
node.style.width = el + 'vw';
node.style.gradient
myCompo.push(node);
});
// Insert them all inside the container
myCompo.forEach(function(el) {
roar.appendChild(el);
});
myArr.forEach(function(el) {
clone = roar.cloneNode(true);
clone.style.height = el + 'vh';
freak.appendChild(clone)
})
} populate();
You can see this experiment live on codepen
Feel free to let me know what you think.
Top comments (3)
Hello, friend!
What does this grid come in handy for? Is it just for fun?)
Hi Alexandr, It is mainly for fun yes. I'm inventing all sort of exercises to level up my JS skills. Thanks for checking it out. I'll post new ones soon.
Well done, friend. This should be interesting