sudoku_2

Pure JS - SUDOKU

by slawe

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Sudoku</title>
	</head>
	<body onload="init();">
		<div id="overlay"></div>
		<div class="container">
			<div class="row" style="margin-top:10px;">
				<div class="col-sm-8">
					<div class="row">
						<div class="col-md-12 text-center">
						<form name="controls">
						<input id="easy" type="radio" name="level" checked="true" value="0"><label for="easy">Easy</label>
						<input id="medium" type="radio" name="level" value="1"><label for="medium">Medium</label>
						<input id="hard" type="radio" name="level" value="2"><label for="hard">Hard</label>
						</form>
						</div>
					</div>
					<div class="row bottom-spacer-5">
						<div class="col-md-12 text-center">
						<input id="new" class="btn btn-default" type="button" value="New Game" onclick="newGame();">
						<input class="btn btn-default" type="button" value="Solve It" onclick="solve();">
						</div>
					</div>
					<div class="row bottom-spacer-5">
						<div class="col-md-12">
						<div class="board center-block">
						<table>
							<tr>
								<td><div id="x0_0"></div></td>
								<td><div id="x0_1"></div></td>
								<td><div id="x0_2"></div></td>
								<td><div id="x0_3"></div></td>
								<td><div id="x0_4"></div></td>
								<td><div id="x0_5"></div></td>
								<td><div id="x0_6"></div></td>
								<td><div id="x0_7"></div></td>
								<td><div id="x0_8"></div></td>
							</tr>
							<tr>
								<td><div id="x1_0"></div></td>
								<td><div id="x1_1"></div></td>
								<td><div id="x1_2"></div></td>
								<td><div id="x1_3"></div></td>
								<td><div id="x1_4"></div></td>
								<td><div id="x1_5"></div></td>
								<td><div id="x1_6"></div></td>
								<td><div...

CSS

.board {
	width: 100%;
	max-width:450px;
	halign: center;
}

table {
	border: 1px black solid;
	border-collapse: collapse;
	width:100%;
}

td {
	border: 1px black solid;
	width: 11.11%;
	padding-bottom: 11.11%;
	overflow: hidden;
	text-align: center;
}

td div {
	position:absolute;
	width:11.11%;
	height:11.11%;
	max-width:50px;
	text-align:center;
	font-size:8vw;
	cursor:default;
	background-color: rgba(255,255,255,0);
}

.keypad .btn {
	min-width:40px;
}

.bottom-spacer-5 {
	margin-bottom: 5px;
}

    @media (min-width: 450px) {
	    td div{
		    font-size: 35px;
	    }
    }

    tr:nth-child(1) td {
	    border-top: 3px black solid;
    }

    tr:nth-child(3n) td {
	    border-bottom: 3px black solid;
    }

    td:nth-child(1) {
	    border-left: 3px black solid;
    }

    td:nth-child(3n) {
	    border-right: 3px black solid;
    }

    td:hover
	    {
		    background-color:#eeeeee;
	    }

	    td.error
	    {
		    color:#ff0000;
	    }

	    td.hint
	    {
		    background-color:#dddddd;
	    }

	    td.selected
	    {
		    background-color:#99ffff;
	    }


	#overlay
	{
		visibility: hidden;
		position: fixed;
		left: 0px;
		top: 0px;
		width:100%;
		height:100%;
		background:rgba(0, 0, 0, 0.5) url("spinner.gif") center center no-repeat;
		z-index: 1000;
	}

JavaScript

/*
* Sudoku Generator
* v0.2
*
* Copyright (c) 2018, Slavenko Bozic
* All rights reserved.
* 
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met: 
* 
*     * Redistributions of source code must retain the above copyright notice,
*       this list of conditions and the following disclaimer.
*     * Redistributions in binary form must reproduce the above copyright
*       notice, this list of conditions and the following disclaimer in the
*       documentation and/or other materials provided with the distribution.
*     * Neither the name of Fourth Woods Media nor the names of its
*       contributors may be used to endorse or promote products derived from
*       this software without specific prior written permission.
* 
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
* FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
* SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
* CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
* OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* This is a sudoku puzzle generator and solver. This program provides two
* generation algorithms, a solver and methods to update and check the state of
* the puzzle. This program does not provide any user interface controls.
*
* To create a new puzzle just instantiate the Sudoku object:
*
* var thePuzzle = new Sudoku();
*
* The puzzle is represented as a 9x9 matrix of numbers 0-9. A cell...