MultiLanguage Website with JavaScript

This is a template for MultiLanguage support of a website. It uses only JavaScript to implement the logic. It is easy to implement and does not require some extra frameworks or extensions.

You can check here the DEMO

Structure of Project:

• Resources Folder
  • Here you can store all files with translations - in this example these are en.js and bg.js.
  • You simply create a variable with keys and string value with translation.
    • Key values need to be added in data-tag attribute in every HTML element which you want to be translated.
• Scripts Folder
  • defaultValues.js
    • All default values for the template.
  • myFunctions.js
    • All functions that are used.
    • getCookie - it is used to check if cookie with language exists. I prefer to store the language in cookie in order to remember the clients preferences.
    • translateAll - translates all elements in DOM where data-tag exists
      • Note that all html elements need to have data-tag attribute with their key in order to be translated.
  • Translate.js
    • This is the implementation of the Language class. It creates an instance with default language. The default language is set in the defaltValues.js file.
    • getVal - returns the translated value by the key passed. You can pass default value, if no key exists or 'undefined' will be returend.
• Styles Folder
  • style.css - simple styles for presentation page
• index.html
  • Example page where you can test the translation of page.

Enjoy!