Learn Hiragana and Katakana charaters with some help from plain old JavaScript.

在普通的旧JavaScript的帮助下学习平假名和片假名角色。

We are making a single html page that will display a random Kana — a random Hiragana and its Katakana equivalent.

我们正在制作一个HTML页面，其中将显示随机假名-随机平假名及其等效的片假名。

数据结构 (Data structure)

Lets create app.js, it will contain our JavaScrip, data structure and the function to fetch a random kana out of the array.

让我们创建app.js，它将包含我们的JavaScrip，数据结构和从数组中提取随机假名的函数。

Our kana variable is an array of objects. Where each object represents a hiragana/katakana pair together with its romaji — english letter.

我们的假名变量是一个对象数组。 每个对象代表平假名/片假名对及其罗马字(英语字母)。

The “hiragana_info” and the “katakana_info” serve as hints, a simple remined what the kana for each of them kinda looks like.

“ hiragana_info”和“ katakana_info”用作提示，简单地提醒了它们的假名有点像。

For example: Hiragana for “a” is あ which looks like an apple right? :)Katakana is ア which looks like an axe.

例如：“ a”的平假名是あ，看起来像苹果吗？ :)片假名是看起来像斧头的ア。

The Kana for が (ga) is the same as か (ka) with added dakuten. Here the “original_kana_eng” is linking the ga to ka for any tips for remembering the kana.

が(ga)的假名与加了dakuten的か(ka)相同。 在这里，“ original_kana_eng”将ga链接到ka，以获取记住该假名的任何提示。

HTML和CSS (HTML & CSS)

The html is straightforward. We need to display the english charater somewhere so we dont forget what the hiragana and katakana kana actually mean.

html很简单。 我们需要在某个地方显示英语字符，以免忘记平假名和片假名假名的实际含义。

Hints are gonna be display in upper right corner, they will be small.

提示将显示在右上角，它们会很小。

The center of the page will contain both kanas.

页面的中心将包含两个kanas。

With a little CSS magic, the page looks like this.

有了一点CSS魔术，页面看起来像这样。

JavaScript (JavaScript)

All we need now is to fetch the next random kana when we click the Next button and update the page.

现在，我们需要的是单击“下一步”按钮并更新页面时获取下一个随机假名。

And that is all there is.

这就是全部。

Repository here: https://github.com/zprima/jpnmnemonics

此处的存储库： https : //github.com/zprima/jpnmnemonics