drew
/
tiramisu-one
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update first post and css

This commit is contained in:
Drew Galbraith 2023-05-03 23:36:43 -07:00
parent 25a8a078bb
commit a347fee0de
3 changed files with 138 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
blog/2023/04/2023-04-10-sudoku.md
View File

@ -40,7 +40,7 @@ puzzle with nothing in it.
}
```
![border](images/sudoku-1.png)
![A box with nothing in it.](images/sudoku-1.png){.center-img}
I'm not joking when I say I'm going to have to do baby steps here.
@ -54,7 +54,7 @@ Let's focus on the 9 main boxes in the grid now before worrying about the cells.
210 pixels tall and wide. And slap a big ole border on there. Let's make it 2px because we will
want a narrower one for the cells.
```
```css
.puzzle {
width: 630px;
height: 630px;
@ -67,13 +67,13 @@ want a narrower one for the cells.
}
```
![boxes](images/sudoku-2.png)
![](images/sudoku-2.png){.center-img}
Reload that and... right div's auto linebreak after them.
I think we can "float: left" these bad boys and...
![boxes2](images/sudoku-3.png)
![](images/sudoku-3.png){.center-img}
Right, now I'm pretty sure the boxes are 210 + 4 pixels wide because the border isn't included.
While I'm tempted to just math my way out of this I recall that you can specify the border-box
@ -82,7 +82,7 @@ sizing to avoid this.
Now this works! Now the astute of you may have noticed that there were 10 not 9 boxes in the
screenshot with the 2 columns. That became even more obvious in the full grid.
![boxes3](images/sudoku-4.png)
![Off by one errors...](images/sudoku-4.png){.center-img}
Ok now we can just recreate all of this with the cells and should be good to go right?
@ -93,7 +93,7 @@ just use flexbox).
Finally this works!
![grid](images/sudoku-5.png)
![We have a grid!](images/sudoku-5.png){.center-img}
## Displaying a puzzle
@ -102,7 +102,7 @@ flexboxes because
[this](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div/13515693)
StackOverflow answer convinced me.
```
```css
.cell {
...
@ -114,7 +114,7 @@ StackOverflow answer convinced me.
}
```
![cell number](images/sudoku-6.png)
![](images/sudoku-6.png){.center-img}
### Taking the puzzle from the URL
@ -126,7 +126,7 @@ I'll can just get all of the cells by class name and iterate over them in the sa
puzzle string and it will display relatively easily.
```
```js
window.onload = (event) => {
var params = new URLSearchParams(window.location.search);
var puzzle = params.get("p");
@ -153,7 +153,7 @@ window.onload = (event) => {
And hooray it works super well!
![bad puzzles](images/sudoku-7.png)
![This isn't quite right.](images/sudoku-7.png){.center-img}
Oh wait... I didn't think about the fact that the elements in the HTMLCollection from the
document.getElementsByClassName call wouldn't be in the row order of the puzzle (all of the cells
@ -166,7 +166,7 @@ those manually. I'm sure there is a better way but hey this works.
Then with a quick update to the code.
```
```js
for (i = 0; i < 81; i++) {
if (puzzle[i] != '.') {
document.getElementById(i+1).innerText = puzzle[i]
@ -176,7 +176,7 @@ for (i = 0; i < 81; i++) {
It works!
![good puzzle](images/sudoku-8.png)
![We have a puzzle!](images/sudoku-8.png){.center-img}
Still some goofiness like the border on the outside being thinner than the interiors but I'm pretty
happy with this for now.
@ -187,7 +187,7 @@ Now to really visualize the solver's state, we'll also need to see which pencil
These could be styled nicely but for now I just went with a span inside the cell div with the
following style.
```
```css
.cell > span {
font-size: 10px;
font-weight: normal;
@ -202,7 +202,7 @@ string and let the browser break them up into multiple lines for us.
This comes out quite nicely:
![pencil marks](images/sudoku-9.png)
![](images/sudoku-9.png){.center-img}
### Reading the pencil marks from the url
@ -212,7 +212,7 @@ For this url trick we will add the pencil marks using a comma separated array li
Using the string above we can use the following javascript code to parse and insert them:
```
```js
var marks_param = params.get("m");
if (marks_param === null) {
return;
@ -238,4 +238,4 @@ Using the string above we can use the following javascript code to parse and ins
Which also comes out nicely:
![full puzzle](images/sudoku-10.png)
![](images/sudoku-10.png){.center-img}

208
public/blog/2023/04/sudoku.html
View File

@ -7,7 +7,8 @@
</head>
<body>
<div class="container">
<h1>Writing a Sudoku Solver: Displaying the Grid</h1>
<h1 class="page-title">Writing a Sudoku Solver: Displaying the
Grid</h1>
<div class="date">Published 2023-04-10</div>
<p>I previously dabbled with writing a <a
href="https://gitlab.com/dgalbraith33/sudoku-solver">sudoku
@ -44,8 +45,10 @@
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a> <span class="kw">border</span>: <span class="dv">1</span><span class="dt">px</span> <span class="dv">solid</span> <span class="cn">black</span><span class="op">;</span></span>
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<figure>
<img src="images/sudoku-1.png" alt="border" />
<figcaption aria-hidden="true">border</figcaption>
<img src="images/sudoku-1.png" class="center-img"
alt="A box with nothing in it." />
<figcaption aria-hidden="true">A box with nothing in
it.</figcaption>
</figure>
<p>I’m not joking when I say I’m going to have to do baby steps
here.</p>
@ -60,26 +63,21 @@
about the cells. I’ll make each box 210 pixels tall and wide. And
slap a big ole border on there. Let’s make it 2px because we will
want a narrower one for the cells.</p>
<pre><code>.puzzle {
width: 630px;
height: 630px;
}
.box {
border: 2px solid black;
width: 210px;
height: 210px;
}</code></pre>
<figure>
<img src="images/sudoku-2.png" alt="boxes" />
<figcaption aria-hidden="true">boxes</figcaption>
</figure>
<div class="sourceCode" id="cb3"><pre
class="sourceCode css"><code class="sourceCode css"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="fu">.puzzle</span> {</span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">width</span>: <span class="dv">630</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">height</span>: <span class="dv">630</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a>}</span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a><span class="fu">.box</span> {</span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a> <span class="kw">border</span>: <span class="dv">2</span><span class="dt">px</span> <span class="dv">solid</span> <span class="cn">black</span><span class="op">;</span></span>
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a> <span class="kw">width</span>: <span class="dv">210</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a> <span class="kw">height</span>: <span class="dv">210</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p><img src="images/sudoku-2.png" class="center-img" /></p>
<p>Reload that and… right div’s auto linebreak after them.</p>
<p>I think we can “float: left” these bad boys and…</p>
<figure>
<img src="images/sudoku-3.png" alt="boxes2" />
<figcaption aria-hidden="true">boxes2</figcaption>
</figure>
<p><img src="images/sudoku-3.png" class="center-img" /></p>
<p>Right, now I’m pretty sure the boxes are 210 + 4 pixels wide
because the border isn’t included. While I’m tempted to just math my
way out of this I recall that you can specify the border-box sizing
@ -88,8 +86,9 @@
were 10 not 9 boxes in the screenshot with the 2 columns. That
became even more obvious in the full grid.</p>
<figure>
<img src="images/sudoku-4.png" alt="boxes3" />
<figcaption aria-hidden="true">boxes3</figcaption>
<img src="images/sudoku-4.png" class="center-img"
alt="Off by one errors…" />
<figcaption aria-hidden="true">Off by one errors…</figcaption>
</figure>
<p>Ok now we can just recreate all of this with the cells and should
be good to go right?</p>
@ -100,27 +99,26 @@
800px wide container. (Again just use flexbox).</p>
<p>Finally this works!</p>
<figure>
<img src="images/sudoku-5.png" alt="grid" />
<figcaption aria-hidden="true">grid</figcaption>
<img src="images/sudoku-5.png" class="center-img"
alt="We have a grid!" />
<figcaption aria-hidden="true">We have a grid!</figcaption>
</figure>
<h2 id="displaying-a-puzzle">Displaying a puzzle</h2>
<p>Next up is to actually get some numbers in this bad boy. Now this
is where I relent and use flexboxes because <a
href="https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div/13515693">this</a>
StackOverflow answer convinced me.</p>
<pre><code>.cell {
...
font-size: 40px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}</code></pre>
<figure>
<img src="images/sudoku-6.png" alt="cell number" />
<figcaption aria-hidden="true">cell number</figcaption>
</figure>
<div class="sourceCode" id="cb4"><pre
class="sourceCode css"><code class="sourceCode css"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="fu">.cell</span> {</span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">...</span></span>
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">40</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a> <span class="kw">font-weight</span>: <span class="dv">bold</span><span class="op">;</span></span>
<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a> <span class="kw">display</span>: <span class="dv">flex</span><span class="op">;</span></span>
<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a> <span class="kw">align-items</span>: <span class="dv">center</span><span class="op">;</span></span>
<span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a> <span class="kw">justify-content</span>: <span class="dv">center</span><span class="op">;</span></span>
<span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p><img src="images/sudoku-6.png" class="center-img" /></p>
<h3 id="taking-the-puzzle-from-the-url">Taking the puzzle from the
URL</h3>
<p>Now to make it so I can get the page to display any puzzle I want
@ -130,32 +128,34 @@
<p>I’ll can just get all of the cells by class name and iterate over
them in the same order as the puzzle string and it will display
relatively easily.</p>
<pre><code>window.onload = (event) =&gt; {
var params = new URLSearchParams(window.location.search);
var puzzle = params.get(&quot;p&quot;);
if (puzzle === null) {
return;
}
if (puzzle.length != 81) {
console.log(&quot;Failure: puzzle url len is &quot; + puzzle.length);
return;
}
var cells = document.getElementsByClassName(&quot;cell&quot;);
if (cells.length != 81) {
console.log(&quot;Failure: wrong number of cells: &quot; + cells.length);
return;
}
for (i = 0; i &lt; 81; i++) {
if (puzzle[i] != &#39;.&#39;) {
cells[i].innerText = puzzle[i]
}
}
}</code></pre>
<div class="sourceCode" id="cb5"><pre
class="sourceCode js"><code class="sourceCode javascript"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="bu">window</span><span class="op">.</span><span class="at">onload</span> <span class="op">=</span> (<span class="bu">event</span>) <span class="kw">=&gt;</span> {</span>
<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> params <span class="op">=</span> <span class="kw">new</span> <span class="fu">URLSearchParams</span>(<span class="bu">window</span><span class="op">.</span><span class="at">location</span><span class="op">.</span><span class="at">search</span>)<span class="op">;</span></span>
<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> puzzle <span class="op">=</span> params<span class="op">.</span><span class="fu">get</span>(<span class="st">&quot;p&quot;</span>)<span class="op">;</span></span>
<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (puzzle <span class="op">===</span> <span class="kw">null</span>) {</span>
<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
<span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (puzzle<span class="op">.</span><span class="at">length</span> <span class="op">!=</span> <span class="dv">81</span>) {</span>
<span id="cb5-8"><a href="#cb5-8" aria-hidden="true" tabindex="-1"></a> <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&quot;Failure: puzzle url len is &quot;</span> <span class="op">+</span> puzzle<span class="op">.</span><span class="at">length</span>)<span class="op">;</span></span>
<span id="cb5-9"><a href="#cb5-9" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
<span id="cb5-10"><a href="#cb5-10" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb5-11"><a href="#cb5-11" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> cells <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementsByClassName</span>(<span class="st">&quot;cell&quot;</span>)<span class="op">;</span></span>
<span id="cb5-12"><a href="#cb5-12" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (cells<span class="op">.</span><span class="at">length</span> <span class="op">!=</span> <span class="dv">81</span>) {</span>
<span id="cb5-13"><a href="#cb5-13" aria-hidden="true" tabindex="-1"></a> <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&quot;Failure: wrong number of cells: &quot;</span> <span class="op">+</span> cells<span class="op">.</span><span class="at">length</span>)<span class="op">;</span></span>
<span id="cb5-14"><a href="#cb5-14" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
<span id="cb5-15"><a href="#cb5-15" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb5-16"><a href="#cb5-16" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb5-17"><a href="#cb5-17" aria-hidden="true" tabindex="-1"></a> <span class="cf">for</span> (i <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> i <span class="op">&lt;</span> <span class="dv">81</span><span class="op">;</span> i<span class="op">++</span>) {</span>
<span id="cb5-18"><a href="#cb5-18" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (puzzle[i] <span class="op">!=</span> <span class="st">&#39;.&#39;</span>) {</span>
<span id="cb5-19"><a href="#cb5-19" aria-hidden="true" tabindex="-1"></a> cells[i]<span class="op">.</span><span class="at">innerText</span> <span class="op">=</span> puzzle[i]</span>
<span id="cb5-20"><a href="#cb5-20" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb5-21"><a href="#cb5-21" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb5-22"><a href="#cb5-22" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>And hooray it works super well!</p>
<figure>
<img src="images/sudoku-7.png" alt="bad puzzles" />
<figcaption aria-hidden="true">bad puzzles</figcaption>
<img src="images/sudoku-7.png" class="center-img"
alt="This isn’t quite right." />
<figcaption aria-hidden="true">This isn’t quite right.</figcaption>
</figure>
<p>Oh wait… I didn’t think about the fact that the elements in the
HTMLCollection from the document.getElementsByClassName call
@ -167,15 +167,17 @@
each cell an id from 1-81 and insert those manually. I’m sure there
is a better way but hey this works.</p>
<p>Then with a quick update to the code.</p>
<pre><code>for (i = 0; i &lt; 81; i++) {
if (puzzle[i] != &#39;.&#39;) {
document.getElementById(i+1).innerText = puzzle[i]
}
}</code></pre>
<div class="sourceCode" id="cb6"><pre
class="sourceCode js"><code class="sourceCode javascript"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="cf">for</span> (i <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> i <span class="op">&lt;</span> <span class="dv">81</span><span class="op">;</span> i<span class="op">++</span>) {</span>
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (puzzle[i] <span class="op">!=</span> <span class="st">&#39;.&#39;</span>) {</span>
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(i<span class="op">+</span><span class="dv">1</span>)<span class="op">.</span><span class="at">innerText</span> <span class="op">=</span> puzzle[i]</span>
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>It works!</p>
<figure>
<img src="images/sudoku-8.png" alt="good puzzle" />
<figcaption aria-hidden="true">good puzzle</figcaption>
<img src="images/sudoku-8.png" class="center-img"
alt="We have a puzzle!" />
<figcaption aria-hidden="true">We have a puzzle!</figcaption>
</figure>
<p>Still some goofiness like the border on the outside being thinner
than the interiors but I’m pretty happy with this for now.</p>
@ -184,21 +186,19 @@
see which pencil marks it has. These could be styled nicely but for
now I just went with a span inside the cell div with the following
style.</p>
<pre><code>.cell &gt; span {
font-size: 10px;
font-weight: normal;
text-align: center;
letter-spacing: 6px;
word-wrap: anywhere;
}</code></pre>
<div class="sourceCode" id="cb7"><pre
class="sourceCode css"><code class="sourceCode css"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="fu">.cell</span> <span class="op">&gt;</span> span {</span>
<span id="cb7-2"><a href="#cb7-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">10</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb7-3"><a href="#cb7-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">font-weight</span>: <span class="dv">normal</span><span class="op">;</span></span>
<span id="cb7-4"><a href="#cb7-4" aria-hidden="true" tabindex="-1"></a> <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span>
<span id="cb7-5"><a href="#cb7-5" aria-hidden="true" tabindex="-1"></a> <span class="kw">letter-spacing</span>: <span class="dv">6</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb7-6"><a href="#cb7-6" aria-hidden="true" tabindex="-1"></a> <span class="kw">word-wrap</span>: anywhere<span class="op">;</span></span>
<span id="cb7-7"><a href="#cb7-7" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>The letter-spacing and wordwrap attributes let us just jam all of
the pencil marks in as a single string and let the browser break
them up into multiple lines for us.</p>
<p>This comes out quite nicely:</p>
<figure>
<img src="images/sudoku-9.png" alt="pencil marks" />
<figcaption aria-hidden="true">pencil marks</figcaption>
</figure>
<p><img src="images/sudoku-9.png" class="center-img" /></p>
<h3 id="reading-the-pencil-marks-from-the-url">Reading the pencil
marks from the url</h3>
<p>For this url trick we will add the pencil marks using a comma
@ -206,32 +206,30 @@
<p>123,,,,456,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,</p>
<p>Using the string above we can use the following javascript code
to parse and insert them:</p>
<pre><code> var marks_param = params.get(&quot;m&quot;);
if (marks_param === null) {
return;
}
var marks = marks_param.split(&quot;,&quot;);
if (marks.length != 81) {
console.log(&quot;Failure: marks url len is &quot; + marks.length);
return;
}
for (i = 0; i &lt; 81; i++) {
if (marks[i].length &gt; 0) {
var cell = document.getElementById(i+1);
if (cell.innerHTML.trim().length &gt; 0) {
console.log(&quot;Pencil marks in cell with number: &quot; + (i+1));
} else {
cell.innerHTML = &quot;&lt;span&gt;&quot; + marks[i] + &quot;&lt;/span&gt;&quot;;
}
}
}</code></pre>
<div class="sourceCode" id="cb8"><pre
class="sourceCode js"><code class="sourceCode javascript"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> marks_param <span class="op">=</span> params<span class="op">.</span><span class="fu">get</span>(<span class="st">&quot;m&quot;</span>)<span class="op">;</span></span>
<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (marks_param <span class="op">===</span> <span class="kw">null</span>) {</span>
<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> marks <span class="op">=</span> marks_param<span class="op">.</span><span class="fu">split</span>(<span class="st">&quot;,&quot;</span>)<span class="op">;</span></span>
<span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (marks<span class="op">.</span><span class="at">length</span> <span class="op">!=</span> <span class="dv">81</span>) {</span>
<span id="cb8-8"><a href="#cb8-8" aria-hidden="true" tabindex="-1"></a> <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&quot;Failure: marks url len is &quot;</span> <span class="op">+</span> marks<span class="op">.</span><span class="at">length</span>)<span class="op">;</span></span>
<span id="cb8-9"><a href="#cb8-9" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
<span id="cb8-10"><a href="#cb8-10" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb8-11"><a href="#cb8-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb8-12"><a href="#cb8-12" aria-hidden="true" tabindex="-1"></a> <span class="cf">for</span> (i <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> i <span class="op">&lt;</span> <span class="dv">81</span><span class="op">;</span> i<span class="op">++</span>) {</span>
<span id="cb8-13"><a href="#cb8-13" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (marks[i]<span class="op">.</span><span class="at">length</span> <span class="op">&gt;</span> <span class="dv">0</span>) {</span>
<span id="cb8-14"><a href="#cb8-14" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> cell <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(i<span class="op">+</span><span class="dv">1</span>)<span class="op">;</span></span>
<span id="cb8-15"><a href="#cb8-15" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (cell<span class="op">.</span><span class="at">innerHTML</span><span class="op">.</span><span class="fu">trim</span>()<span class="op">.</span><span class="at">length</span> <span class="op">&gt;</span> <span class="dv">0</span>) {</span>
<span id="cb8-16"><a href="#cb8-16" aria-hidden="true" tabindex="-1"></a> <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&quot;Pencil marks in cell with number: &quot;</span> <span class="op">+</span> (i<span class="op">+</span><span class="dv">1</span>))<span class="op">;</span></span>
<span id="cb8-17"><a href="#cb8-17" aria-hidden="true" tabindex="-1"></a> } <span class="cf">else</span> {</span>
<span id="cb8-18"><a href="#cb8-18" aria-hidden="true" tabindex="-1"></a> cell<span class="op">.</span><span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;&lt;span&gt;&quot;</span> <span class="op">+</span> marks[i] <span class="op">+</span> <span class="st">&quot;&lt;/span&gt;&quot;</span><span class="op">;</span></span>
<span id="cb8-19"><a href="#cb8-19" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb8-20"><a href="#cb8-20" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb8-21"><a href="#cb8-21" aria-hidden="true" tabindex="-1"></a> }</span></code></pre></div>
<p>Which also comes out nicely:</p>
<figure>
<img src="images/sudoku-10.png" alt="full puzzle" />
<figcaption aria-hidden="true">full puzzle</figcaption>
</figure>
<p><img src="images/sudoku-10.png" class="center-img" /></p>
</div>
</body>
</html>

19
public/css/styles.css
View File

@ -7,3 +7,22 @@ body {
margin: auto;
}
img {
max-width: 100%;
max-height: 500px;
}
.center-img {
display: block;
margin-left: auto;
margin-right: auto;
}
figcaption {
text-align: center;
font-style: italic;
}
h2 {
border-bottom: 1px solid #000;
}