## DEV Community is a community of 601,094 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

loading...

# My first javascript experiment

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.

## Discussion (3) 