## 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.

# 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();
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');
freak.appendChild(roar);

myArr.forEach (function(el, item) {
let node = document.createElement('div');
node.style.width = el + 'vw';
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)

Alexandr Vasilyev

Hello, friend!

What does this grid come in handy for? Is it just for fun?)

Marius

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.

Alexandr Vasilyev

Well done, friend. This should be interesting