JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<div>
  <a href="" id="en" class="translate">English</a>
  <a href="" id="ger" class="translate">German</a>
  <p class="display languange">
    Lorem ipsum dolor sit amet <br> consectetur, adipisicing elit. <br> Ut hic amet eius soluta exercitationem <br> sunt et ad in, aspernatur at. <br> Facere voluptatem quasi, enim <br>
  </p>
</div>

CSS

p {
  height: 150px;
  width: 380px;
  background-color: grey;
  text-align: center
}

JavaScript

$(function() {
  var arrLang = {
    "en": {
      "text": "See Budapest,\r\nthe Queen of the Danube\r\nfrom brand new perspective\r\nas you have never seen before!"
    },
    "ger": {
      "text": "NĂ©zd meg Budapestet,"
    }
  };

  function nlToBr(string) {
    return string.replaceAll("\r\n", "<br />");
  }

  function loadText(arr, target, language, append) {
    if (append == undefined) {
      append = false;
    }
    if (language == undefined) {
      language = "en"
    }
    var myText = nlToBr(arr[language].text);
    if (target == undefined) {
      return myText;
    }
    if (append) {
      $(target).append(myText);
    } else {
      $(target).html(myText);
    }
    return true;
  }

  function getLanguage() {
    var l = localStorage.getItem("lang");
    if (!l) {
      l = "en";
    }
    return l;
  }

  function saveLanguage(l) {
    if (l != undefined) {
      localStorage.setItem("lang", l);
    }
  }

  $(".display").each(function(index, element) {
    loadText(arrLang, element, getLanguage());
  });

  $(".translate").click(function(event) {
    event.preventDefault();
    saveLanguage($(this).attr("id"));

    $(".display").each(function(index, element) {
      loadText(arrLang, element, getLanguage());
      $(element).data("languange", getLanguage());
    });
  });
});