Skip to content

Commit 96a0ccd

Browse files
nibble-4bitsnibble-4bits
committed
Use CSS grid for layout
1 parent e7eabfe commit 96a0ccd

File tree

5 files changed

+113
-46
lines changed

5 files changed

+113
-46
lines changed

‎dist/index.html‎

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,46 +9,41 @@
99
</head>
1010

1111
<body>
12-
<div class="container mt-3">
13-
<div class="row mb-2">
14-
<div class="col text-center">
15-
<h1>Sudoku Solver</h1>
16-
</div>
12+
<div class="container">
13+
<div class="title-row">
14+
<h1>Sudoku Solver</h1>
15+
<hr>
1716
</div>
1817

19-
<div class="row">
20-
<div class="col d-flex justify-content-center">
21-
<table id="sudoku"></table>
22-
</div>
18+
<div class="board-row">
19+
<table id="sudoku"></table>
2320
</div>
2421

25-
<div class="row mt-3">
26-
<div class="col d-flex justify-content-center">
27-
<label for="sld-solve-speed" class="mr-3">Solving speed:</label>
28-
<input type="range" id="sld-solving-speed" min="0" max="3" value="2" list="ticks">
29-
<datalist id="ticks">
30-
<option>0</option>
31-
<option>1</option>
32-
<option>2</option>
33-
<option>3</option>
34-
</datalist>
35-
</div>
22+
<div class="slider-row">
23+
<label for="sld-solve-speed">Solving speed:</label>
24+
<input type="range" id="sld-solving-speed" min="0" max="3" value="2" list="ticks">
25+
<datalist id="ticks">
26+
<option>0</option>
27+
<option>1</option>
28+
<option>2</option>
29+
<option>3</option>
30+
</datalist>
3631
</div>
3732

38-
<div class="row mt-3">
39-
<div class="col d-flex justify-content-center">
40-
<button class="btn btn-info" id="btn-clear" type="button">Clear</button>
41-
<button class="btn btn-info" id="btn-solve" type="button">Solve</button>
42-
<button class="btn btn-info" id="btn-generate" type="button">Generate</button>
43-
</div>
33+
<div class="buttons-row">
34+
<button id="btn-clear" type="button">Clear</button>
35+
<button id="btn-solve" type="button">Solve</button>
36+
<button id="btn-generate" type="button">Generate</button>
4437
</div>
4538

46-
<div class="row mt-3">
47-
<div class="col d-flex justify-content-center">
48-
<h3 id="sudoku-status"></h3>
49-
</div>
39+
<div class="status-row">
40+
<h2 id="sudoku-status"></h2>
5041
</div>
5142
</div>
43+
44+
<footer>
45+
Made with &#10084;&#65039; by Luis De Anda (nibble-4bits)
46+
</footer>
5247
</body>
5348

5449
</html>

‎src/css/index.css‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
2-
html {
3-
height: 100%;
4-
}
5-
6-
body {
7-
font-family: "Lato", sans-serif;
1+
h1,
2+
h2,
3+
h3,
4+
h4,
5+
h5,
6+
h6 {
7+
margin: 0.33em 0;
88
}
99

1010
table {
@@ -16,8 +16,8 @@ td {
1616
font-size: 1.8em;
1717
text-align: center;
1818
border: 1px solid black;
19-
width: 50px;
20-
height: 50px;
19+
width: 45px;
20+
height: 45px;
2121
caret-color: black;
2222
}
2323

@@ -37,6 +37,20 @@ td.box-boundary-col {
3737
border-right: 3px solid black;
3838
}
3939

40+
.status-success {
41+
color: green;
42+
}
43+
44+
.status-failed {
45+
color: red;
46+
}
47+
4048
button {
49+
font-size: 16px;
4150
margin: 0 1em;
51+
border: none;
52+
border-radius: 0.25em;
53+
padding: 0.5em 0.8em;
54+
color: #ffffff;
55+
background-color: #196cca;
4256
}

‎src/css/layout.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
2+
3+
html {
4+
height: 100%;
5+
}
6+
7+
body {
8+
font-family: "Lato", sans-serif;
9+
background-color: #eef0f2;
10+
}
11+
12+
.container {
13+
display: grid;
14+
grid-template-areas:
15+
"title"
16+
"board"
17+
"slider"
18+
"buttons"
19+
"status";
20+
}
21+
22+
.title-row {
23+
grid-area: title;
24+
justify-self: center;
25+
}
26+
27+
.board-row {
28+
grid-area: board;
29+
justify-self: center;
30+
margin-top: 1em;
31+
}
32+
33+
.slider-row {
34+
grid-area: slider;
35+
justify-self: center;
36+
margin-top: 1em;
37+
}
38+
39+
.buttons-row {
40+
grid-area: buttons;
41+
justify-self: center;
42+
margin-top: 1em;
43+
}
44+
45+
.status-row {
46+
grid-area: status;
47+
justify-self: center;
48+
}
49+
50+
footer {
51+
position: absolute;
52+
left: 0;
53+
bottom: 0;
54+
width: 100%;
55+
background-color: #196cca;
56+
color: #eef0f2;
57+
padding: 0.5em 0;
58+
text-align: center;
59+
}

‎src/js/SudokuRenderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ class SudokuRenderer {
3131
let [row, col] = evt.target.id.match(/\d/g).map(num => parseInt(num));
3232
let input = parseInt(evt.key);
3333

34-
if (evt.target.textContent.length > 0 || !input) {
35-
if (evt.keyCode === 8) {
34+
if (evt.target.textContent.length > 0 || isNaN(input)) {
35+
if (evt.key === 'Backspace') {
3636
evt.target.classList.remove('given-num');
3737
evt.target.classList.add('discovered-num');
3838
this.sudoku.board[row][col] = 0;

‎src/js/index.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ import { SudokuRenderer } from './SudokuRenderer.js';
44
import { solvingSpeed } from './SudokuSolver.js';
55
import { SudokuGenerator } from './SudokuGenerator.js';
66

7-
// Import Bootstrap
8-
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
9-
// Import custom stylesheet
7+
// Import custom stylesheets
108
import '../css/index.css';
9+
import '../css/layout.css';
1110

1211
const sudokuTblElement = document.getElementById('sudoku');
1312
const sldSolvingSpeed = document.getElementById('sld-solving-speed');
@@ -53,12 +52,12 @@ btnSolve.addEventListener('click', async evt => {
5352
evt.target.disabled = true;
5453
if (await sudokuRenderer.renderSolve()) {
5554
if (!sudokuRenderer.solver.wasCanceled) {
56-
sudokuStatus.classList.add('text-success');
55+
sudokuStatus.classList.add('status-success');
5756
sudokuStatus.textContent = 'Solved!';
5857
}
5958
}
6059
else {
61-
sudokuStatus.classList.add('text-danger');
60+
sudokuStatus.classList.add('status-failed');
6261
sudokuStatus.textContent = 'Unsolvable!';
6362
}
6463
evt.target.disabled = false;

0 commit comments

Comments
 (0)