Изучайте символы хираганы и катаканы с помощью старого доброго 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