ChatGPT Generated Code

Python Code

     
    python3  app.py
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 298-196-996

The templates/index.html

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ChatGPT Generated Code</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>ChatGPT Generated Code </h1>
  <h2>Python Code</h2>
 
  The templates/index.html


    
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5x5 Editable Grid</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .grid-container {
            display: inline-block;
            margin: 40px;
        }
        table.grid-table {
            border-collapse: collapse;
            margin: 0 auto;
        }
        table.grid-table th,
        table.grid-table td {
            width: 40px;
            height: 40px;
            border: 1px solid #333;
            text-align: center;
            vertical-align: middle;
            font-size: 1.2em;
        }
        table.grid-table th {
            background: #f0f0f0;
        }
        table.grid-table th.corner {
            background: #fff;
            border: none;
        }
        input.grid-input {
            width: 38px;
            height: 38px;
            border: none;
            text-align: center;
            font-size: 1.1em;
            background: transparent;
            outline: none;
        }
        input.grid-input:focus {
            background: #e0f7fa;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <table class="grid-table">
            <tr>
                <th class="corner"></th>
                {% for col in columns %}
                    <th>{{ col }}</th>
                {% endfor %}
            </tr>
            {% for r in rows %}
                <tr>
                    <th>{{ r }}</th>
                    {% for c in columns %}
                        <td>
                            <input class="grid-input" type="text" maxlength="1" id="cell-{{r}}-{{c}}" data-row="{{ r }}" data-col="{{ c }}">
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </table>
    </div>
    <script>
        // Grid configuration
        const columns = ['A', 'B', 'C', 'D', 'E'];
        const rows = [1, 2, 3, 4, 5];

        document.querySelectorAll('.grid-input').forEach(input => {
            input.addEventListener('input', function() {
                // Auto-uppercase, restrict to alphanum, single char
                this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 1);

                // If a character is entered, move to next cell
                if (this.value.length === 1) {
                    let row = parseInt(this.getAttribute('data-row'));
                    let col = this.getAttribute('data-col');
                    let colIdx = columns.indexOf(col);

                    // Determine next cell position
                    let nextColIdx = colIdx + 1;
                    let nextRow = row;
                    if (nextColIdx >= columns.length) {
                        // If at end of row, go to first col of next row
                        nextColIdx = 0;
                        nextRow = row + 1;
                    }
                    if (nextRow <= rows[rows.length - 1]) {
                        let nextCellId = `cell-${nextRow}-${columns[nextColIdx]}`;
                        let nextCell = document.getElementById(nextCellId);
                        if (nextCell) nextCell.focus();
                    }
                }
            });

            // Optional: Move focus left with backspace if empty
            input.addEventListener('keydown', function(e) {
                if (e.key === "Backspace" $amp;$amp; this.value === "") {
                    let row = parseInt(this.getAttribute('data-row'));
                    let col = this.getAttribute('data-col');
                    let colIdx = columns.indexOf(col);
                    let prevColIdx = colIdx - 1;
                    let prevRow = row;
                    if (prevColIdx < 0) {
                        prevColIdx = columns.length - 1;
                        prevRow = row - 1;
                    }
                    if (prevRow >= rows[0]) {
                        let prevCellId = `cell-${prevRow}-${columns[prevColIdx]}`;
                        let prevCell = document.getElementById(prevCellId);
                        if (prevCell) prevCell.focus();
                        e.preventDefault();
                    }
                }
            });
        });
    </script>
</body>
</html>

     </code>
  
  </pre>
  </iframe> 
 <script src="scripts.js"></script> 
</body>

</html>