Basic translations in JavaScript with DOM traversal

javascript-translations.html

<!-- Shamelessly borrowed from bulma docs -->
<div class="container">
  <div class="card">
    <header class="card-header">
      <p class="card-header-title is-translated" translate="cardTitle">
        Component
      </p>
    </header>
    <div class="card-content">
      <div class="content">
        <span class="is-translated" translate="cardContents">This is an example of doing translations manually via DOM traversal!</span>
        <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
    <footer class="card-footer">
      <a href="#" class="card-footer-item is-translated" translate="save">Save</a>
      <a href="#" class="card-footer-item is-translated" translate="edit">Edit</a>
      <a href="#" class="card-footer-item is-translated" translate="delete">Delete</a>
    </footer>
  </div>
</div>

<script>
// CHANGE ME!
const LANGUAGE = 'de';

const translations = {
  en: {
    cardTitle: 'Component',
    save: 'Save',
    edit: 'Edit',
    delete: 'Delete',
    cardContents: 'This is an example of doing translations manually via DOM traversal!'
  },
  jp: {
    cardTitle: '成分',
    save: 'セーブ',
    edit: '編集',
    delete: '削除',
    cardContents: 'これは、DOMのトラバーサルを介して手動で翻訳を行う例です！'
  },
  de: {
    save: 'Sparen',
    edit: 'Bearbeiten',
    delete: 'Löschen'
  }
};


const translate = (lang, key) => {
  if (translations[lang] === undefined || translations[lang][key] === undefined) {
    return null;
  }
  return translations[lang][key];
}

const translateElement = (ele) => {
  const attrs = ele.attributes;
  if (attrs) {
    if (attrs['translate']) {
    	const translated = translate(LANGUAGE, attrs['translate'].value);
      if (translated !== null) {
      	ele.innerText = translated;
      }
    }
  }
}

(() => {
  document.querySelectorAll('.is-translated').forEach(translateElement);
})();
</script>