add function to switch the language (#479)

NoroffFEU · Apr 13, 2024 · 9367578 · 9367578
1 parent e17c40b
commit 9367578
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/languageSelect/README.md b/languageSelect/README.md
@@ -0,0 +1 @@
+This functionality can be applied for any text on the page, but would require readily available translated texts, saved in 'languageContent' with the relevant keys. Those keys must be used as id in html layout to access them.
diff --git a/languageSelect/index.html b/languageSelect/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+   <h2>Switching the language of web page using JavaScript</h2>
+   <div id = "text1"> This is a sample content </div>
+   <div id = "language"> English </div>
+   <div id = "languageSwitcher">
+      <button onclick = "swithcLang('en')"> English </button>
+      <button onclick = "swithcLang('fr')"> French </button>
+      <button onclick = "swithcLang('es')"> Spanish </button>
+   </div>
+   <script>
+      let languageContent = {
+         "en": {
+            "text1": "This is a sample content",
+            "language": "English",
+         },
+         "fr": {
+            "text1": "Ceci est un contenu d'exemple",
+            "language": "Français",
+         },
+         "es": {
+            "text1": "Este es un contenido de ejemplo",
+            "language": "Español",
+         }
+      }
+      function swithcLang(lang) {
+         for (let key in languageContent[lang]) {
+            document.getElementById(key).innerHTML = languageContent[lang][key];
+         }
+      }
+   </script>    
+</body>
+</html>