var shapes = document.getElementById("shapes")
var color = 0

function randNum(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
  }

setInterval(() => {
    var shaping = randNum(1, 4)
    var top = randNum(10, 80)
    var left = randNum(10, 80)
    if (shaping === 1) {
        // Square
        shapes.style.width = "120px"
        shapes.style.height = "120px"
        shapes.style.borderRadius = "0px"
        shapes.style.left = `${left}%`
        shapes.style.top = `${top}%`

    } else if (shaping === 2) {
    // Circle
        shapes.style.width = "120px"
        shapes.style.height = "60px"
        shapes.style.borderRadius = "0px"
        shapes.style.left = `${left}%`
        shapes.style.top = `${top}%`


    } else if (shaping === 3) {
        // Circle
        shapes.style.width = "100px"
        shapes.style.height = "100px"
        shapes.style.borderRadius = "100px"
        shapes.style.left = `${left}%`
        shapes.style.top = `${top}%`


    } else if (shaping === 4) {
        //
        shapes.style.width = "100px"
        shapes.style.height = "100px"
        shapes.style.borderRadius = "100px"
        shapes.style.left = `${left}%`
        shapes.style.top = `${top}%`


    }

    var color = randNum(1, 4)

    if (color === 1){
        shapes.style.background = "dodgerblue"
    }else if (color === 2) {
        shapes.style.background = "lightgreen"
    }else if (color === 3) {
        shapes.style.background = "pink"
    }else if (color === 4) {
        shapes.style.background = "red"
    }
},500)