Update script.js

Author: FidelValenzuela

script.js

@@ -1,24 +1,44 @@
 document.addEventListener('DOMContentLoaded', () => {
     const grid = document.getElementById('sudokuGrid');
 
-    // Generate 9 sections (3x3 blocks)
-    for (let section = 0; section < 9; section++) {
-        const sectionDiv = document.createElement('div');
-        sectionDiv.classList.add('section');
-
-        // Create 9 cells per section
-        for (let i = 0; i < 9; i++) {
+    // Create 9x9 grid
+    for (let row = 0; row < 9; row++) {
+        for (let col = 0; col < 9; col++) {
             const cell = document.createElement('input');
             cell.setAttribute('type', 'number');
             cell.setAttribute('min', '1');
             cell.setAttribute('max', '9');
-            cell.classList.add('cell');
-            sectionDiv.appendChild(cell);
+            cell.classList.add('cell', 'bg-white', 'border', 'border-gray-300', 'text-center');
+            cell.style.width = '3rem';
+            cell.style.height = '3rem';
+
+            // Add thicker borders for 3x3 sections
+            if (row % 3 === 0 && row !== 0) cell.style.borderTopWidth = '2px';
+            if (col % 3 === 0 && col !== 0) cell.style.borderLeftWidth = '2px';
+
+            grid.appendChild(cell);
         }
-        grid.appendChild(sectionDiv);
     }
 });
 
+// Update specific row in the grid
+function updateRow() {
+    const rowIndex = parseInt(document.getElementById('rowSelect').value);
+    const rowInput = document.getElementById('rowInput').value;
+
+    // Validate input
+    if (rowInput.length !== 9 || !/^\d+$/.test(rowInput)) {
+        alert('Please enter exactly 9 digits (1-9).');
+        return;
+    }
+
+    const cells = document.querySelectorAll('.cell');
+    for (let i = 0; i < 9; i++) {
+        const cellIndex = rowIndex * 9 + i;
+        cells[cellIndex].value = rowInput[i];
+    }
+}
+
 function getPuzzle() {
     const cells = document.querySelectorAll('.cell');
     let puzzle = [];
@@ -28,7 +48,6 @@ function getPuzzle() {
         const value = parseInt(cell.value) || 0;
         row.push(value);
 
-        // Add row to puzzle every 9 cells
         if ((index + 1) % 9 === 0) {
             puzzle.push(row);
             row = [];
@@ -38,6 +57,17 @@ function getPuzzle() {
     return puzzle;
 }
 
+function includes1To9(arr) {
+    if (arr.length !== 9) return false;
+    let sortedArr = arr.slice().sort((a, b) => a - b);
+    for (let i = 0; i < 9; i++) {
+        if (sortedArr[i] !== i + 1) {
+            return false;
+        }
+    }
+    return true;
+}
+
 function getRow(puzzle, row) {
     return puzzle[row];
 }
@@ -58,17 +88,6 @@ function getSection(puzzle, x, y) {
     return section;
 }
 
-function includes1To9(arr) {
-    if (arr.length !== 9) return false;
-    let sortedArr = arr.slice().sort((a, b) => a - b);
-    for (let i = 0; i < 9; i++) {
-        if (sortedArr[i] !== i + 1) {
-            return false;
-        }
-    }
-    return true;
-}
-
 function sudokuIsValid(puzzle) {
     for (let row = 0; row < 9; row++) {
         if (!includes1To9(getRow(puzzle, row))) return false;
@@ -87,11 +106,12 @@ function sudokuIsValid(puzzle) {
 function validateSudoku() {
     const puzzle = getPuzzle();
     const resultElement = document.getElementById('result');
+
     if (sudokuIsValid(puzzle)) {
         resultElement.textContent = "The puzzle is valid!";
-        resultElement.className = "result valid";
+        resultElement.style.color = "green";
     } else {
         resultElement.textContent = "The puzzle is invalid.";
-        resultElement.className = "result invalid";
+        resultElement.style.color = "red";
     }
 }