DEV Community

loading...

My first javascript experiment

nedzen profile image Marius ・2 min read

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

You can see this experiment live on codepen

Feel free to let me know what you think.

Discussion (3)

pic
Editor guide
Collapse
myblood profile image
Alexandr Vasilyev

Hello, friend!

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

Collapse
nedzen profile image
Marius Author

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.

Collapse
myblood profile image
Alexandr Vasilyev

Well done, friend. This should be interesting