hanya/prefix_a.html

## 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>
	<!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>