1<div id="impossible-click-container">
2    <button id="impossible-button">Click me!</button>
3    <p id="click-count">Clicks: 0</p>
4</div>

1#impossible-click-container {
2    position: relative;
3    width: 300px;
4    height: 200px;
5    border: 2px solid #ccc;
6    overflow: hidden;
7}
8
9#impossible-button {
10    position: absolute;
11    padding: 10px 20px;
12    background-color: #4CAF50;
13    color: white;
14    border: none;
15    cursor: pointer;
16    transition: transform 0.2s ease-out;
17}
18
19#click-count {
20    position: absolute;
21    bottom: 10px;
22    left: 10px;
23    margin: 0;
24}

1document.addEventListener('DOMContentLoaded', () => {
2    const button = document.getElementById('impossible-button');
3    const container = document.getElementById('impossible-click-container');
4    const clickCounter = document.getElementById('click-count');
5    let clicks = 0;
6
7    if (!button || !container || !clickCounter) return;
8
9    const moveButton = () => {
10        const rect = button.getBoundingClientRect();
11        const containerRect = container.getBoundingClientRect();
12
13        let newX = Math.random() * (containerRect.width - rect.width);
14        let newY = Math.random() * (containerRect.height - rect.height);
15
16        button.style.transform = `translate(${newX}px, ${newY}px)`;
17    };
18
19    button.addEventListener('mouseover', moveButton);
20
21    button.addEventListener('click', () => {
22        clicks++;
23        clickCounter.textContent = `Clicks: ${clicks}`;
24    });
25});