JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<p id='de'></p>
<p id='en'></p>

JavaScript

/**
 * i18n example
 */
(function(global){
    'use strict';

    /** global i18n object */
    var i18n = global.i18n = {};

    /** load language data */
    function loadLang(lang){
        var dicts = {
            de: {
                hello: 'Hallo Welt!',
                bye: 'Und bis später!'
            },
            en: {
                hello: 'Hello World!',
                bye: 'See you later!'
            }
        };
        return dicts[lang];
    }

    /** validate the language code */
    function validateLang(lang){
        if(lang !== 'de' && lang !== 'en'){
            throw 'language not supported';
        }
    }
    
    /** load an additional language */
    i18n.load = function(){
        validateLang(lang);
        i18n[lang] = loadLang(lang);
    };

    /** set the main language */
    i18n.use = function(lang){
        validateLang(lang);
        if(typeof i18n[lang] === 'undefined'){
            i18n[lang] = loadLang(lang);
        }
        i18n.local = i18n[lang];
    };
    
}(window));


/** -- usage -- */
var deNode = document.getElementById('de'),
    enNode = document.getElementById('en');

i18n.use('de');
deNode.innerHTML = i18n.local.hello;

i18n.use('en');
enNode.innerHTML = i18n.local.hello;