// Source : https://ninaoutandabout.ca/how-to-say-hello-in-different-languages/ // Added & modified some languages' greetings const languages = { "Afrikaans" : "Hallo", "Albanian" : "Përshëndetje", "Amharic" : "Selam", "Arabic" : "Marhabaan (مرحبًا)", "Armenian" : "Barev", "Australian" : "G’day", "Azerbaijani" : "Salam", "Bahaman" : "Hello", "Basque" : "Kaixo", "Bavarian" : "Servus", "Belarusian" : "Dobry Dzień", "Bengali" : "Hyālō", "Bosnian" : "Zdravo", "Breton" : "Demat", "Burmese" : "Mingalaba", "Cantonese" : "Nǐ hǎo", "Catalan" : "Hola", "Cebuano" : "Kumusta", "Chichewa" : "Moni", "Croatian" : "Zdravo", "Czech" : "Ahoj", "Dutch" : "Hallo", "English" : "Hello", "Esperanto" : "Saluton", "Estonian" : "Tere", "Fijian" : "Bula", "French" : "Bonjour", "Galician" : "Ola", "Georgian" : "Gamarjoba", "German" : "Guten tag", "Greek" : "Geia (γεια)", "Haitian Creole" : "Bonjou", "Hausa" : "Sannu", "Hawaiian" : "Aloha", "Hebrew" : "Shalom", "Hindi" : "Namaste", "Hungarian" : "Szia", "Icelandic" : "Halló", "Igbo" : "Nde-ewo", "Indonesian" : "Halo", "Irish" : "Dia Duit", "Italian" : "Salve", "Japanese" : "Kon’nichiwa", "Kannada" : "Namaskāra", "Khmer" : "Choum Reap Sor", "Korean" : "Anyeong Haseyo", "Kurdish" : "Slav", "Lao" : "Sabaidee", "Latvian" : "Sveika (male)\nSveiks (female)", "Lithuanian" : "Sveiki", "Luxembourgish" : "Moïen", "Malagasy" : "Salama", "Malay" : "Selamat Pagi", "Maltese" : "Bongu", "Mandarin" : "Nǐ hǎo", "Manipuri" : "Khurumjari", "Maori" : "Kia Ora", "Mongolian" : "Sain uu", "Navajo" : "Ya’at’eeh", "Nepali" : "Namaste", "Norwegian" : "Hei", "Oromo" : "Akkam", "Pashto" : "Salam", "Persian" : "Salām", "Polish" : "Cześć", "Portugese" : "Olá", "Punjabi" : "Sata Srī Akāla", "Quechua" : "Allianchu ", "Romanian" : "Bună", "Russian" : "Privet (Привет)", "Samoan" : "Tālofa", "Santali" : "Henda ho", "Scottish Gaelic" : "Halò", "Serbian" : "Zdravo", "Sesotho" : "Dumela", "Sinhalese" : "Ayubowan", "Slovak" : "Ahoj", "Somali" : "Salam Alaykum", "Spanish" : "Hola", "Swahili" : "Jambo", "Swedish" : "Hallå", "Swiss German" : "Grüezi", "Tagalog" : "Kamusta", "Tahitian" : "Ia Orana", "Taiwanese Hokkien" : "Li-hó", "Tamil" : "Vanakkam", "Thai" : "S̄wạs̄dī", "Tibetan" : "Tashi Delek", "Tongan" : "Mālō e lelei", "Tswana" : "Dumela", "Turkish" : "Merhaba", "Ukrainian" : "Dobryj Den", "Urdu" : "Assalam u Alaikum", "Uzbek" : "Salom", "Vietnamese" : "Xin Chào", "Welsh" : "S’mae", "Wolof" : "Salaam Aleekum", "Wu (Shanghainese)" : "Nóng gō", "Xhosa" : "Molweni", "Yiddish" : "A Gutn Tog", "Zimbabwe" : "Mhoro (Shona)\nSalibonani (Ndebele)" }; window.onload = () => { // language initial buttons event handler function langButtonHandler() { const chosenClass = `language${this.textContent}`; boxes.forEach( e => { e.style.display = ( e.className === chosenClass ? "inline" : "none" ); } ); commonGreetings.style.display = null; document .querySelectorAll( "#langInitialsBar > button" ) .forEach( btn => btn.className = ( btn === this ? "active" : null ) ); } const boxes = []; // greetings containers -

elements const greetingSpans = []; // greetings message - elements const langInitials = []; // CSS class for language initials const group = {}; // group languages by greetings for( const [ lang, greetings ] of Object.entries( languages ) ) { if( greetings in group ) { group[ greetings ].push( lang ); } else { group[ greetings ] = [ lang ]; } const boxTitle = document.createElement( "legend" ); boxTitle.textContent = lang; const boxContent = document.createElement( "span" ); boxContent.textContent = greetings; greetingSpans.push( boxContent ) const box = document.createElement( "fieldset" ); const langInitial = lang.charAt( 0 ); box.id = lang; box.className = `language${langInitial}`; box.appendChild( boxTitle ); box.appendChild( boxContent ); document.body.appendChild( box ); boxes.push( box ); // add language initial buttons if( !langInitials.includes( langInitial ) ) { langInitials.push( langInitial ); const langBtn = document.createElement( "button" ); langBtn.type = "button"; langBtn.textContent = langInitial; langBtn.addEventListener( "click", langButtonHandler ); langInitialsBar.appendChild( langBtn ); } } let str = ""; for( const [ greetings, lang ] of Object.entries( group ).sort() ) { if( lang.length > 1 ) { str += `

${greetings}

${lang.join( '
' )}

`; } } langGroup.innerHTML = str; // toggle visual of greetings // Thanks to @Arturop & @ODLNT document.getElementById( "chkShow" ) .addEventListener( "change", function( evt ) { const rule = ( this.checked ? 'inline' : null ); for( const span of greetingSpans ) { span.style.display = rule; } } ); // switch visibility of language fiekdset boxes const switchBoxes = ( arg ) => { const boxState = ( arg ? "inline" : "none" ); boxes.forEach( e => e.style.display = boxState ); commonGreetings.style.display = ( arg ? null : "inline" ); document .querySelectorAll( "#langInitialsBar > button" ) .forEach( btn => btn.className = null ); }; // display all the fieldset elements btnAllLang.addEventListener( "click", () => switchBoxes( true ) ); // display fieldset elements for languages sharing common word for greetings btnCommonLang.addEventListener( "click", () => switchBoxes( false ) ); };

Hello in 100 languages