Partial Sudoku Verifier To practice my JavaScript for future employment, I've decided to take up the challenge of writing a javascript sudoku verifier. This code only verify's one of the nine 3x3 blocks there are. I would like feedback on this portion of the code, so I can continue my development with more knowledge and more efficient code. Also, any feedback on my HTML/CSS is warmly welcome. I'm using a fullscreen chrome browser for development, so the #middle centers the box on my screen, but it might not on yours.

You will have to click on full page -&gt; to view the CSS correctly.



function checkAnswer() {

 //reset each time button is clicked
 document.getElementById('correct').style.display = 'none';
 document.getElementById('incorrect').style.display = 'none';

 //add each input into 2D array
 let first_row = document.getElementsByClassName('row1');
 let second_row = document.getElementsByClassName('row2');
 let third_row = document.getElementsByClassName('row3');
 let sudoku = [
  [first_row[0].value, first_row[1].value, first_row[2].value],
  [second_row[0].value, second_row[1].value, second_row[2].value],
  [third_row[0].value, third_row[1].value, third_row[2].value]
 ]

 //check if each number is unique in the 2D array
 for (let i = 0; i &lt; sudoku.length; i++) {
  for (let j = 0; j &lt; sudoku[i].length; j++) {
   if(!isUnique(sudoku[i][j], sudoku)) {
    document.getElementById('incorrect').style.display = 'block';
    return;
   }
  }
 }
 document.getElementById('correct').style.display = 'block';
}

function isUnique(num, arr) {
 let count = 0;
 //check entire array
 for(let i = 0; i &lt; arr.length; i++) {
  for(let j = 0; j &lt; arr[i].length; j++) {
   if(arr[i][j] == num) {
    count++;
   }
  }
 }
 return count == 1;
}
body { 
 background-color: pink; 
}
input { 
 width: 50px; 
 height: 50px; 
 font-size: 20px; 
 text-align: center; 
}
button { 
 width: 100px; 
 height: 50px; 
 font-size: 15px; 
 margin-left: 40px; 
}

#middle { 
 margin-left: 900px; 
 margin-top: 300px; 
}
&lt;!DOCTYPE html&gt;
&lt;html lang="en-US"&gt;
 &lt;head&gt;
  &lt;meta charset='UTF-8'&gt;
  &lt;title&gt;Sudoku&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;div id="middle"&gt;
   &lt;table&gt;
    &lt;tr&gt;
     &lt;td&gt;&lt;input type="text" class="row1" maxlength="1" value="3"&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" class="row1" maxlength="1"&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" class="row1" maxlength="1"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;&lt;input type="text" class="row2" maxlength="1"&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" class="row2" maxlength="1" value="2"&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" class="row2" maxlength="1"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;&lt;input type="text" class="row3" maxlength="1" value="7"&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" class="row3" maxlength="1"&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" class="row3" maxlength="1"&gt;&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/table&gt;
   &lt;br&gt;
   &lt;button type="button" onclick="checkAnswer()"&gt;Check&lt;/button&gt;
   &lt;div id="incorrect" style="display: none;"&gt;
    &lt;h1&gt;Incorrect Entry!&lt;/h1&gt;
   &lt;/div&gt;
   &lt;div id="correct" style="display: none;"&gt;
    &lt;h1&gt;Correct Entry!&lt;/h1&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
Styling

You can align centered elements relatively to their parent.


#middle { 
  margin-left: 900px; 
  margin-top: 300px; 
}



#middle {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  transform: translateY(50%);
}


Naming

In my opinion, for algorithms it is OK to use short variable names.


let first_row = document.getElementsByClassName('row1');
let second_row = document.getElementsByClassName('row2');
let third_row = document.getElementsByClassName('row3');
let sudoku = [
  [first_row[0].value, first_row[1].value, first_row[2].value],
  [second_row[0].value, second_row[1].value, second_row[2].value],
  [third_row[0].value, third_row[1].value, third_row[2].value]
]



let r1 = document.getElementsByClassName('row1');
let r2 = document.getElementsByClassName('row2');
let r3 = document.getElementsByClassName('row3');
let sudoku = [
    [r1[0].value, r1[1].value, r1[2].value],
    [r2[0].value, r2[1].value, r2[2].value],
    [r3[0].value, r3[1].value, r3[2].value]
]