Sudoku with React

Developer
Ye Tsung Ming
Size
5,749 Kb
Views
38,456
  1. Sudoku with React Previews
  2. Sudoku with React HTML Codes
  3. Sudoku with React CSS Codes
  4. Sudoku with React JS Codes

How do I make an sudoku with react?

Try to solve sudoku with React display. Support highlight.. What is a sudoku with react? How do you make a sudoku with react? This script and codes were developed by Ye Tsung Ming on 11 July 2022, Monday.

Sudoku with React Previews
IQ Test

Sudoku with React - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>sudoku with React</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div></div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='http://fb.me/react-with-addons-0.13.3.js'></script>
<script src='http://jashkenas.github.io/underscore/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sudoku with React - Script Codes CSS Codes

div, input { padding: 0; border: black solid 1px; font-size: 20px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
}
.sudoku { width: 204px; height: 204px;
}
.box { width: 66px; height: 66px;
}
.box .cell { width: 20px; height: 20px;
}
button { margin: 10px 5px;
}
.invalid { color: red;
}
.valid { color: green;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;
}
input[type=number] { -moz-appearance: textfield;
}

Sudoku with React - Script Codes JS Codes

(function() { var boxmap, cell, problem1, problem2, problem3, sudoku, indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; boxmap = [0, 1, 2, 9, 10, 11, 18, 19, 20, 3, 4, 5, 12, 13, 14, 21, 22, 23, 6, 7, 8, 15, 16, 17, 24, 25, 26, 27, 28, 29, 36, 37, 38, 45, 46, 47, 30, 31, 32, 39, 40, 41, 48, 49, 50, 33, 34, 35, 42, 43, 44, 51, 52, 53, 54, 55, 56, 63, 64, 65, 72, 73, 74, 57, 58, 59, 66, 67, 68, 75, 76, 77, 60, 61, 62, 69, 70, 71, 78, 79, 80]; problem1 = ['', '', 4, '', '', 5, 7, '', 9, '', 8, 7, '', 6, '', '', 3, 5, 2, '', '', 7, '', '', 1, '', '', 4, '', '', 8, '', 6, 5, 7, 1, '', 7, '', '', 1, '', '', 9, '', '', '', 6, '', '', 7, '', '', 4, '', '', 8, '', 7, 3, '', '', 2, '', 3, '', '', 5, 8, '', 1, 7, 7, '', '', 6, '', '', 8, '', 3]; problem2 = ['', 9, 7, 4, '', '', '', '', '', 4, '', '', '', '', 7, '', 3, '', 3, '', '', '', '', '', '', '', '', 8, '', '', 5, '', 9, '', 1, '', '', '', '', '', '', '', '', '', '', '', 7, '', 1, '', 6, '', '', 8, '', '', 2, '', '', '', '', '', 6, '', 1, '', 6, '', '', '', '', 2, '', '', '', '', '', 5, 3, 8, '']; problem3 = [6, '', '', 5, '', '', 3, '', 1, '', 9, '', '', '', '', '', '', '', '', '', 7, '', '', 8, 9, '', 4, 8, '', '', '', '', 1, 5, '', '', '', '', '', '', '', '', '', '', '', '', '', 4, 9, '', '', '', '', 2, 3, '', 5, 1, '', '', 6, '', '', '', '', '', '', '', '', '', 1, '', 2, '', 1, '', '', 4, '', '', 7]; cell = React.createFactory(React.createClass({ displayName: 'cell', render: function() { return React.DOM.input({ type: 'number', className: 'cell', value: this.props.value, placeholder: this.props["default"], onChange: this.props.onChange, min: 1, max: 9 }); } })); sudoku = React.createClass({ displayName: 'sudoku', getInitialState: function() { this.hold = _.clone(this.props.values); return _.clone(this.props); }, hold: null, cellValidator: function(i, j, e) { var col, flag, obj, row, v, x; v = e.target.valueAsNumber; if (isNaN(v)) { v = ''; $(e.target).removeClass('valid invalid'); } else { row = Math.floor(i / 3) * 3 + Math.floor(j / 3); col = i % 3 * 3 + j % 3; flag = (indexOf.call(this.state.values.slice(row * 9, +(row * 9 + 8) + 1 || 9e9), v) < 0) && (indexOf.call((function() { var k, len, ref, results; ref = this.state.values.slice(col, 81); results = []; for (k = 0, len = ref.length; k < len; k += 9) { x = ref[k]; results.push(x); } return results; }).call(this), v) < 0) && (indexOf.call((function() { var k, len, ref, results; ref = boxmap.slice(i * 9, +(i * 9 + 8) + 1 || 9e9); results = []; for (k = 0, len = ref.length; k < len; k++) { x = ref[k]; results.push(this.state.values[x]); } return results; }).call(this), v) < 0) && ((0 < v && v < 10)); $(e.target).toggleClass('valid', flag).toggleClass('invalid', !flag); } return this.setState({ values: React.addons.update(this.state.values, ( obj = {}, obj["" + boxmap[i * 9 + j]] = { $set: v }, obj )) }); }, getbox: function(index) { var i, k, len, ref, results; ref = boxmap.slice(index * 9, +(index * 9 + 8) + 1 || 9e9); results = []; for (k = 0, len = ref.length; k < len; k++) { i = ref[k]; results.push(this.hold[i]); } return results; }, render: function() { var i, j; return React.DOM.div({ className: 'sudoku' }, (function() { var k, results; results = []; for (i = k = 0; k <= 8; i = ++k) { results.push(React.DOM.div({ className: 'box', key: i }, (function() { var l, results1; results1 = []; for (j = l = 0; l <= 8; j = ++l) { results1.push(cell({ key: '' + i + j, value: this.state.values[boxmap[i * 9 + j]], "default": this.props.values[boxmap[i * 9 + j]], onChange: this.cellValidator.bind(this, i, j) })); } return results1; }).call(this))); } return results; }).call(this), React.DOM.button({ onClick: this.go }, 'answer'), React.DOM.button({ onClick: (function(_this) { return function() { return _this.setState(_this.props); }; })(this) }, 'reset')); }, go: function(e) { e.target.disabled = true; this.hold = _.clone(this.state.values); this.brute(this.next(0)); this.setState({ values: this.hold }); e.target.disabled = false; }, brute: function(pos) { var k, len, nominee, nominees, origin; if (pos > 80) { return null; } origin = _.clone(this.hold); nominees = this.available(pos); for (k = 0, len = nominees.length; k < len; k++) { nominee = nominees[k]; if (this.hasslot()) { this.hold = origin; this.hold[pos] = nominee; this.brute(this.next(pos + 1)); } else { return; } } }, next: function(pos) { if (this.hold[pos] === '' || pos > 80) { return pos; } else { return this.next(pos + 1); } }, available: function(pos) { var box, col, i, row, x, y; x = pos % 9; y = Math.floor(pos / 9); row = (function() { var k, ref, ref1, results; results = []; for (i = k = ref = y * 9, ref1 = y * 9 + 8; ref <= ref1 ? k <= ref1 : k >= ref1; i = ref <= ref1 ? ++k : --k) { results.push(this.hold[i]); } return results; }).call(this); col = (function() { var k, ref, results; results = []; for (i = k = ref = x; k <= 80; i = k += 9) { results.push(this.hold[i]); } return results; }).call(this); box = this.getbox(Math.floor(x / 3) + Math.floor(y / 3) * 3); return _.difference([1, 2, 3, 4, 5, 6, 7, 8, 9], _.union(row, col, box)); }, hasslot: function() { return indexOf.call(this.hold, '') >= 0; } }); window.sudoku = React.render(React.createElement(sudoku, { values: problem3 }), document.body.children[0]); window.React = React;
}).call(this);
Sudoku with React - Script Codes
Sudoku with React - Script Codes
Home Page Home
Developer Ye Tsung Ming
Username bendwarn
Uploaded July 11, 2022
Rating 3
Size 5,749 Kb
Views 38,456
Do you need developer help for Sudoku with React?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ye Tsung Ming (bendwarn) Script Codes
Name
Sudoku with AngularJS
Romaji to Japanese converter
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!