How to make break the code game

أقسام الموقع: الإطار الزمني الرياضة معلومات سريعة العلوم الكون الصحة لغة وغيرها المنوعات الحيوانات باختصار

HOW TO MAKE BREAK THE CODE GAME USING HTML, JS, AND CSS

This code will be about creating a game called break the code.

If the user wants to add more boxes, he/she must add more elements as well, such as variables, values, if statements, and input boxes.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Break The Code</title>
</head>

<body>
<style>
#frame001 {
            padding: 11px;
            border-radius: 17px;
            background-color: rgb(245, 245, 245);
            border: 4px solid black;
        }

.buttons001 {
            background-color: blue;
            border: none;
            color: white;
            padding: 7px 17px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 2px 2px;
            border-radius: 9px;
            cursor: pointer;
            width: 178px;
        }

.buttons002 {
            background-color: yellow;
            border: 2px solid black;
            color: black;
            font-size: 14px;
            padding: 6px;
            text-align: center;
            display: inline-block;
            margin: 2px;
            border-radius: 4px;
            cursor: context-menu;
        }

.buttons003 {
            background-color: white;
            border: 2px solid black;
            color: black;
            font-size: 14px;
            padding: 6px;
            text-align: center;
            display: inline-block;
            margin: 2px;
            border-radius: 4px;
            cursor: context-menu;
            width: 16px;
            height: 16px;
        }

#font003 {
            color: black;
            font-size: large;
            cursor: context-menu;
        }

        #align001 {
            text-align: center;
        }
</style>
<div id="frame001">
        <div id="font003">
            <div id="align001">
<div id="disappear001">
<p>Click BEGIN to start the game</p>
<button class="buttons001" onclick="begin001()">BEGIN</button></div>

<p id="numberedBoxes"></p>
<p id="yourInput"></p>
<p id="submitButton"></p>
</div>
</div>
</div>

<script>
// C o d i n g   I s     N i c e 12 letters > 12 boxes
// 3 15 4 9 14 7   9 19     14 9 3 5

var numbers1 = ["<button class=buttons002>03</button><button class=buttons002>15</button><button class=buttons002>04</button><button class=buttons002>09</button><button class=buttons002>14</button><button class=buttons002>07</button>&#160&#160&#160<button class=buttons002>09</button><button class=buttons002>19</button>&#160&#160&#160<button class=buttons002>14</button><button class=buttons002>09</button><button class=buttons002>03</button><button class=buttons002>05</button>"];
var playerInput = ["<input class=buttons003 type=text id=box001 maxlength=1 /><input class=buttons003 type=text id=box002 maxlength=1 /><input class=buttons003 type=text id=box003 maxlength=1 /><input class=buttons003 type=text id=box004 maxlength=1 /><input class=buttons003 type=text id=box005 maxlength=1 /><input class=buttons003 type=text id=box006 maxlength=1 />&#160&#160&#160<input class=buttons003 type=text id=box007 maxlength=1 /><input class=buttons003 type=text id=box008 maxlength=1 />&#160&#160<input class=buttons003 type=text id=box009 maxlength=1 /><input class=buttons003 type=text id=box010 maxlength=1 /><input class=buttons003 type=text id=box011 maxlength=1 /><input class=buttons003 type=text id=box012 maxlength=1 />"];
var letters1 = ["c", "o", "d", "i","n", "g", "i", "s","n", "i", "c", "e"];

function begin001() {
document.getElementById("disappear001").innerHTML = "";
document.getElementById("numberedBoxes").innerHTML = numbers1;
document.getElementById("yourInput").innerHTML = playerInput;
document.getElementById("submitButton").innerHTML = "<button class=buttons001 onclick=submit001()>SUBMIT</button>";
}

function submit001() {
a01 = box001.value; a02 = box002.value; a03 = box003.value; a04 = box004.value;
a05 = box005.value; a06 = box006.value; a07 = box007.value; a08 = box008.value;
a09 = box009.value; a10 = box010.value; a11 = box011.value; a12 = box012.value;

// The below variables are points for each correct letter
var n01; var n02; var n03; var n04; var n05; var n06;
var n07; var n08; var n09; var n10; var n11; var n12;

if (a01 == letters1[0]) {
n01 = 1;
} else {
box001.value = "";
}

if (a02 == letters1[1]) {
n02 = 1;
} else {
box002.value = "";
}

if (a03 == letters1[2]) {
n03 = 1;
} else {
box003.value = "";
}

if (a04 == letters1[3]) {
n04 = 1;
} else {
box004.value = "";
}

if (a05 == letters1[4]) {
n05 = 1;
} else {
box005.value = "";
}

if (a06 == letters1[5]) {
n06 = 1;
} else {
box006.value = "";
}

if (a07 == letters1[6]) {
n07 = 1;
} else {
box007.value = "";
}

if (a08 == letters1[7]) {
n08 = 1;
} else {
box008.value = "";
}

if (a09 == letters1[8]) {
n09 = 1;
} else {
box009.value = "";
}

if (a10 == letters1[9]) {
n10 = 1;
} else {
box010.value = "";
}

if (a11 == letters1[10]) {
n11 = 1;
} else {
box011.value = "";
}

if (a12 == letters1[11]) {
n12 = 1;
} else {
box012.value = "";
}

if (n01 == 1 && n02 == 1 && n03 == 1 && n04 == 1 && n05 == 1 && n06 == 1 && n07 == 1 && n08 == 1 && n09 == 1 && n10 == 1 && n11 == 1 && n12 == 1) {
document.getElementById("submitButton").innerHTML = "Congratulations.";
} else {
document.getElementById("submitButton").innerHTML = "Sorry. Try again." + "<br />" + "<br />" + "<button class=buttons001 onclick=submit001()>SUBMIT</button>";
}
}
</script>
</body>
</html>

Here is a video of the above code.

Other Topics:

Crosswords- General Area
Human Body Facts
Binary Digits