Creating an object generator

Question

How do I create an object generator that will create a random square that is a random colour, size and position on the page? I think I have set up all the parameters but I can't put it all together.

//Size Generator
    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (200 - 50 + 1) ) + 50;
    }

    var getSize = getRndInteger(50, 200);

//Colour Generator
    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var colour = '#';
        for (var i = 0; i < 6; i++) {
        colour += letters[Math.floor(Math.random() * 16)];
      }
      return colour;
    }

    var colour = getRandomColor();

//Position Generator
    function getPosition(min, max) {
        return Math.floor(Math.random() * (600 - 0 + 1) ) + 0;
    }

    var getX = getPosition(0, 600);
    var getY = getPosition(0, 600);

//Square Generator
    function squareGenerator() {

        var div = document.createElement("square");

        div.style.backgroundColor = colour;

        div.style.left = getX + "px";

        div.style.top = getY + "px";

        div.style.height = getSize + "px";

        div.style.width = getSize + "px";

    }

Where I am stuck is how to get this to show up on the page.

It looks like your missing the call to squareGenerator() add this at the end of your script — Liam
– Liam, Commented Jul 20, 2017 at 16:02
In my full code I did have a call to it with it linked to a button, however it still did not show — Omaari
– Omaari, Commented Jul 20, 2017 at 16:04
the square in the code is an element tag to a blank div, what i found online explained to try and do it that way — Omaari
– Omaari, Commented Jul 20, 2017 at 16:07

Piotr Adam Milewski · Accepted Answer · 2017-07-20 16:25:42Z

2

First of all, The created div will wrap around nothing, so You won't see it.
a bypass would be setting the div.style.position to fixed.

Second of all, You need to append the div to the body, for example using: document.body.appendChild(div)

Third of all, You need to call the function, by placing the call: squareGenerator();

At last, when creating an element, use a valid HTML element, like div/section/article -> document.createElement('div'). It seems to be working with 'square' but I dont think all browsers will be that liberal.

//Size Generator
    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (200 - 50 + 1) ) + 50;
    }

    var getSize = getRndInteger(50, 200);

//Colour Generator
    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var colour = '#';
        for (var i = 0; i < 6; i++) {
        colour += letters[Math.floor(Math.random() * 16)];
      }
      return colour;
    }

    var colour = getRandomColor();

//Position Generator
    function getPosition(min, max) {
        return Math.floor(Math.random() * (200 - 0 + 1) ) + 0;
    }

    var getX = getPosition(0, 600);
    var getY = getPosition(0, 600);

//Square Generator
    function squareGenerator() {

        var div = document.createElement("div");

        div.style.backgroundColor = colour;

        div.style.left = getX + "px";

        div.style.top = getY + "px";

        div.style.height = getSize + "px";

        div.style.width = getSize + "px";
        div.style.position='fixed';
        document.body.appendChild(div);
    }
    squareGenerator();

You can see the desired square created at a random position.

edited Jul 20, 2017 at 16:25

answered Jul 20, 2017 at 16:05

Piotr Adam Milewski

14.7k3 gold badges23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Liam Over a year ago

I've added the code into the answer, FYI seems to work best when running full page

Piotr Adam Milewski Over a year ago

@Liam yea, the max random values are too big, they dont fit in the snippet window, i should be using snippets more, thanks :)

Omaari Over a year ago

Ok thank you! I now have the square showing up. How do I contain this to a certain div? Instead of appending the div to the body, can I append it to another div?

Piotr Adam Milewski Over a year ago

@Omaari You can get a reference to an existing element via element = document.querySelector(cssSelector) or any other getById - like method, and append the div to it via element.appendChild(div)

Piotr Adam Milewski Over a year ago

@Omaari if you dont have further questions feels free to check the anwser :)

Collectives™ on Stack Overflow

Creating an object generator

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related