Button info - Githubissues

HTML [

<!DOCTYPE html>

Button App

]

JS [

let buttonCount = 0; const xhr = new XMLHttpRequest();

function createButton(shape) { const newButton = document.createElement('button'); newButton.className = 'button'; newButton.innerHTML = Button ${++buttonCount};

if (shape === 'circle') {
    newButton.style.borderRadius = '50%';
}

document.body.appendChild(newButton);

// Save button data to the server using AJAX
saveButtonData(newButton, shape);

// Add event listener for button deletion
newButton.addEventListener('click', function() {
    deleteButton(this);
});

}

function ajaxRequest(method, url, data, callback) { xhr.open(method, url, true); xhr.setRequestHeader('Content-type', 'application/json');

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            const response = JSON.parse(xhr.responseText);
            callback(response);
        } else {
            console.error('Error in AJAX request:', xhr.statusText);
        }
    }
};

xhr.send(data);

}

function saveButtonData(button, shape) { const positionX = button.offsetLeft; const positionY = button.offsetTop; const buttonName = button.innerHTML;

const url = 'saveButtonData.php';
const data = JSON.stringify({
    positionX,
    positionY,
    buttonName,
    shape,
});

ajaxRequest('POST', url, data, function(response) {
    console.log(response);
});

}

function deleteButton(button) { const url = 'deleteButton.php'; const data = JSON.stringify({ buttonName: button.innerHTML, });

ajaxRequest('POST', url, data, function(response) {
    if (response.success) {
        // Remove the button from the DOM
        button.remove();
    } else {
        console.error('Error deleting button:', response.error);
    }
});

}

]

Php: position

[

<?php $data = json_decode(file_get_contents('php://input'), true);

$servername = "your_server_name"; $username = "your_username"; $password = "your_password"; $dbname = "your_database_name";

try { $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$positionX = $data['positionX'];
$positionY = $data['positionY'];
$buttonName = $data['buttonName'];
$shape = $data['shape'];

$stmt = $conn->prepare("INSERT INTO button_data (positionX, positionY, buttonName, shape) VALUES (:positionX, :positionY, :buttonName, :shape)");

$stmt->bindParam(':positionX', $positionX);
$stmt->bindParam(':positionY', $positionY);
$stmt->bindParam(':buttonName', $buttonName);
$stmt->bindParam(':shape', $shape);

$stmt->execute();

echo json_encode(['success' => true]);

} catch (PDOException $e) { echo json_encode(['success' => false, 'error' => $e->getMessage()]); }

$conn = null; ?>

]

Php: delete

[