feat: language selection preferences will persist while on any page, …

…not just the landing.

selecting a language stores the user's preferred language into their localStorage. on load of every page, the preferred language is gotten from localStorage, and page rendered. on first visit of site, there will be no locally-stored preferred language, so English is shown by default. the user no longer has to click their preferred language (presuming non-English) on the header on every page. fixes #22.

index.html

@@ -49,7 +49,7 @@ <h2>
     </a>
 
     <article class="switch-language">
-      <button type="button" class="switch-language-button selected" data-language="english">EN</button>
+      <button type="button" class="switch-language-button" data-language="english">EN</button>
       <button type="button" class="switch-language-button" data-language="simplifiedChinese">简</button>
     </article>
   </header>

js/languageManager.mjs

@@ -0,0 +1,72 @@
+const switchLanguageButtons = document.querySelectorAll(
+  ".switch-language-button"
+);
+
+const renderPageInPreferredLanguage = () => {
+  const preferredLanguage =
+    localStorage.getItem("preferredLanguage") || "english";
+  const variableLanguageElements = {
+    english: document.querySelectorAll("body [lang='en']"),
+    simplifiedChinese: document.querySelectorAll("body [lang='zh']"),
+  };
+  const currentPageName = window.location.pathname.replace(".html", "");
+  const PAGE_TITLES = {
+    "/": {
+      english: "Intellex | Join our waitlist to get matched to a career mentor",
+      simplifiedChinese: "Intellex | 职业导师配对",
+    },
+    "/privacy-policy": {
+      english: "Intellex | Privacy Policy",
+      simplifiedChinese: "Intellex | 隐私政策",
+    },
+    "/terms-and-conditions": {
+      english: "Intellex | Terms and Conditions",
+      simplifiedChinese: "Intellex | 条款与条件",
+    },
+  };
+
+  if (
+    !(preferredLanguage in variableLanguageElements) ||
+    !(currentPageName in PAGE_TITLES)
+  )
+    return;
+
+  const updatePageTitle = () =>
+    (document.title = PAGE_TITLES[currentPageName][preferredLanguage]);
+
+  const updateLanguageButton = () =>
+    switchLanguageButtons.forEach((button) => {
+      if (button.dataset.language === preferredLanguage)
+        button.classList.add("selected");
+      else button.classList.remove("selected");
+    });
+
+  const displayElements = () => {
+    for (const [language, elements] of Object.entries(
+      variableLanguageElements
+    )) {
+      if (language === preferredLanguage)
+        elements.forEach((element) => (element.style.display = "block"));
+      else elements.forEach((element) => (element.style.display = "none"));
+    }
+  };
+
+  // run
+  updatePageTitle();
+  updateLanguageButton();
+  displayElements();
+};
+
+const handleLanguageSwitch = (e) => {
+  const preferredLanguage = e.target.dataset.language;
+  localStorage.setItem("preferredLanguage", preferredLanguage);
+
+  renderPageInPreferredLanguage();
+};
+
+const enableLanguageSwitch = () =>
+  switchLanguageButtons.forEach((button) =>
+    button.addEventListener("click", handleLanguageSwitch)
+  );
+
+export { enableLanguageSwitch, renderPageInPreferredLanguage };

js/main.js

@@ -1,8 +1,11 @@
-import enableLanguageSwitch from "./enableLanguageSwitch.mjs";
+import {
+  enableLanguageSwitch,
+  renderPageInPreferredLanguage,
+} from "./languageManager.mjs";
 import enableCTAs from "./enableCTAs.mjs";
 
 const isHomepage = () => window.location.pathname === "/";
 
 if (isHomepage()) enableCTAs();
-
 enableLanguageSwitch();
+renderPageInPreferredLanguage();