<html>

<head>
    <title>JavaScript</title>
    <style>
        .btn {
            padding: 15px;
            border: 1px solid #ddd;
            text-align: center;
            font-size: 1.6em;
            display: inline-block;
            background-color: red;
            border-radius: 15px;
            color: white;
            margin: auto;
            cursor: pointer;
        }
        
        .container {
            width: 100%;
            height: 100%;
            text-align: center;
            margin: auto;
        }
        
        .score {
            font-size: 2em;
            padding: 5px;
            width: 40%;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="score">0</div>
        <div class="startGame btn">Start Game Here</div>
    </div>
    <script>
        const container = document.querySelector(".container");
        const startGame = document.querySelector(".startGame");
        const scoreArea = document.querySelector(".score");
        let player = {
            score: 0
        };
        startGame.addEventListener("click", function () {
            startGame.style.display = "none";
            let ranTime = Math.random() * 2000 + 1000;
            setTimeout(makeItem, ranTime);
        })

        function makeItem() {
            let boundary = container.getBoundingClientRect();
            let div = document.createElement("div");
            div.style.position = "absolute";
            div.style.left = Math.random() * boundary.width + "px";
            div.style.top = Math.random() * boundary.height + "px";
            div.style.width = Math.random() * 10 + 40 + "px";
            div.style.height = Math.random() * 10 + 40 + "px";
            div.style.borderRadius = "10%";
            div.style.cursor = "pointer";
            div.style.backgroundColor = "#" + Math.random().toString(16).substr(-6);
            div.style.border = "1px solid black";
            div.startTime = Date.now();
            div.addEventListener("click", function () {
                let endTime = Date.now();
                let diff = (endTime - div.startTime) / 1000;
                scoreArea.innerHTML = "Clicked in " + diff + "seconds";
                //startGame.style.display = "block";
                clearTimeout(div.timer);
                container.removeChild(div);
                makeItem();
            })
            div.timer = setTimeout(function () {
                container.removeChild(div);
                makeItem();
            }, 1000);
            container.appendChild(div);
        }
    </script>
</body>

</html>