Using PrismJS and Font Awesome Libraries

   To show the use of the Prism library, I have a code snippet from the Sudoku Solver page I made. This snippet shows one row that has been added to the table. The result is displayed below that. The different classes (left, right, top, *bottom - not shown), are to create a bold border around each of the inner 3x3 grids. For example, the top left would be similar to this -> , though it is difficult to see in the example below.

					
						<table class="table true" id="table" cellpadding="0" cellspacing="0" border="0">
							<tr class="top">
								<td class="left"><input class="nums" type="tel" id="0,0" size="1" min="0" max="9" onkeypress="limitKeypress(event,this,1)">
								<td><input class="nums" type="tel" id="0,1" size="1" min="0" max="9" onkeypress="limitKeypress(event,this,1)">
								<td><input class="nums" type="tel" id="0,2" size="1" min="0" max="9" onkeypress="limitKeypress(event,this,1)">
								<td class="left"><input class="nums" type="tel" id="0,3" size="1" min="0" max="9" onkeypress="limitKeypress(event,this,1)">
								<td><input class="nums" type="tel" id="0,4" size="1" min="0" max="9" onkeypress="limitKeypress(event,this,1)">
								<td><input class="nums" type="tel" id="0,5" size="1" min="0" max="9" onkeypress="limitKeypress(event,this,1)">
								<td class="left"><input class="nums" type="tel" id="0,6" size="1" min="0" max="9" onkeypress="limitKeypress(event,this,1)">
								<td><input class="nums" type="tel" id="0,7" size="1" min="0" max="9" onkeypress="limitKeypress(event,this,1)">
								<td class="right"><input class="nums" type="tel" id="0,8" size="1" min="0" max="9" onkeypress="limitKeypress(event,this,1)">
							</tr>
						</table>
					
					

					
					

					
						
					
				

   To ensure that only numeric values 1-9 are entered and not duplicated, there is a JavaScript function (limitKeypress) being called. The code is not very elegant, but ensures that the value requirements are adhered to by the user. In the HTML code above, you can see that the type was set to "tel". This was needed to ensure that the keypress events were being followed on mobile. This was also useful because it would then only bring up the number pas on a mobile device instead of a full keyboard. To save line width, one could potentially simplify the else-if statement looking for the proper keypress to look for an int between 1 and 9 (inclusive).

					
						function limitKeypress(event, box, maxLength) {
							if (box.value != undefined && box.value.toString().length >= maxLength) { 
								event.preventDefault(); 
							}
							else if (event.key != 1 && event.key != 2 && event.key != 3 && event.key != 4 && event.key != 5 && event.key != 6 && event.key != 7 && event.key != 8 && event.key != 9 ) { 
								event.preventDefault(); 
							}
							else { 
								console.log(inputVerify(event.key, box.id.split(','))); 
								if (!(inputVerify(event.key, box.id.split(',')))) {
									event.preventDefault();
								}
							}
						}