Currently every translation has its own index_**.html file which is not very practical, every change/fix has to be copied to the other files manually.
I suggest to have a single html file, and the internationalization can be done with JS.
Here are some ideas to get that done (there are other ways, this is just a simple one): add ids to the controls that have to be translated
<h1 class="title" id="calculator">Calculadora Taxa Metabólica Basal</h1>
Then have some sort of "dictionary" in a JS list and change the innerHTML of the controls accordingly, something like
const selectedLanguage = 'pt'; // something the user selected on the screen, for "portuguese"
const dictionary = {
'en': { calculate: 'calculate', weight: 'weight' },
'pt': { calculate: 'calcular', weight: 'peso' },
...
}
document.getElementById('calculate').innerHTML = dictionary[selectedLanguage]['calculate']
It's a nice challenge to learn query selectors etc
Then to support new languages a person just have to add items to this list dictionary, the language selector on top, and it just works.
For extra challenge one can get the browser's default language and set accordingly (check navigator.languages
)