Limiting an element from appearing out of the screen

I'm trying to make a square appear at random positions of the screen. I have set it's position property to be absolute and in javascript i'm running a random number between 0 to 100, this will then be assigned as a percentage to top and left property. however if the random number was ~100 or a bit less the square will appear out of the screen. How do I fix this problem?

var shape1 = document.getElementById("shape1");

//creating random number to 100
        function randomNum() {
            var r = Math.random();
            var y = (r * (100 - 0 + 1)) + 0;
            var x = Math.floor(y);
            console.log(x);
            return x;
        }
    //reappear at random position
        function reappear(object) {
        object.style.left = randomNum().toString() + "%";
        object.style.top = randomNum().toString() + "%";
        object.style.display = "block";
        }

reappear(shape1);

code: http://ift.tt/1H1C5Yh