Skip to content

Instantly share code, notes, and snippets.

@hanya

hanya/prefix_a.html

Last active November 14, 2022 10:32
Show Gist options
  • Save hanya/0e4febc7333363e4427e3afb2af6b927 to your computer and use it in GitHub Desktop.
Save hanya/0e4febc7333363e4427e3afb2af6b927 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
prefix_a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title id="document-title">○さいたまメーカー</title>
<link rel="icon" type="image/png" href="./assets/img/favicon.png">
<style>
.row {
line-height: 140%;
}
.cell {
padding-right: 1em;
}
#output-table {
border-top: solid 1px #000000;
border-bottom: solid 1px #000000;
}
.active {
color: #000000;
}
.non-active {
color: #bbbbbb;
}
</style>
<script>
const AtoN = [
'あ','い','う','え','お',
'か','き','く','け','こ',
'さ','し','す','せ','そ',
'た','ち','つ','て','と',
'な','に','ぬ','ね','の',
'は','ひ','ふ','へ','ほ',
'ま','み','む','め','も',
'や','','ゆ','','よ',
'ら','り','る','れ','ろ',
'わ','を','ん','','',
'が','ぎ','ぐ','げ','ご',
'ざ','じ','ず','ぜ','ぞ',
'だ','ぢ','づ','で','ど',
'ば','び','ぶ','べ','ぼ',
'ぱ','ぴ','ぷ','ぺ','ぽ',
];
const AtoNs = [
'きゃ','きゅ','きょ',
'しゃ','しゅ','しょ',
'ちゃ','ちゅ','ちょ',
'にゃ','にゅ','にょ',
'ひゃ','ひゅ','ひょ',
'みゃ','みゅ','みょ',
'りゃ','りゅ','りょ',
'ぎゃ','ぎゅ','ぎょ',
'じゃ','じゅ','じょ',
'ぢゃ','ぢゅ','ぢょ',
'びゃ','びゅ','びょ',
'ぴゃ','ぴゅ','ぴょ',
];
function clear() {
const table = document.getElementById('output-table');
if (table) {
table.remove();
}
}
function show(word) {
clear();
const table = document.createElement('table');
table.id = 'output-table';
let columnCount = 0;
let row;
for (const prefix of AtoN) {
if (columnCount == 0) {
row = addRow(table);
}
if (prefix != '') {
addCell(row, prefix + word);
} else {
addCell(row, '');
}
columnCount += 1;
if (columnCount == 5) {
columnCount = 0;
}
}
columnCount = 0;
for (const prefix of AtoNs) {
if (columnCount == 0) {
row = addRow(table);
}
if (prefix != '') {
addCell(row, prefix + word);
}
columnCount += 1;
if (columnCount == 3) {
columnCount = 0;
}
}
document.getElementById('output').appendChild(table);
}
function addCell(row, s) {
const cell = document.createElement('td');
cell.textContent = s;
cell.classList.add('cell');
cell.classList.add('active');
cell.addEventListener('click', function(ev) {
const cell = ev.target;
if (cell.classList.contains('active')) {
cell.classList.add('non-active');
cell.classList.remove('active');
} else {
cell.classList.remove('non-active');
cell.classList.add('active');
}
});
row.appendChild(cell);
return cell;
}
function addRow(table) {
const row = document.createElement('tr');
row.classList.add('row');
table.appendChild(row);
return row;
}
window.onload = function(ev) {
document.getElementById('ok-button')
.addEventListener('click', function() {
show(document.getElementById('word').value);
});
};
</script>
</head>
<body style="margin-left: 1em;">
<div style="margin-bottom: 1em;">
<span>単語を入力</span><br>
<input type="text" id="word" value="さいたま">
<input type="button" id="ok-button" value="OK">
</div>
<div id="output">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment