Изучайте символы хираганы и катаканы с помощью старого доброго JavaScript.

Мы делаем одну html-страницу, которая будет отображать случайную кану — случайную хирагану и ее эквивалент катаканы.

Структура данных

Давайте создадим app.js, он будет содержать наш JavaScrip, структуру данных и функцию для извлечения случайной каны из массива.

Наша переменная kana представляет собой массив объектов. Где каждый объект представляет собой пару хирагана/катакана вместе со своей ромадзи — английской буквой.

«hiragana_info» и «katakana_info» служат подсказками, простым напоминанием о том, как выглядит кана для каждого из них.

Например: хирагана вместо «а» — это あ, похожее на яблоко, верно? :)
Катакана — это ア, похожее на топор.

Кана для が (га) такая же, как для か (ка) с добавлением дакутэн. Здесь «original_kana_eng» связывает ga с ka для любых советов по запоминанию каны.

HTML и CSS

HTML простой. Нам нужно где-то отобразить английский символ, чтобы мы не забыли, что на самом деле означают хирагана и катакана кана.

Подсказки будут отображаться в правом верхнем углу, они будут маленькими.

В центре страницы будут обе каны.

С небольшой магией CSS страница выглядит так.

JavaScript

Все, что нам нужно сейчас, это получить следующую случайную кану, когда мы нажмем кнопку «Далее» и обновим страницу.

И это все, что есть.

Репозиторий здесь: https://github.com/zprima/jpnmnemonics