Skip to content

I made a Pinyin to Gwoyeu Romatzyh translator (so i can learn how to pronounce and practice speaking Mandarin).

It can be hard to learn how to say things correctly in Chinese, especially if you are new to tonal languages. So, i made a tool that can help you change Pinyin to Gwoyeu Romatzyh, which is a more accurate representation of Mandarin Chinese sounds, can be very useful.

App hosted on github pages: https://retributionbyrevenue.github.io/pinyin-to-gwoyeu-romantzyh/

Why did i make this?
Making this kind of tool also helps me learn more about both the Pinyin and Gwoyeu Romatzyh systems, since you have to use logic to handle tone marks and changes between them.  Also it speeds up the process of learning Mandarin and serves as a useful resource for future use or to share with other people who are also learning Chinese.
HTML Structure:

The HTML part contains various elements like buttons, input fields, a table, and a footer button. There’s an input field for users to enter Pinyin text, and when they click the “add” button, the entered text is processed and displayed in a table.
Four buttons with IDs square1, square2, square3, and square4 are used to add tone marks to the input text.
There’s also a footer button labeled “How this works?” that triggers an alert explaining how to use the tool.

JavaScript Logic

  • The first script block handles the “How this works?” button. When clicked, it shows an alert explaining how to enter Pinyin and add tones using the yellow tone buttons. -The second script block:
    • Defines variables for various HTML elements and sets up event listeners.
      • Restricts the input field to accept only letters (A-Z, a-z) and spaces.
      • Creates a function unique to remove duplicate elements from an array.
      • Sets up an event listener so that whenever a click occurs outside the input field, the input field gets focused.
    • The third script block:
      • Adds an event listener to the “add” button.
      • Processes the entered Pinyin text to add tone marks based on the selected tones from the yellow buttons.
      • Inserts the processed Pinyin and Gwoyeu Romatzyh (GR) into a new row in the table.
      • Also handles double-click events on table rows to delete entries.