JSFiddle - React, Tailwind, and code Playground

by orthosie

HTML

<h2>
Tamil Transilteration
</h2>
<div id="result"></div>
<pre id="source">
கஆஹா அ.. அ.. அ.. அ.. ஆ..ஆ...
ஓஹோ ஓஓஓஓஓஓஓஓஓ

ராகங்கள் பதினாறு உருவான வரலாறு
நான் பாடும் போது அறிவாயம்மா
ராகங்கள் பதினாறு உருவான வரலாறு
நான் பாடும் போது அறிவாயம்மா

பல நூறு ராகங்கள் இருந்தால் என்ன
பதினாறு பாட சுகமானது
பல நூறு ராகங்கள் இருந்தால் என்ன
பதினாறு பாட சுகமானது

ராகங்கள் பதினாறு உருவான வரலாறு
நான் பாடும் போது அறிவாயம்மா


கலை மாது தான் மீட்டும் இதமான வீணை
கனிவான ஸ்வரம் பாட பதமானது
கலை மாது தான் மீட்டும் இதமான வீணை
கனிவான ஸ்வரம் பாட பதமானது

அழகான இளம் பெண்ணின் மேனி தான் கூட
ஆதார சுதி கொண்ட வீணையம்மா
அழகான இளம் பெண்ணின் மேனி தான் கூட
ஆதார சுதி கொண்ட வீணையம்மா

ராகங்கள் பதினாறு உருவான வரலாறு
நான் பாடும் போது அறிவாயம்மா


இடையாட வளையாட சலங்கைகள் ஆட
இலையோடு கொடி போல நடமாடினாள்
இடையாட வளையாட சலங்கைகள் ஆட
இலையோடு கொடி போல நடமாடினாள்

உலகாளும் உமையாளின் ராக பாவங்கள்
ஆனந்தம் குடி கொண்ட கோலமம்மா
உலகாளும் உமையாளின் ராக பாவங்கள்
ஆனந்தம் குடி கொண்ட கோலமம்மா

ராகங்கள் பதினாறு உருவான வரலாறு
நான் பாடும் போது அறிவாயம்மா
பல நூறு ராகங்கள் இருந்தால் என்ன
பதினாறு பாட சுகமானது ஆ....ஆ....
பல நூறு ராகங்கள் இருந்தால் என்ன
பதினாறு பாட சுகமானது
ராகங்கள் பதினாறு உருவான வரலாறு
நான் பாடும் போது அறிவாயம்மா
</pre>

JavaScript

var oMap = {

"-nau": "நௌ",
"-nai": "நை",
"-nee": "நே",
"-noo": "நோ",
"-naa": "நா",
"-nuu": "நூ",
"-nii": "நீ",
"-na": "ந",
"-ni": "நி",
"-nI": "நீ",
"-nA": "நா",
"-ne": "நெ",
"-nE": "நே",
"-no": "நொ",
"-nO": "நோ",
"-nu": "நு",
"-nU": "நூ",
"n-au": "நௌ",
"n-ai": "நை",
"n-ee": "நே",
"n-oo": "நோ",
"n-aa": "நா",
"n-uu": "நூ",
"n-ii": "நீ",
"n-a": "ந",
"n-i": "நி",
"n-I": "நீ",
"n-A": "நா",
"n-e": "நெ",
"n-E": "நே",
"n-o": "நொ",
"n-O": "நோ",
"n-u": "நு",
"n-U": "நூ",
"wau": "நௌ",
"wai": "நை",
"wee": "நே",
"woo": "நோ",
"waa": "நா",
"wuu": "நூ",
"wii": "நீ",
"wa": "ந",
"wi": "நி",
"wI": "நீ",
"wA": "நா",
"we": "நெ",
"wE": "நே",
"wo": "நொ",
"wO": "நோ",
"wu": "நு",
"wU": "நூ",
" n": " ந்",
"n-": "ந்",
"-n": "ந்",
"w": "ந்",

"bau": "பௌ",
"bai": "பை",
"bee": "பே",
"boo": "போ",
"baa": "பா",
"buu": "பூ",
"bii": "பீ",
"ba": "ப",
"bi": "பி",
"bI": "பீ",
"bA": "பா",
"be": "பெ",
"bE": "பே",
"bo": "பொ",
"bO": "போ",
"bu": "பு",
"bU": "பூ",
"b": "ப்",

"nthau": "ந்தௌ",
"nthai": "ந்தை",
"nthee": "ந்தே",
"nthoo": "ந்தோ",
"nthaa": "ந்தா",
"nthuu": "ந்தூ",
"nthii": "ந்தீ",
"ntha": "ந்த",
"nthi": "ந்தி",
"nthI": "ந்தீ",
"nthA": "ந்தா",
"nthe": "ந்தெ",
"nthE": "ந்தே",
"ntho": "ந்தொ",
"nthO": "ந்தோ",
"nthu": "ந்து",
"nthU": "ந்தூ",
"nth": "ந்",





"d": "ட்",
"dU": "டூ",
"du": "டு",
"dO": "டோ",
"do": "டொ",
"dE": "டே",
"de": "டெ",
"dA": "டா",
"dI": "டீ",
"di": "டி",
"da": "ட",
"dii": "டீ",
"duu": "டூ",
"daa": "டா",
"doo": "டோ",
"dee": "டே",
"dai": "டை",
"dau": "டௌ",
}

var tMap = {
" " : " ",
"sr": "ஸ்ரீ",
"xau": "க்ஷௌ",
"xai": "க்ஷை",
"xaa": "க்ஷா",
"xA": "க்ஷா",
"xa": "க்ஷ",
"xii": "க்ஷீ",
"xi": "க்ஷி",
"xI": "க்ஷீ",
"xuu": "க்ஷூ",
"xu": "க்ஷு",
"xU": "க்ஷூ",
"xee": "க்ஷே",
"xe": "க்ஷெ",
"xE": "க்ஷே",
"xoo": "க்ஷோ",
"xo": "க்ஷொ",
"xO": "க்ஷோ",
"x": "க்ஷ்",

"njA": "ஞா",
"nju": "ஞு",
"njU": "ஞூ",
"nju": "ஞு",
"njO": "ஞோ",
"njo": "ஞொ",
"njE": "ஞே",
"nje": "ஞெ",
"njI": "ஞீ",
"nji": "ஞி",
"njii": "ஞீ",
"njuu": "ஞூ",
"njaa": "ஞா",
"njoo": "ஞோ",
"njee": "ஞே",
"njai": "ஞை",
"njau":...