DEV Community

David KRKofficial
David KRKofficial

Posted on

Untitled

#codepen

<!doctype html>


<title>Site en construction</title>

<style>
  body {
    background: #000;

    color: white;

    text-align: center;

    padding: 50px;
  }

  button {
    margin: 5px;

    padding: 10px;

    background: #333;

    color: white;

    border: none;

    border-radius: 5px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

SITE EN CONSTRUCTION

<h2 id="slide1_h2">NOUVEAU SITE WEB BIENTÔT DISPONIBLE</h2>

<p id="slide1_p">Un site web entièrement nouveau arrive bientôt !</p>

<div>
  <button data-lang="fr">Français</button>

  <button data-lang="en">English</button>

  <button data-lang="es">Español</button>

  <button data-lang="zh">中文</button>
</div>

<script>
  const translations = {
    fr: {
      mainTitle: "SITE EN CONSTRUCTION",

      slide1_h2: "NOUVEAU SITE WEB BIENTÔT DISPONIBLE",

      slide1_p: "Un site web entièrement nouveau arrive bientôt !",
    },

    en: {
      mainTitle: "UNDER CONSTRUCTION",

      slide1_h2: "NEW WEBSITE COMING SOON",

      slide1_p: "A brand new website is coming soon!",
    },

    es: {
      mainTitle: "SITIO EN CONSTRUCCIÓN",

      slide1_h2: "NUEVO SITIO WEB PRÓXIMAMENTE",

      slide1_p: "¡Un nuevo sitio web está por llegar!",
    },

    zh: {
      mainTitle: "网站正在建设中",

      slide1_h2: "新网站即将上线",

      slide1_p: "一个全新的网站即将到来！",
    },
  }

  function setLanguage(lang) {
    document.documentElement.setAttribute("lang", lang)

    const langData = translations[lang] || translations.fr

    document.getElementById("mainTitle").textContent = langData.mainTitle

    document.getElementById("slide1_h2").textContent = langData.slide1_h2

    document.getElementById("slide1_p").textContent = langData.slide1_p
  }

  document.addEventListener("DOMContentLoaded", () => {
    const savedLang =
      localStorage.getItem("preferredLanguage") ||
      navigator.language.split("-")[0]

    setLanguage(savedLang in translations ? savedLang : "fr")

    document.querySelectorAll("button[data-lang]").forEach((btn) => {
      btn.addEventListener("click", () => {
        setLanguage(btn.dataset.lang)
      })
    })
  })
</script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)