I built a sudoku table in which the input fields have a different background color to that of the whole table so we can easily see which cells to fill. I have a button to clear the inputs field of sudoku table. The problem is that, when the function clears the input fields, it also changes the input background color. It returns the whole table in the same background color. And I can't return the background color of the inputs.
Here is the reset function:
function clearSudoku() {
for (let i = 0; i < table.rows.length; i ) {
for (let j = 0; j < table.rows[i].cells.length; j ) {
table.rows[i].cells[j].textContent = sudoku[i][j];
}
}
}
let sudoku1 = [
[3, 8, 7, 4, 9, 1, 6, 2, 5],
[2, 4, 1, 5, 6, 8, 3, 7, 9],
[5, 6, 9, 3, 2, 7, 4, 1, 8],
[7, 5, 8, 6, 1, 9, 2, 3, 4],
[1, 2, 3, 7, 8, 4, 5, 9, 6],
[4, 9, 6, 2, 5, 3, 1, 8, 7],
[9, 3, 4, 1, 7, 6, 8, 5, 2],
[6, 7, 5, 8, 3, 2, 9, 4, 1],
[8, 1, 2, 9, 4, 5, 7, 6, 3],
];
let sudoku2 = [
[5, 3, 4, 6, 7, 8, 9, 1, 2],
[6, 7, 2, 1, 9, 5, 3, 4, 8],
[1, 9, 8, 3, 4, 2, 5, 6, 7],
[8, 5, 9, 7, 6, 1, 4, 2, 3],
[4, 2, 6, 8, 5, 3, 7, 9, 1],
[7, 1, 3, 9, 2, 4, 8, 5, 6],
[9, 6, 1, 5, 3, 7, 2, 8, 4],
[2, 8, 7, 4, 1, 9, 6, 3, 5],
[3, 4, 5, 2, 8, 6, 1, 7, 9],
];
let sudoku3 = [
[7, 3, 5, 6, 1, 4, 8, 9, 2],
[8, 4, 2, 9, 7, 3, 5, 6, 1],
[9, 6, 1, 2, 8, 5, 3, 7, 4],
[2, 8, 6, 3, 4, 9, 1, 5, 7],
[4, 1, 3, 8, 5, 7, 9, 2, 6],
[5, 7, 9, 1, 2, 6, 4, 3, 8],
[1, 5, 7, 4, 9, 2, 6, 8, 3],
[6, 9, 4, 7, 3, 8, 2, 1, 5],
[3, 2, 8, 5, 6, 1, 7, 4, 9],
];
let sudokuId;
let pass;
let pass2 = [];
window.onload = function() {
pickRandomSudoku();
random(50, sudoku);
fillEmptySudoku(sudoku);
};
//remove numbers from table
const random = (notVisible, sudoku) => {
for (let i = 0; i < notVisible; i ) {
let row = Math.floor(Math.random() * 9);
let col = Math.floor(Math.random() * 9);
if (sudoku[row][col] !== null) {
sudoku[row][col] = null;
} else {
notVisible ;
}
}
sudoku;
};
//map the matrix values into the html table
function fillEmptySudoku(sudoku) {
let table = document.getElementById("table");
for (let i = 0; i < table.rows.length; i ) {
for (let j = 0; j < table.rows[i].cells.length; j ) {
if (sudoku[i][j] === null) {
table.rows[i].cells[j].setAttribute("contenteditable", "true");
} else {
table.rows[i].cells[j].textContent = sudoku[i][j];
}
}
}
//restrict inputs to one number only
table.addEventListener("input", function(e) {
e.target.value = e.data;
});
}
//Pick random table between sudoku1, sudoku2,sudoku3
const pickRandomSudoku = () => {
let sudokuBoards = [sudoku1, sudoku2, sudoku3];
num = Math.floor(Math.random() * sudokuBoards.length); // get a random number between 0-2
sudoku = sudokuBoards[num]; //choose element at random index inside the array
if (sudoku == sudoku1) sudokuId = "sudoku1";
if (sudoku == sudoku2) sudokuId = "sudoku2";
if (sudoku == sudoku3) sudokuId = "sudoku3";
console.log(sudokuId);
return sudoku;
};
//check if final board filled by user is valid
const checkGame = () => {
let sudoku1 = [
[3, 8, 7, 4, 9, 1, 6, 2, 5],
[2, 4, 1, 5, 6, 8, 3, 7, 9],
[5, 6, 9, 3, 2, 7, 4, 1, 8],
[7, 5, 8, 6, 1, 9, 2, 3, 4],
[1, 2, 3, 7, 8, 4, 5, 9, 6],
[4, 9, 6, 2, 5, 3, 1, 8, 7],
[9, 3, 4, 1, 7, 6, 8, 5, 2],
[6, 7, 5, 8, 3, 2, 9, 4, 1],
[8, 1, 2, 9, 4, 5, 7, 6, 3],
];
let sudoku2 = [
[5, 3, 4, 6, 7, 8, 9, 1, 2],
[6, 7, 2, 1, 9, 5, 3, 4, 8],
[1, 9, 8, 3, 4, 2, 5, 6, 7],
[8, 5, 9, 7, 6, 1, 4, 2, 3],
[4, 2, 6, 8, 5, 3, 7, 9, 1],
[7, 1, 3, 9, 2, 4, 8, 5, 6],
[9, 6, 1, 5, 3, 7, 2, 8, 4],
[2, 8, 7, 4, 1, 9, 6, 3, 5],
[3, 4, 5, 2, 8, 6, 1, 7, 9],
];
let sudoku3 = [
[7, 3, 5, 6, 1, 4, 8, 9, 2],
[8, 4, 2, 9, 7, 3, 5, 6, 1],
[9, 6, 1, 2, 8, 5, 3, 7, 4],
[2, 8, 6, 3, 4, 9, 1, 5, 7],
[4, 1, 3, 8, 5, 7, 9, 2, 6],
[5, 7, 9, 1, 2, 6, 4, 3, 8],
[1, 5, 7, 4, 9, 2, 6, 8, 3],
[6, 9, 4, 7, 3, 8, 2, 1, 5],
[3, 2, 8, 5, 6, 1, 7, 4, 9],
];
let table = document.getElementById("table");
let cell = document.querySelectorAll('input[type="number"]');
for (let i = 0; i < table.rows.length; i ) {
for (let j = 0; j < table.rows[i].cells.length; j ) {
let cellContent = table.rows[i].cells[j].innerText;
if (table.rows[i].cells[j].querySelector("input")) {
cellContent = table.rows[i].cells[j].querySelector("input").value;
}
if (sudokuId == "sudoku1") {
if (cellContent == sudoku1[i][j]) {
pass = true;
// cell.style.background = "red";
} else pass = false;
}
if (sudokuId == "sudoku2") {
if (cellContent == sudoku2[i][j]) {
pass = true;
// cell.style.background = "aqua";
// cell.style.background = "red";
} else pass = false;
}
if (sudokuId == "sudoku3") {
if (cellContent == sudoku3[i][j]) {
pass = true;
// cell.style.background = "aqua";
// cell.style.background = "red";
} else pass = false;
}
pass2.push(pass);
}
}
if (pass2.includes(false)) {
failMsg = document.getElementById("fail-msg");
failMsg.style.display = "inline";
winMsg = document.getElementById("win-msg");
winMsg.style.display = "none";
} else {
winMsg = document.getElementById("win-msg");
winMsg.style.display = "inline";
failMsg = document.getElementById("fail-msg");
failMsg.style.display = "none";
}
};
function clearSudoku() {
for (let i = 0; i < table.rows.length; i ) {
for (let j = 0; j < table.rows[i].cells.length; j ) {
table.rows[i].cells[j].textContent = sudoku[i][j];
}
}
}
const newGame = () => {
window.location.href = "sudoku.html";
};* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
max-width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background-image: linear-gradient(to top, #7e8dea 0%, #0c35c7 100%);
}
/* Userpage */
#userpage {
text-align: center;
border: 3px solid greenyellow;
width: 40%;
position: absolute;
}
.title {
font-size: 50px;
padding: 40px;
}
#name {
color: blue;
}
#login-btn {
font-size: 150%;
margin: 15px;
border: solid blue;
background-color: rgb(62, 114, 255);
color: white;
padding: 10px;
cursor: pointer;
}
#login-btn:hover {
font-weight: bold;
border-color: greenyellow;
}
#username {
font-size: 20px;
margin-bottom: 30px;
padding: 10px;
border: 3px solid greenyellow;
width: 500px;
position: relative;
}
#password {
font-size: 20px;
margin-bottom: 30px;
padding: 10px;
border: 3px solid greenyellow;
width: 500px;
position: relative;
}
#login-error-msg-holder {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
#login-error-msg {
display: none;
color: brown;
font-size: 20px;
padding-bottom: 10px;
}
/* Levels page */
.difficulty {
position: absolute;
border: 3px solid greenyellow;
text-align: center;
}
#difficultyLevel {
position: relative;
padding: 20px;
}
#buttonsDiv {
position: relative;
padding-bottom: 20px;
}
.buttons {
font-size: 150%;
margin: 15px;
border: solid blue;
background-color: rgb(62, 114, 255);
padding: 10px;
padding-left: 30px;
padding-right: 30px;
cursor: pointer;
}
.buttons:hover {
font-weight: bold;
border-color: greenyellow;
}
/*---------- sudoku page------------- */
#main-holder {
text-align: center;
position: absolute;
}
#sudoku-title {
font-size: 50px;
color: azure;
}
.inp {
min-width: 100%;
text-align: center;
min-height: 100%;
border: none;
background-color: azure;
font-size: 16px;
}
.inp:hover {
background: rgb(62, 114, 255);
}
table {
border: 4px solid;
border-collapse: collapse;
width: 400px;
height: 400px;
text-align: center;
background-color: #8df1b5;
}
td {
border: 1px solid black;
min-width: 41.5px;
}
td:nth-of-type(3) {
border-right: 3px solid black;
}
td:nth-of-type(6) {
border-right: 3px solid black;
}
tr:nth-of-type(3) {
border-bottom: 3px solid black;
}
tr:nth-of-type(6) {
border-bottom: 3px solid black;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
.sudoku-btn {
width: 80px;
font-size: 18px;
margin: 10px;
border: solid blue;
background-color: rgb(62, 114, 255);
color: white;
padding: 10px;
cursor: pointer;
}
#final-msg {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
#win-msg {
color: goldenrod;
font-size: 18px;
display: none;
}
#fail-msg {
color: darkred;
font-size: 18px;
display: none;
}<table id="table">
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
</table>
<input type="submit" id="btn-end" value="Finish" onclick="checkGame()" />
<input type="submit" id="btn-new" onclick="newGame()" value="New" />
<input type="submit" id="btn-return" onclick="clearSudoku()" value="Again" />CodePudding user response：
You need to treat editable and pre-filled cells differently, just like you do in fillEmptySudoku().
You only need to clear the editable fields. And to do this, you have to assign the <input> HTML to the cell.
function clearSudoku() {
let table = document.getElementById("table");
for (let i = 0; i < table.rows.length; i ) {
for (let j = 0; j < table.rows[i].cells.length; j ) {
if (sudoku[i][j] === null) {
table.rows[i].cells[j].innerHTML = '<input type="number" min="1" max="9" step="1" >';
}
}
}
}
let sudoku1 = [
[3, 8, 7, 4, 9, 1, 6, 2, 5],
[2, 4, 1, 5, 6, 8, 3, 7, 9],
[5, 6, 9, 3, 2, 7, 4, 1, 8],
[7, 5, 8, 6, 1, 9, 2, 3, 4],
[1, 2, 3, 7, 8, 4, 5, 9, 6],
[4, 9, 6, 2, 5, 3, 1, 8, 7],
[9, 3, 4, 1, 7, 6, 8, 5, 2],
[6, 7, 5, 8, 3, 2, 9, 4, 1],
[8, 1, 2, 9, 4, 5, 7, 6, 3],
];
let sudoku2 = [
[5, 3, 4, 6, 7, 8, 9, 1, 2],
[6, 7, 2, 1, 9, 5, 3, 4, 8],
[1, 9, 8, 3, 4, 2, 5, 6, 7],
[8, 5, 9, 7, 6, 1, 4, 2, 3],
[4, 2, 6, 8, 5, 3, 7, 9, 1],
[7, 1, 3, 9, 2, 4, 8, 5, 6],
[9, 6, 1, 5, 3, 7, 2, 8, 4],
[2, 8, 7, 4, 1, 9, 6, 3, 5],
[3, 4, 5, 2, 8, 6, 1, 7, 9],
];
let sudoku3 = [
[7, 3, 5, 6, 1, 4, 8, 9, 2],
[8, 4, 2, 9, 7, 3, 5, 6, 1],
[9, 6, 1, 2, 8, 5, 3, 7, 4],
[2, 8, 6, 3, 4, 9, 1, 5, 7],
[4, 1, 3, 8, 5, 7, 9, 2, 6],
[5, 7, 9, 1, 2, 6, 4, 3, 8],
[1, 5, 7, 4, 9, 2, 6, 8, 3],
[6, 9, 4, 7, 3, 8, 2, 1, 5],
[3, 2, 8, 5, 6, 1, 7, 4, 9],
];
let sudokuId;
let pass;
let pass2 = [];
window.onload = function() {
pickRandomSudoku();
random(50, sudoku);
fillEmptySudoku(sudoku);
};
//remove numbers from table
const random = (notVisible, sudoku) => {
for (let i = 0; i < notVisible; i ) {
let row = Math.floor(Math.random() * 9);
let col = Math.floor(Math.random() * 9);
if (sudoku[row][col] !== null) {
sudoku[row][col] = null;
} else {
notVisible ;
}
}
sudoku;
};
//map the matrix values into the html table
function fillEmptySudoku(sudoku) {
let table = document.getElementById("table");
for (let i = 0; i < table.rows.length; i ) {
for (let j = 0; j < table.rows[i].cells.length; j ) {
if (sudoku[i][j] === null) {
table.rows[i].cells[j].setAttribute("contenteditable", "true");
} else {
table.rows[i].cells[j].textContent = sudoku[i][j];
}
}
}
//restrict inputs to one number only
table.addEventListener("input", function(e) {
e.target.value = e.data;
});
}
//Pick random table between sudoku1, sudoku2,sudoku3
const pickRandomSudoku = () => {
let sudokuBoards = [sudoku1, sudoku2, sudoku3];
num = Math.floor(Math.random() * sudokuBoards.length); // get a random number between 0-2
sudoku = sudokuBoards[num]; //choose element at random index inside the array
if (sudoku == sudoku1) sudokuId = "sudoku1";
if (sudoku == sudoku2) sudokuId = "sudoku2";
if (sudoku == sudoku3) sudokuId = "sudoku3";
console.log(sudokuId);
return sudoku;
};
//check if final board filled by user is valid
const checkGame = () => {
let sudoku1 = [
[3, 8, 7, 4, 9, 1, 6, 2, 5],
[2, 4, 1, 5, 6, 8, 3, 7, 9],
[5, 6, 9, 3, 2, 7, 4, 1, 8],
[7, 5, 8, 6, 1, 9, 2, 3, 4],
[1, 2, 3, 7, 8, 4, 5, 9, 6],
[4, 9, 6, 2, 5, 3, 1, 8, 7],
[9, 3, 4, 1, 7, 6, 8, 5, 2],
[6, 7, 5, 8, 3, 2, 9, 4, 1],
[8, 1, 2, 9, 4, 5, 7, 6, 3],
];
let sudoku2 = [
[5, 3, 4, 6, 7, 8, 9, 1, 2],
[6, 7, 2, 1, 9, 5, 3, 4, 8],
[1, 9, 8, 3, 4, 2, 5, 6, 7],
[8, 5, 9, 7, 6, 1, 4, 2, 3],
[4, 2, 6, 8, 5, 3, 7, 9, 1],
[7, 1, 3, 9, 2, 4, 8, 5, 6],
[9, 6, 1, 5, 3, 7, 2, 8, 4],
[2, 8, 7, 4, 1, 9, 6, 3, 5],
[3, 4, 5, 2, 8, 6, 1, 7, 9],
];
let sudoku3 = [
[7, 3, 5, 6, 1, 4, 8, 9, 2],
[8, 4, 2, 9, 7, 3, 5, 6, 1],
[9, 6, 1, 2, 8, 5, 3, 7, 4],
[2, 8, 6, 3, 4, 9, 1, 5, 7],
[4, 1, 3, 8, 5, 7, 9, 2, 6],
[5, 7, 9, 1, 2, 6, 4, 3, 8],
[1, 5, 7, 4, 9, 2, 6, 8, 3],
[6, 9, 4, 7, 3, 8, 2, 1, 5],
[3, 2, 8, 5, 6, 1, 7, 4, 9],
];
let table = document.getElementById("table");
let cell = document.querySelectorAll('input[type="number"]');
for (let i = 0; i < table.rows.length; i ) {
for (let j = 0; j < table.rows[i].cells.length; j ) {
let cellContent = table.rows[i].cells[j].innerText;
if (table.rows[i].cells[j].querySelector("input")) {
cellContent = table.rows[i].cells[j].querySelector("input").value;
}
if (sudokuId == "sudoku1") {
if (cellContent == sudoku1[i][j]) {
pass = true;
// cell.style.background = "red";
} else pass = false;
}
if (sudokuId == "sudoku2") {
if (cellContent == sudoku2[i][j]) {
pass = true;
// cell.style.background = "aqua";
// cell.style.background = "red";
} else pass = false;
}
if (sudokuId == "sudoku3") {
if (cellContent == sudoku3[i][j]) {
pass = true;
// cell.style.background = "aqua";
// cell.style.background = "red";
} else pass = false;
}
pass2.push(pass);
}
}
if (pass2.includes(false)) {
failMsg = document.getElementById("fail-msg");
failMsg.style.display = "inline";
winMsg = document.getElementById("win-msg");
winMsg.style.display = "none";
} else {
winMsg = document.getElementById("win-msg");
winMsg.style.display = "inline";
failMsg = document.getElementById("fail-msg");
failMsg.style.display = "none";
}
};
function clearSudoku() {
let table = document.getElementById("table");
for (let i = 0; i < table.rows.length; i ) {
for (let j = 0; j < table.rows[i].cells.length; j ) {
if (sudoku[i][j] === null) {
table.rows[i].cells[j].innerHTML = '<input type="number" min="1" max="9" step="1" >';
}
}
}
}
const newGame = () => {
window.location.href = "sudoku.html";
};* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
max-width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background-image: linear-gradient(to top, #7e8dea 0%, #0c35c7 100%);
}
/* Userpage */
#userpage {
text-align: center;
border: 3px solid greenyellow;
width: 40%;
position: absolute;
}
.title {
font-size: 50px;
padding: 40px;
}
#name {
color: blue;
}
#login-btn {
font-size: 150%;
margin: 15px;
border: solid blue;
background-color: rgb(62, 114, 255);
color: white;
padding: 10px;
cursor: pointer;
}
#login-btn:hover {
font-weight: bold;
border-color: greenyellow;
}
#username {
font-size: 20px;
margin-bottom: 30px;
padding: 10px;
border: 3px solid greenyellow;
width: 500px;
position: relative;
}
#password {
font-size: 20px;
margin-bottom: 30px;
padding: 10px;
border: 3px solid greenyellow;
width: 500px;
position: relative;
}
#login-error-msg-holder {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
#login-error-msg {
display: none;
color: brown;
font-size: 20px;
padding-bottom: 10px;
}
/* Levels page */
.difficulty {
position: absolute;
border: 3px solid greenyellow;
text-align: center;
}
#difficultyLevel {
position: relative;
padding: 20px;
}
#buttonsDiv {
position: relative;
padding-bottom: 20px;
}
.buttons {
font-size: 150%;
margin: 15px;
border: solid blue;
background-color: rgb(62, 114, 255);
padding: 10px;
padding-left: 30px;
padding-right: 30px;
cursor: pointer;
}
.buttons:hover {
font-weight: bold;
border-color: greenyellow;
}
/*---------- sudoku page------------- */
#main-holder {
text-align: center;
position: absolute;
}
#sudoku-title {
font-size: 50px;
color: azure;
}
.inp {
min-width: 100%;
text-align: center;
min-height: 100%;
border: none;
background-color: azure;
font-size: 16px;
}
.inp:hover {
background: rgb(62, 114, 255);
}
table {
border: 4px solid;
border-collapse: collapse;
width: 400px;
height: 400px;
text-align: center;
background-color: #8df1b5;
}
td {
border: 1px solid black;
min-width: 41.5px;
}
td:nth-of-type(3) {
border-right: 3px solid black;
}
td:nth-of-type(6) {
border-right: 3px solid black;
}
tr:nth-of-type(3) {
border-bottom: 3px solid black;
}
tr:nth-of-type(6) {
border-bottom: 3px solid black;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
.sudoku-btn {
width: 80px;
font-size: 18px;
margin: 10px;
border: solid blue;
background-color: rgb(62, 114, 255);
color: white;
padding: 10px;
cursor: pointer;
}
#final-msg {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
#win-msg {
color: goldenrod;
font-size: 18px;
display: none;
}
#fail-msg {
color: darkred;
font-size: 18px;
display: none;
}<table id="table">
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
<tr >
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
<td >
<input type="number" min="1" max="9" step="1" />
</td>
</tr>
</table>
<input type="submit" id="btn-end" value="Finish" onclick="checkGame()" />
<input type="submit" id="btn-new" onclick="newGame()" value="New" />
<input type="submit" id="btn-return" onclick="clearSudoku()" value="Again" />