[Translate Website] Simple i18n language with Vanilla Javascript | i18n-language.js

i18n-language.js is a simple i18n language with Vanilla Javascript. This JS Internationalization Library allows the user to quickly translate strings in any HTML element.

There are a lot of approaches to internationalization, but this project offers unique advantages such as the following.

  • Inline translation in HTML documents
  • Lightweight implementation of JS 48 lines
  • Written in pure HTML / CSS / JS language so that beginners can use it easily
  • On the first visit, language is set as the browser setting value, and if there is no value specified, English is displayed first
  • When the language is changed, it is stored in the local storage and displayed in the corresponding language upon re-visit

Angular Multi-language Calendar Component Library

How to make use of it:

1. Load the primary JavaScript i18n-language.js at the bottom of the webpage.

<script src="i18n-language.js"></script>

2. Define a number of languages for blocks of text as follows:

<h4 data-lang="ko">
  // Add text Here
</h4>
<h4 data-lang="en">
  // Add text Here
</h4>
<h4 data-lang="jp">
  // Add text Here
</h4>

3. Create a dropdown choose to switch between languages.

<select id="change-language">
  <option value="ko" selected="selected">
    Korean
  </option>
  <option value="en">
    English
  </option>
  <option value="jp">
    Japanese
  </option>
</select>

Translate Text In Elements, i18n-language JS Plugin/Github

Simple-i18n-language-A

Simple-i18n-language-B

Simple-i18n-language-C


See Demo And Download

Official Website(kyaryunha): Click Here

This superior jQuery/javascript plugin is developed by kyaryunha. For extra Advanced Usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

responsive-accordion-ui

Responsive Accordion UI Design using HTML CSS and JavaScript

Responsive Accordion is a responsive and beautiful-looking accordion user interface with smooth transitions. Designed with HTML, CSS (SCSS), and a bit of JavaScript. Stunning accordion user interface…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…