Algorithm to generate sudoku

0 / 237
Sudoku generator

Overview

Sudoku (数独sūdoku, digit-single) (/sˈdk//-ˈdɒk-//sə-/, originally called Number Place)[1] is a logic-based,[2][3] combinatorial[4] number-placement puzzle. The objective is to fill a 9×9 grid with digits so that each column, each row, and each of the nine 3×3 subgrids that compose the grid (also called “boxes”, “blocks”, or “regions”) contain all of the digits from 1 to 9. The puzzle setter provides a partially completed grid, which for a well-posed puzzle has a single solution. (Source:- Sudoku)

 

 

golibrary.co - Sudoku

golibrary.co – Sudoku

 

 

Our task is to write a program to generate a 9×9 sudoku grid.

Below is the explanation for algorithm to generate sudoku and the logic behind.

 

 

Algorithm:

 

  • Initilialize the 9×9 sudoku 2D array (matrix) with all zeroes.
  • Have an outer loop which runs until the generated sudoku is solved by the solver algorithm (coming next).
  • Have a nested inner loop with index “i”  running for values between 1 to 9.
  • Pickup a random cell in the grid to place a number.
  • Check if the generated sudoku so far is valid (Read here) and the cell isn’t occupied already, if yes, assign the value of i to the cell. If not, check if other values of i generate a valid sudoku.
  • Check if sudoku is solvable. If yes, make a tentative assignment to the selected cell number with the value of i. If not, skip the assignment and backtrack.
  • Repeat the previous 3 steps until the algorithm is able to solve the complete sudoku and save this configuration in the matrix but don’t display yet.
  • Based on the difficulty level, select the number of cells which will be left blank in the sudoku configuration obtained in step 7 and show the generated board to the user as it’s solveable.

 

 

 

Sudoku solver algorithm:

 

  • Find empty location in the matrix, which can be assigned a value from 1 to 9.
  • Loop through values 1 to 9, having index i.
  • Assign the value of i to the empty location found in step 1, provided that the sudoku is valid.
  • Recursively, try solving sudoku again after step 3. If solving fails, reject the last cell assignment and reset is back to zero. If solving is successful return true.

 

 

Javascript code below for the above:

 

// algorithm to solve sudoku recursively
function solveSudoku() {
    var cell_no = findEmptyLocation(); //find an empty cell location

    if (cell_no == -1) //this means all the locations have been assigned values and sudoku is solved
    {
        return true;
    }

    for (var num = 1; num <= 9; num++) {
        if (chkValid(cell_no, num) == false) //if it looks promising and meets the sudoku row, column and box assignments, make a tentative assignment
        {
            board[cell_no] = num;

            // solve recursively from this position
            if (solveSudoku() == true) //this means sudoku solved successfully for this level only, so return true to previous call
                return true;
            else {
                board[cell_no] = 0; // solving failed, try again
            }
        }
    }

    return false; //puzzle solving failed, backtrack from this point
}


// this function finds the empty cell location on the board
function findEmptyLocation() {
    for (var index = 0; index < 81; index++) {
        if (board[index] == 0) //cell free
        {
            return index;
        }
        //else loop continues
    }

    return -1;
}

 

 

Algorithm to check if sudoku is valid:

This has also been explained on our discussion forum (http://forum.golibrary.co), steps below:

 

 

A sudoku is said to be valid if

  • If all boxes (3×3 grids) contain no duplicates and thus unique numbers between 1-9
  • All rows contain no duplicates and thus unique numbers between 1-9
  • All columns contain no duplicates and thus unique numbers between 1-9

 

Checking the same conditions below in the code:

 

var isValidSudoku = function(board) {
  for (let i = 0; i < 9; i++) {
    let row = new Set(), col = new Set(), sqr = new Set();
    for (let j = 0; j < 9; j++) {
      let rowc = board[i][j];
      let colc = board[j][i];
      let sqrc = board[Math.floor(i / 3) * 3 + Math.floor(j / 3)][(i % 3) * 3 + j % 3];
      if (row.has(rowc) || col.has(colc) || sqr.has(sqrc)) return false;
      if (rowc !== ".") row.add(rowc);
      if (colc !== ".") col.add(colc);
      if (sqrc !== ".") sqr.add(sqrc);
    }
  }
  return true;
};

 

Run this code to see the demo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Golibrary.co - Sudoku</title>
<script type="text/javascript">
function init(){box_indices[0]=new Array(0,1,2,9,10,11,18,19,20),box_indices[1]=new Array(3,4,5,12,13,14,21,22,23),box_indices[2]=new Array(6,7,8,15,16,17,24,25,26),box_indices[3]=new Array(27,28,29,36,37,38,45,46,47),box_indices[4]=new Array(30,31,32,39,40,41,48,49,50),box_indices[5]=new Array(33,34,35,42,43,44,51,52,53),box_indices[6]=new Array(54,55,56,63,64,65,72,73,74),box_indices[7]=new Array(57,58,59,66,67,68,75,76,77),box_indices[8]=new Array(60,61,62,69,70,71,78,79,80),row_indices[0]=new Array(0,1,2,3,4,5,6,7,8),row_indices[1]=new Array(9,10,11,12,13,14,15,16,17),row_indices[2]=new Array(18,19,20,21,22,23,24,25,26),row_indices[3]=new Array(27,28,29,30,31,32,33,34,35),row_indices[4]=new Array(36,37,38,39,40,41,42,43,44),row_indices[5]=new Array(45,46,47,48,49,50,51,52,53),row_indices[6]=new Array(54,55,56,57,58,59,60,61,62),row_indices[7]=new Array(63,64,65,66,67,68,69,70,71),row_indices[8]=new Array(72,73,74,75,76,77,78,79,80),col_indices[0]=new Array(0,9,18,27,36,45,54,63,72),col_indices[1]=new Array(1,10,19,28,37,46,55,64,73),col_indices[2]=new Array(2,11,20,29,38,47,56,65,74),col_indices[3]=new Array(3,12,21,30,39,48,57,66,75),col_indices[4]=new Array(4,13,22,31,40,49,58,67,76),col_indices[5]=new Array(5,14,23,32,41,50,59,68,77),col_indices[6]=new Array(6,15,24,33,42,51,60,69,78),col_indices[7]=new Array(7,16,25,34,43,52,61,70,79),col_indices[8]=new Array(8,17,26,35,44,53,62,71,80),resetPuzzleBoard(),gameStart=!1,document.onkeydown=kbdhandler,doclear();for(var e=1;3>=e;e++)document.getElementById("bradio"+e).checked=!1;isLevelSelected=!1,document.getElementById("bpause").value="Pause"}function pause(){isPaused^=1;var e=document.getElementById("bpause");1==gameStart&&1==isLevelSelected&&0==onceSolved&&(1==isPaused?(clearInterval(timerVal),e.value="Resume",locked=1):(e.value="Pause",timerVal=setInterval(showTime,1e3),locked=0))}function resetPuzzleBoard(){for(var e=0;81>e;e++)pboard[e]=0}function kbdhandler(e){if(0==locked){e||(e=window.event);var r=document.getElementById("c"+curr_cell),o=e.keyCode,t=curr_cell;switch(o){case LEFT:curr_cell%9>0?t--:t+=8;break;case UP:curr_cell+1>=1&&9>=curr_cell+1?t+=72:t-=9;break;case RIGHT:(curr_cell+1)%9==0?t-=8:t++;break;case DOWN:curr_cell+1>=72&&80>=curr_cell+1?t-=72:t+=9}if(set(t),48==o)reset();else if(o>=49&&57>=o&&1==gameStart){var l=chkValid(curr_cell,o-48);0==l?(""==r.value&&filled++,r.value=o-48,81==filled&&showScore(),board[curr_cell]=r.value<<4|init_digit_mask):animate()}}}function showScore(){var e=0,r=60*hours+minutes+Math.ceil(seconds/60);e=1e3*coins/r,document.getElementById("txt").value="",clearInterval(timerVal),alert("Bingo! you are such a genius, your score is : "+Math.ceil(e)+"\n You finished the game in time(hh:min:secs) "+hours+":"+minutes+":"+seconds),hours=minutes=seconds=0}function animate(){rowCell=document.getElementById("c"+rowId),colCell=document.getElementById("c"+colId),boxCell=document.getElementById("c"+boxId),value=setInterval(blink,500)}function blink(){toggle*=-1,locked=1,1==toggle?(rowCell&&(rowCell.style.backgroundColor="#ffff00"),colCell&&(colCell.style.backgroundColor="#ffff00"),boxCell&&(boxCell.style.backgroundColor="#ffff00")):(rowCell&&(rowCell.style.backgroundColor=prevColor),colCell&&(colCell.style.backgroundColor=prevColor),boxCell&&(boxCell.style.backgroundColor=prevColor)),counter++,4==counter&&(counter=0,clearInterval(value),locked=0)}function set(e){if(0==locked){var r=document.getElementById("c"+e),o=document.getElementById("c"+curr_cell);o.style.backgroundColor="#cc9999",r.style.backgroundColor="#afafaf",curr_cell=e}}function lock(){if(0==locked&&0==onceSolved){var e=document.getElementById("c"+curr_cell);0!=board[curr_cell]?(e.style.border="0px",e.style.height="100%",e.style.width="100%",e.style.textAlign="center",e.style.fontWeight="bold",e.style.color="green",e.style.fontSize=25,e.style.backgroundColor="#cc9999",board[curr_cell]=board[curr_cell]|lock_mask):e.focus()}}function setdigit(e){if(0==locked){var r=document.getElementById("c"+curr_cell),o=chkValid(curr_cell,e);1==gameStart?((board[curr_cell]&lock_mask)!=lock_mask&&0==o&&(board[curr_cell]=e<<4|init_digit_mask,""==r.value&&filled++,r.value=e,r.focus(),81==filled&&showScore()),1==o&&animate()):alert("Please select start before proceeding")}}function doclear(){curr_cell=0;var e=null;document.getElementById("bpause").value="Pause";for(var r=0;81>r;r++){board[r]=init_digit_mask;var o=document.getElementById("c"+r);o.value="",e=o.style.backgroundColor,o.style.backgroundColor="#cc9999",o.style.border="0px",o.style.height="100%",o.style.width="100%",o.style.backgroundColor="transparent",o.style.textAlign="center",o.style.fontWeight="bold",o.style.color="blue",o.style.fontSize=25}var t=document.getElementById("c"+curr_cell);t.focus(),t.style.backgroundColor="#afafaf",document.getElementById("txt").value="",clearInterval(timerVal),hours=minutes=seconds=0}function reset(){if(0==locked){var e=document.getElementById("c"+curr_cell);(board[curr_cell]&lock_mask)!=lock_mask&&(board[curr_cell]=0,e.value="",e.focus(),filled--)}}function rnd(){return seed=(9301*seed+49297)%233280,seed/233280}function randNum(e){return Math.floor(rnd()*e)}function toggleLevelSelectors(){gameStart===!0?(document.getElementById("bradio1").setAttribute("disabled","true"),document.getElementById("bradio2").setAttribute("disabled","true"),document.getElementById("bradio3").setAttribute("disabled","true")):(document.getElementById("bradio1").removeAttribute("disabled"),document.getElementById("bradio2").removeAttribute("disabled"),document.getElementById("bradio3").removeAttribute("disabled"))}function create(){var e=0,r=!0,o=!1;if(onceSolved=!1,isLevelSelected===!1)alert("Please select a level before starting");else{doclear(),resetPuzzleBoard(),gameStart=!0,toggleLevelSelectors();do{r=!0;for(var t=1;9>=t;t++){1==r&&(doclear(),r=!1),e=randNum(81);var l=t;if(0==chkValid(e,l)&&0==board[e]){board[e]=l,pboard[e]=l;document.getElementById("c"+e)}else t>0&&t--}if(o=solveSudoku(),0==o)alert("failed to solve puzzle at cell no "+e);else{rand_num_of_cells=initialGivens+randNum(remaining);for(var n=0;rand_num_of_cells>n;n++){var a=randNum(81),c=document.getElementById("c"+a);c.value;pboard[a]=board[a],c.style.border="0px",c.style.height="100%",c.style.width="100%",c.style.backgroundColor="transparent",c.style.textAlign="center",c.style.fontWeight="bold",c.style.color="green",c.style.fontSize=25}}}while(1!=o);for(var d=0;81>d;d++)tboard[d]=board[d];filled=0;for(var i=0;81>i;i++){if(0!=pboard[i]){var s=document.getElementById("c"+i);s.value=pboard[i],s.style.border="0px",s.style.height="100%",s.style.width="100%",s.style.backgroundColor="transparent",s.style.textAlign="center",s.style.fontWeight="bold",s.style.color="green",s.style.fontSize=25,filled++}board[i]=pboard[i]}showLabels(filled),timerVal=setInterval(showTime,1e3)}}function showLabels(e){var r=document.getElementById("lab1");r&&document.body.removeChild(r);var o=document.createElement("label");o.id="lab1",o.style.margin="100px;",o.style.padding="10px;",o.innerHTML="Givens : "+e,o.style.color="black",o.style.fontWeight="bold",o.style.fontSize=20,o.style.top=620,o.style.left=520;var t=document.createElement("label");coins=81-e,t.id="lab2",t.innerHTML="Empty : "+coins,t.style.color="black",t.style.fontWeight="bold",t.style.fontSize=20,t.style.top=620,t.style.left=650,document.body.appendChild(o),document.body.appendChild(t)}function chkValid(e,r){var o=usedInRow(e,r),t=usedInCol(e,r),l=usedInBox(e,r);return 0==o&&0==t&&0==l?!1:!0}function solveSudoku(){var e=findEmptyLocation();if(-1==e)return!0;for(var r=1;9>=r;r++)if(0==chkValid(e,r)){if(board[e]=r,1==solveSudoku())return!0;board[e]=0}return!1}function findEmptyLocation(){for(var e=0;81>e;e++)if(0==board[e])return e;return-1}function usedInRow(e,r){for(var o=Math.floor(e/9),t=0;9>t;t++){var l=board[row_indices[o][t]];if(l==r||l>>4==r)return rowId=row_indices[o][t],!0}return rowId=-1,!1}function usedInCol(e,r){for(var o=e-9*Math.floor(e/9),t=0;9>t;t++){var l=board[col_indices[o][t]];if(l==r||l>>4==r)return colId=col_indices[o][t],!0}return colId=-1,!1}function usedInBox(e,r){for(var o=Math.floor(e/27),t=Math.floor((e-9*Math.floor(e/9))/3),l=0;9>l;l++){var n=3*o+t,a=board[box_indices[n][l]];if(a==r||a>>4==r)return boxId=box_indices[n][l],!0}return boxId=-1,!1}function resetGame(){doclear(),gameStart=!1,toggleLevelSelectors()}function hint(){var e=0,r=["easy","medium","difficult"];if(gameStart===!0){for(var o=0,t=1;3>=t;t++)document.getElementById("bradio"+t).checked===!0&&(e=t);switch(r[e-1]){case"easy":o=randNum(22),showPartialsOnBoard(o);break;case"medium":o=randNum(19),showPartialsOnBoard(o);break;case"difficult":o=randNum(16),showPartialsOnBoard(o)}}else alert("Please start the game by hitting the create button first")}function showPartialsOnBoard(e){for(var r=0;e>r;r++){var o=randNum(e);""===document.getElementById("c"+o).value&&(document.getElementById("c"+o).value=tboard[o],tboard[o]=tboard[o]<<4|lock_mask,board[o]=tboard[o],document.getElementById("c"+o).style.backgroundColor="#FFA100")}}function solve(){var e=0;if(0==onceSolved&&gameStart===!0){for(e=0;81>e;e++)""===document.getElementById("c"+e).value&&(document.getElementById("c"+e).value=tboard[e],tboard[e]=tboard[e]<<4|lock_mask,board[e]=tboard[e]);onceSolved=!0,document.getElementById("txt").value="",clearInterval(timerVal),hours=minutes=seconds=0,gameStart=!1}}function showTime(){var e=document.getElementById("txt");59==seconds?(minutes++,59==minutes&&hours++,seconds=0):seconds++,seconds=seconds%10===seconds?"0"+seconds:seconds,0==hours?e.value=minutes+":"+seconds:e.value=hours+":"+minutes+":"+seconds}function level(e){var r=document.getElementById("bradio"+e);r.checked=!0;for(var o=1;3>=o;o++)o!=e&&(document.getElementById("bradio"+o).checked=!1);isLevelSelected=!0,1==e&&(initialGivens=45,remaining=10),2==e&&(initialGivens=30,remaining=10),3==e&&(initialGivens=15,remaining=15)}var board=new Array(81),tboard=new Array(81),pboard=new Array(81),box_indices=new Array(9),row_indices=new Array(9),col_indices=new Array(9),init_digit_mask=0,lock_mask=1,curr_cell=0,locked=0,onceSolved=!1,today=new Date,seed=today.getTime(),isComplete=!1,rand_num_of_cells=0,rowId=0,colId=0,boxId=0,counter=0,isPaused=0,prevColor="#cc9999",rowCell,colCell,boxCell,LEFT=37,RIGHT=39,UP=38,DOWN=40,toggle=-1,value=0,hours=0,minutes=0,seconds=0,timerVal=0,initialGivens=0,filled=0,isLevelSelected,gameStart,coins=0,remaining=0;window.onload=init;	
</script>
<style type="text/css">
.digit {border:0px; width:100%; height: 100%; background-color:transparent; text-align:center; font-weight:bold; color:blue; font-size:25}
.digitLock {border:0px; width:100%; height: 100%; background-color:transparent; text-align:center; font-weight:bold; color:green; font-size:25}
.bcontrol {font-weight:bold; font-size:15}
.bdigit {font-weight:bold; font-size:15}	
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
.conHeight {
height:250px;
}
}
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
</style>
</head>
<body>
<?php
?>
<h2 style = "top:150px; left:410px"> SuDoKu</h2>
<div style="border:3px solid red; height:100%;width:300px;padding:5px;"><br><br>
<b>Levels:&nbsp;</b>
<input type="radio" id="bradio1" onclick='level(1)'><b>Easy</b></input>
<input type="radio" id="bradio2" onclick='level(2)'><b>Medium</b></input>
<input type="radio" id="bradio3" onclick='level(3)'><b>Difficult</b></input><br><br><br>
<b>Timer:&nbsp;</b><input id="txt" readonly size="10" style="background:gray;line-height:30px;"></input>
</div>
<br><br><br>
<div id="con" class="conHeight" style="background-color:#eeeeee; width:50%; height:410px;">
<table border = "2" width = "100%" height = "100%" cellpadding = "0" cellspacing = "0">
<tr>
<td rowspan = "3" width = "100" align = "left" valign = "top" bgcolor = "#339933">
<table border = "1" height = "410" width = "100" cellpadding = "0" cellspacing = "0"><tr><td>
<h3>&nbsp Controls</h3> 
&nbsp &nbsp<input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="bcreate" value="Create" onclick="create()"><br><br>
&nbsp &nbsp<input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="bclear" value="Clear" onclick="resetGame()"><br><br>
&nbsp &nbsp<input type="button" style = "height: 25px; width: 75px" class="bcontrol" id="bpause" name="bpause" value="Pause" onclick="pause()"><br><br>
&nbsp &nbsp<input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="block" value="Lock" onclick="lock()"><br><br>
&nbsp &nbsp<input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="breset" value="Reset" onclick="reset()"><br><br>
&nbsp &nbsp<input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="bhint" value="Hint" onclick="hint();"><br><br>
&nbsp &nbsp<input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="bsolve" value="Solve" onclick="solve();"><br>
</table></tr></td>
</td>
<td rowspan = "3" width = "350" align = "center" valign = "top" bgcolor = "#cc9999">
<table border = "1" height = "410" width = "390" cellpadding = "0" cellspacing = "0">
<tr width = "100%" height = "33%">
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c0" value=" " size="1" readonly onclick="set(0)"></td>
<td><input class="digit" type="text" id="c1" value=" " size="1" readonly onclick="set(1)"></td>
<td><input class="digit" type="text" id="c2" value=" " size="1" readonly onclick="set(2)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c9" value=" " size="1" readonly onclick="set(9)"></td>
<td><input class="digit" type="text" id="c10" value=" " size="1" readonly onclick="set(10)"></td>
<td><input class="digit" type="text" id="c11" value=" " size="1" readonly onclick="set(11)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c18" value=" " size="1" readonly onclick="set(18)"></td>
<td><input class="digit" type="text" id="c19" value=" " size="1" readonly onclick="set(19)"></td>
<td><input class="digit" type="text" id="c20" value=" " size="1" readonly onclick="set(20)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c3" value=" " size="1" readonly onclick="set(3)"></td>
<td><input class="digit" type="text" id="c4" value=" " size="1" readonly onclick="set(4)"></td>
<td><input class="digit" type="text" id="c5" value=" " size="1" readonly onclick="set(5)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c12" value=" " size="1" readonly onclick="set(12)"></td>
<td><input class="digit" type="text" id="c13" value=" " size="1" readonly onclick="set(13)"></td>
<td><input class="digit" type="text" id="c14" value=" " size="1" readonly onclick="set(14)"></td>
</tr>	
<tr>
<td><input class="digit" type="text" id="c21" value=" " size="1" readonly onclick="set(21)"></td>
<td><input class="digit" type="text" id="c22" value=" " size="1" readonly onclick="set(22)"></td>
<td><input class="digit" type="text" id="c23" value=" " size="1" readonly onclick="set(23)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c6" value=" " size="1" readonly onclick="set(6)"></td>
<td><input class="digit" type="text" id="c7" value=" " size="1" readonly onclick="set(7)"></td>
<td><input class="digit" type="text" id="c8" value=" " size="1" readonly onclick="set(8)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c15" value=" " size="1" readonly onclick="set(15)"></td>
<td><input class="digit" type="text" id="c16" value=" " size="1" readonly onclick="set(16)"></td>
<td><input class="digit" type="text" id="c17" value=" " size="1" readonly onclick="set(17)"></td>
</tr>	
<tr>
<td><input class="digit" type="text" id="c24" value=" " size="1" readonly onclick="set(24)"></td>
<td><input class="digit" type="text" id="c25" value=" " size="1" readonly onclick="set(25)"></td>
<td><input class="digit" type="text" id="c26" value=" " size="1" readonly onclick="set(26)"></td>
</tr>
</table>
</td>
</tr>
<tr width = "100%" height = "33%">
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c27" value=" " size="1" readonly onclick="set(27)"></td>
<td><input class="digit" type="text" id="c28" value=" " size="1" readonly onclick="set(28)"></td>
<td><input class="digit" type="text" id="c29" value=" " size="1" readonly onclick="set(29)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c36" value=" " size="1" readonly onclick="set(36)"></td>
<td><input class="digit" type="text" id="c37" value=" " size="1" readonly onclick="set(37)"></td>
<td><input class="digit" type="text" id="c38" value=" " size="1" readonly onclick="set(38)"></td>
</tr>			
<tr>
<td><input class="digit" type="text" id="c45" value=" " size="1" readonly onclick="set(45)"></td>
<td><input class="digit" type="text" id="c46" value=" " size="1" readonly onclick="set(46)"></td>
<td><input class="digit" type="text" id="c47" value=" " size="1" readonly onclick="set(47)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c30" value=" " size="1" readonly onclick="set(30)"></td>
<td><input class="digit" type="text" id="c31" value=" " size="1" readonly onclick="set(31)"></td>
<td><input class="digit" type="text" id="c32" value=" " size="1" readonly onclick="set(32)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c39" value=" " size="1" readonly onclick="set(39)"></td>
<td><input class="digit" type="text" id="c40" value=" " size="1" readonly onclick="set(40)"></td>
<td><input class="digit" type="text" id="c41" value=" " size="1" readonly onclick="set(41)"></td>
</tr>			
<tr>
<td><input class="digit" type="text" id="c48" value=" " size="1" readonly onclick="set(48)"></td>
<td><input class="digit" type="text" id="c49" value=" " size="1" readonly onclick="set(49)"></td>
<td><input class="digit" type="text" id="c50" value=" " size="1" readonly onclick="set(50)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c33" value=" " size="1" readonly onclick="set(33)"></td>
<td><input class="digit" type="text" id="c34" value=" " size="1" readonly onclick="set(34)"></td>
<td><input class="digit" type="text" id="c35" value=" " size="1" readonly onclick="set(35)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c42" value=" " size="1" readonly onclick="set(42)"></td>
<td><input class="digit" type="text" id="c43" value=" " size="1" readonly onclick="set(43)"></td>
<td><input class="digit" type="text" id="c44" value=" " size="1" readonly onclick="set(44)"></td>
</tr>			
<tr>
<td><input class="digit" type="text" id="c51" value=" " size="1" readonly onclick="set(51)"></td>
<td><input class="digit" type="text" id="c52" value=" " size="1" readonly onclick="set(52)"></td>
<td><input class="digit" type="text" id="c53" value=" " size="1" readonly onclick="set(53)"></td>
</tr>
</table>
</td>
</tr>
<tr width = "100%" height = "33%">
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c54" value=" " size="1" readonly onclick="set(54)"></td>
<td><input class="digit" type="text" id="c55" value=" " size="1" readonly onclick="set(55)"></td>
<td><input class="digit" type="text" id="c56" value=" " size="1" readonly onclick="set(56)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c63" value=" " size="1" readonly onclick="set(63)"></td>
<td><input class="digit" type="text" id="c64" value=" " size="1" readonly onclick="set(64)"></td>
<td><input class="digit" type="text" id="c65" value=" " size="1" readonly onclick="set(65)"></td>
</tr>			
<tr>
<td><input class="digit" type="text" id="c72" value=" " size="1" readonly onclick="set(72)"></td>
<td><input class="digit" type="text" id="c73" value=" " size="1" readonly onclick="set(73)"></td>
<td><input class="digit" type="text" id="c74" value=" " size="1" readonly onclick="set(74)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c57" value=" " size="1" readonly onclick="set(57)"></td>
<td><input class="digit" type="text" id="c58" value=" " size="1" readonly onclick="set(58)"></td>
<td><input class="digit" type="text" id="c59" value=" " size="1" readonly onclick="set(59)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c66" value=" " size="1" readonly onclick="set(66)"></td>
<td><input class="digit" type="text" id="c67" value=" " size="1" readonly onclick="set(67)"></td>
<td><input class="digit" type="text" id="c68" value=" " size="1" readonly onclick="set(68)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c75" value=" " size="1" readonly onclick="set(75)"></td>
<td><input class="digit" type="text" id="c76" value=" " size="1" readonly onclick="set(76)"></td>
<td><input class="digit" type="text" id="c77" value=" " size="1" readonly onclick="set(77)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c60" value=" " size="1" readonly onclick="set(60)"></td>
<td><input class="digit" type="text" id="c61" value=" " size="1" readonly onclick="set(61)"></td>
<td><input class="digit" type="text" id="c62" value=" " size="1" readonly onclick="set(62)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c69" value=" " size="1" readonly onclick="set(69)"></td>
<td><input class="digit" type="text" id="c70" value=" " size="1" readonly onclick="set(70)"></td>
<td><input class="digit" type="text" id="c71" value=" " size="1" readonly onclick="set(71)"></td>
</tr>			
<tr>
<td><input class="digit" type="text" id="c78" value=" " size="1" readonly onclick="set(78)"></td>
<td><input class="digit" type="text" id="c79" value=" " size="1" readonly onclick="set(79)"></td>
<td><input class="digit" type="text" id="c80" value=" " size="1" readonly onclick="set(80)"></td>
</tr>
</table>
</td>
</tr>
</td></tr></table>
</td>
<td rowspan = "3" width = "100" align = "right" valign = "top" bgcolor = "#339933">
<table border = "1" height = "410" width = "100" cellpadding = "0" cellspacing = "0"><tr><td>			
<h3 align = "center">KeyPad</h3>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but1" value="1" onclick="setdigit(1)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but2" value="2" onclick="setdigit(2)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but3" value="3" onclick="setdigit(3)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but4" value="4" onclick="setdigit(4)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but5" value="5" onclick="setdigit(5)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but6" value="6" onclick="setdigit(6)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but7" value="7" onclick="setdigit(7)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but8" value="8" onclick="setdigit(8)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but9" value="9" onclick="setdigit(9)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but10" value="_" onclick="setdigit(null)"><br>
</td></tr></table>
</td>
</tr>
</table>
</div>
<br><br>
</body>
</html>

 

 

Subscribe to golibrary.co to read more interesting stuff. If you have any questions or comments, please let us know by commenting on the comment box below or sending us an email to mailto:info@golibrary.co

 

 

Comments

comments


An avid reader, responsible for generating creative content ideas for golibrary.co. His interests include algorithms and programming languages. Blogging is a hobby and passion.

Related Posts