Skip to content

Instantly share code, notes, and snippets.

@yoh2

yoh2/with-js.html

Last active May 21, 2022 16:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yoh2/45299fce3172e53b9ffc34600b6059d7 to your computer and use it in GitHub Desktop.
Save yoh2/45299fce3172e53b9ffc34600b6059d7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
with-js.html
<!DOCTYPE html>
<html>
<head>
<script>
function onChangeCheck(c, cls) {
const found = document.getElementsByClassName(cls);
for (const elem of found) {
if (c.checked) {
elem.classList.add('highlighted');
} else {
elem.classList.remove('highlighted');
}
}
}
</script>
<style>
#board td {
width: 1em;
text-align: center;
font-weight: bold;
}
.start, .goal {
color: red;
background-color: #AAF;
}
.highlighted {
background-color: #AAF;
}
.start::before {
content: "S";
}
.goal::before {
content: "G";
}
.one::before {
content: "1";
}
.two::before {
content: "2";
}
.three::before {
content: "3";
}
.four::before {
content: "4";
}
.five::before {
content: "5";
}
.six::before {
content: "6";
}
</style>
</head>
<body>
<p>
<label><input type="checkbox" onchange="onChangeCheck(this, 'one');">1</label>
<label><input type="checkbox" onchange="onChangeCheck(this, 'two');">2</label>
<label><input type="checkbox" onchange="onChangeCheck(this, 'three');">3</label>
<label><input type="checkbox" onchange="onChangeCheck(this, 'four');">4</label>
<label><input type="checkbox" onchange="onChangeCheck(this, 'five');">5</label>
<label><input type="checkbox" onchange="onChangeCheck(this, 'six');">6</label>
</p>
<table id="board">
<tbody>
<tr>
<td class="three"></td>
<td class="six"></td>
<td class="one"></td>
<td class="start"></td>
<td class="one"></td>
<td class="five"></td>
<td class="two"></td>
</tr>
<tr>
<td class="two"></td>
<td class="five"></td>
<td class="four"></td>
<td class="two"></td>
<td class="one"></td>
<td class="three"></td>
<td class="three"></td>
</tr>
<tr>
<td class="four"></td>
<td class="three"></td>
<td class="three"></td>
<td class="three"></td>
<td class="three"></td>
<td class="six"></td>
<td class="one"></td>
</tr>
<tr>
<td class="five"></td>
<td class="two"></td>
<td class="four"></td>
<td class="four"></td>
<td class="four"></td>
<td class="six"></td>
<td class="five"></td>
</tr>
<tr>
<td class="six"></td>
<td class="four"></td>
<td class="one"></td>
<td class="five"></td>
<td class="three"></td>
<td class="four"></td>
<td class="six"></td>
</tr>
<tr>
<td class="one"></td>
<td class="four"></td>
<td class="six"></td>
<td class="goal"></td>
<td class="six"></td>
<td class="four"></td>
<td class="three"></td>
</tr>
</tbody>
</table>
<body>
</html>
Raw
without-js.html
<!DOCTYPE html>
<html>
<head>
<style>
#board td {
width: 1em;
text-align: center;
font-weight: bold;
}
.start, .goal {
color: red;
background-color: #AAF;
}
#one-check:checked ~ table .one,
#two-check:checked ~ table .two,
#three-check:checked ~ table .three,
#four-check:checked ~ table .four,
#five-check:checked ~ table .five,
#six-check:checked ~ table .six {
background-color: #AAF;
}
.start::before {
content: "S";
}
.goal::before {
content: "G";
}
.one::before {
content: "1";
}
.two::before {
content: "2";
}
.three::before {
content: "3";
}
.four::before {
content: "4";
}
.five::before {
content: "5";
}
.six::before {
content: "6";
}
</style>
</head>
<body>
<input id="one-check" type="checkbox"><label for="one-check">1</label>
<input id="two-check" type="checkbox"><label for="two-check">2</label>
<input id="three-check" type="checkbox"><label for="three-check">3</label>
<input id="four-check" type="checkbox"><label for="four-check">4</label>
<input id="five-check" type="checkbox"><label for="five-check">5</label>
<input id="six-check" type="checkbox"><label for="six-check">6</label>
<table id="board">
<tbody>
<tr>
<td class="three"></td>
<td class="six"></td>
<td class="one"></td>
<td class="start"></td>
<td class="one"></td>
<td class="five"></td>
<td class="two"></td>
</tr>
<tr>
<td class="two"></td>
<td class="five"></td>
<td class="four"></td>
<td class="two"></td>
<td class="one"></td>
<td class="three"></td>
<td class="three"></td>
</tr>
<tr>
<td class="four"></td>
<td class="three"></td>
<td class="three"></td>
<td class="three"></td>
<td class="three"></td>
<td class="six"></td>
<td class="one"></td>
</tr>
<tr>
<td class="five"></td>
<td class="two"></td>
<td class="four"></td>
<td class="four"></td>
<td class="four"></td>
<td class="six"></td>
<td class="five"></td>
</tr>
<tr>
<td class="six"></td>
<td class="four"></td>
<td class="one"></td>
<td class="five"></td>
<td class="three"></td>
<td class="four"></td>
<td class="six"></td>
</tr>
<tr>
<td class="one"></td>
<td class="four"></td>
<td class="six"></td>
<td class="goal"></td>
<td class="six"></td>
<td class="four"></td>
<td class="three"></td>
</tr>
</tbody>
</table>
<body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment