Kana Go

Kana Go is a simple and interactive web app that helps users learn and practice Japanese Kana (Hiragana, Katakana, and Romaji). The app randomizes characters, providing a fun way to test recognition skills and study Japanese writing systems.

Preview

Features

• Kana Go Display: Click anywhere to generate a random character.
• Switch Between Systems: Buttons to toggle between Hiragana, Katakana, and Romaji.
• Answer Reveal: Click the main area to reveal the answer.
• Responsive Design: Works seamlessly across devices with an elegant UI.

Tech Stack

• HTML5: Structure of the web page.
• CSS3: Styling, including modern fonts and button effects.
• JavaScript (ES6): Logic for character generation and user interaction.

Live Demo

Try it out here.

Demo

Watch the full demo on YouTube.

To see the app in action, follow these steps:

1. Clone this repository:

   git clone https://github.com/developers-together/Kana-Go.github.io.git
   

2. Open the index.html file in your browser.

File Structure

• index.html: The main structure of the app.
• style.css: Contains all styles, including animations, hover effects, and layout design.
• script.js: JavaScript logic for randomizing and displaying Kana.
• jpChars.js: Data file with Kana characters (Hiragana, Katakana, and Romaji).
• logo.png: Logo displayed in the header.
• Screenshot.png: Screenshot of the UI for documentation.

Kana Go Logic

The app uses a pre-defined array of Kana characters from the jpChars.js file:

• Each character includes its Hiragana, Katakana, and Romaji forms.
• On load, a random character is displayed, and users can reveal its translation or switch forms.

How to Use

1. Open the app in your browser.
2. Choose a writing system (Hiragana, Katakana, or Romaji).
3. Click anywhere in the main area to generate a random character.
4. Click again to reveal the answer.

Requirements

• None (Pure HTML, CSS, and JavaScript)

Credits

• Developers: Adham Haitham and Rouby
• Fonts: Comfortaa & Comic Neue (via Google Fonts)