Created
September 11, 2021 19:24
-
-
Save mnofresno/5ed423eecc2a8c358c47bb531c2bbd7e to your computer and use it in GitHub Desktop.
Basic HTML multi-language example for a single page portfolio app with data-centric approach
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" cntent="width=device-width, initial-scale=1.0"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <title>Sitio de Ema</title> | |
| </head> | |
| <body> | |
| <script> | |
| var textsToShow = { | |
| 'en': { | |
| title: 'This is the Ema\'s Website', | |
| blogsubtitle: 'This blog is a marvell thinked to fascinate you', | |
| firstElement: 'This is the first element super important' | |
| }, | |
| 'es': { | |
| title: 'Este es el sitio web de Ema', | |
| blogsubtitle: 'Este blog es una maravilla pensada para fascinarte', | |
| firstElement: 'Este es el primer elemento super importante' | |
| } | |
| }; | |
| $(document).ready(function() { | |
| function changeTo(lang) { | |
| Object.keys(textsToShow[lang]).forEach(elementId => { | |
| $('#' + elementId).text(textsToShow[lang][elementId]); | |
| }); | |
| } | |
| var languageButtons = $('#languageButtons'); | |
| Object.keys(textsToShow).forEach(lang => { | |
| var upperLang = lang.toUpperCase(); | |
| languageButtons.append('<button id="changeTo' + upperLang + '">' + upperLang + '</button>'); | |
| $('#changeTo' + lang.toUpperCase()).click(() => changeTo(lang)); | |
| }); | |
| changeTo('en'); | |
| }); | |
| </script> | |
| <div id=languageButtons></div> | |
| <h1 id="title"></h1> | |
| <h2 id="blogsubtitle"></h2> | |
| <span id="firstElement"></span> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Working Demo: https://jsfiddle.net/1q5jfxyg/