Untitled

//selection.html
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selection Page</title>
    <link rel="stylesheet" href="css/selection.css">
    <script src="js/selection.js" defer></script>
</head>
<body>
<header>
    <nav>
        <div class="logo">
            <img src="/images/logo.png" alt="Photoroom Logo">
        </div>
        <ul>
            <li><a href="/" class="cta-button">Create Chart</a></li>
            <li><a href="#" class="cta-button">Ücretlendirme</a></li>
            <li><a href="/howtouse" class="cta-button">How To Use</a></li>
            <li><a href="#" class="cta-button">Giriş Yap</a></li>
        </ul>
    </nav>
</header>

<h1 class="hero">
    Select Your Variables
</h1>

<div id="button-container-x">
    <h2>For X</h2>
    <!-- First set of buttons will be appended here -->
</div>

<div id="button-container-y">
    <h2>For Y</h2>
    <!-- Second set of buttons will be appended here -->
</div>

<div id="submit-container" style="text-align: center; margin-top: 20px;">
    <button id="submit-button" class="submit-button">Submit</button>
</div>

<!-- Diğer içerikler veya scriptler buraya eklenebilir -->

</body>
</html>


//selection.js
document.addEventListener('DOMContentLoaded', function() {
    fetch('/upload/getColumnHeaders')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                var buttonContainerX = document.getElementById('button-container-x');
                var buttonContainerY = document.getElementById('button-container-y');

                buttonContainerX.innerHTML = '<h2>For X</h2>';  // Clear existing buttons and add heading
                buttonContainerY.innerHTML = '<h2>For Y</h2>';  // Clear existing buttons and add heading

                var columnHeaders = data.columnHeaders;
                columnHeaders.forEach((header, index) => {
                    // Birinci buton (For X)
                    var button1 = document.createElement('button');
                    button1.textContent = header;
                    button1.setAttribute('id', 'button1-' + (index + 1));
                    button1.classList.add('toggle-button');

                    button1.addEventListener('click', function() {
                        this.classList.toggle('selected');
                    });

                    buttonContainerX.appendChild(button1);

                    // İkinci buton (For Y)
                    var button2 = document.createElement('button');
                    button2.textContent = header;
                    button2.setAttribute('id', 'button2-' + (index + 1));
                    button2.classList.add('toggle-button');

                    button2.addEventListener('click', function() {
                        this.classList.toggle('selected');
                    });

                    buttonContainerY.appendChild(button2);
                });
            } else {
                console.error('Sütun başlıkları alınamadı:', data.message);

            }
        })
        .catch(error => {
            console.error('Hata:', error);

        });

    var submitButton = document.getElementById('submit-button');
    submitButton.addEventListener('click', function() {
        window.location.href = '/howtouse';
    });
});
Editor is loading...