I'm trying to build a website that is bilingual. Originally, I wrote it using nodeJS but then found it difficult/expensive to host because VPS/Dedicated server packages are required to run a nodeJS app. So now, I'm using just plain vanilla javascript and JQuery to translate the page and haven't quite figured out the best way to do so.
HOW THE TRANSLATION WORKS:
There is a button on the page that says "En Español" that has an event listener attached to it. The idea is that once the user clicks it, all the text gets converted to spanish, and that button now reads "In English", incase users want to translate to english. This would work nicely if I had just one html page, but I have four, so I need a way to track the language the user wants. So I thought what if I had a text file or json file that had the language code (i.e., "en" or "es") and when ever the translate button is clicked it changes 'en' to 'es' and vice versa.
So my question is: if i had a text file to contain the language code, and I host it to say hostgator and by default I set it to be "en" -- every time a user clicks on the translate button, will it actually change the file hosted on HostGator, or is there like a local copy that's changed? I don't want a user to click on this button, and then everyone else that is on the webpage suddenly have their site change languages. I'm hoping the text file will always say "en", and only changes locally. Any tips or any better solution for how to make the page bilingual?
You don´t need to change the file in the server. You can have diferent json files with the same keys in the object. Every time the languaje change, you can switch between files.
Ex: en.js
{
"title": "A title in English",
"important_par": "this is an important text"
}
es.js
{
"title": "Titulo en Español",
"important_par": "Este es un párrafo importante"
}