OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Toggling between languages with JS

  • Thread starter Thread starter mosaiic
  • Start date Start date
M

mosaiic

Guest
I am trying to create a website that can switch languages from English to French by clicking on the toggle button. I tried a few ways without Javascript because I don't know much, and only with CSS but never found the result I wanted.

Only The <h2 class="title">welcome!</h2>changes to "yoohoo les nazes", but the rest does not change.

Can anyone help?


Code:
document.querySelector('#togBtn').addEventListener('input', (event) => {
  document.querySelector('.title', '.1', '.2', '.3', '.4', '.5').textContent = data[event.currentTarget.checked ? 'francais' : 'english'].title;
  .1;
});
var data = {
  "english": {
    "title": "welcome!",
    "1": "My work is primarily inspired by nature.",
    "2": "Each creation is unique.",
    "3": "The white porcelain I use",
    "4": "I studied and graduated",
    "5": "I wish to thank"
  },
  "francais": {
    "title": "yoohoo les nazes",
    "1": "Mon travail est d'abord inspiré sur la nature.",
    "2": "chaque création est unique.",
    "3": "La porcelaine blanche que j'utilise",
    "4": "j'ai étudiée et sui diplômée",
    "5": "j'aimerai remercier"
  }
}

Code:
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: brown;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: burlywood;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(45px);
}

.slider {
  border-radius: 34px;
}

.slider:before {
  border-radius: 50%;
}

.on {
  display: none;
}

.on,
.off {
  color: white;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+.slider .on {
  display: block;
}

input:checked+.slider .off {
  display: none;
}

Code:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Whisper&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<label class="switch">       
  <input type="checkbox" id="togBtn">       
  <div class="slider round">         
    <span language='english' class="on">EN</span>         
    <span language='francais' class="off">FR</span>       
  </div>     
</label>
<ul class="nav-items">
  <div class="content">
    <h2 class="title">welcome!</h2>
    <p class="1">My work is primarily inspired by nature.</p>
    <p class="2">Each creation is unique.</p>
    <p class="3">The white porcelain I use</p>
    <p class="4">I studied and graduated </p>
    <p class="5">I wish to thank</p>
  </div>
</ul>

<p>I am trying to create a website that can switch languages from English to French by clicking on the toggle button. I tried a few ways without Javascript because I don't know much, and only with CSS but never found the result I wanted.</p>
<p>Only The <code><h2 class="title">welcome!</h2></code>changes to <code>"yoohoo les nazes"</code>, but the rest does not change.</p>
<p>Can anyone help?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('#togBtn').addEventListener('input', (event) => {
document.querySelector('.title', '.1', '.2', '.3', '.4', '.5').textContent = data[event.currentTarget.checked ? 'francais' : 'english'].title;
.1;
});
var data = {
"english": {
"title": "welcome!",
"1": "My work is primarily inspired by nature.",
"2": "Each creation is unique.",
"3": "The white porcelain I use",
"4": "I studied and graduated",
"5": "I wish to thank"
},
"francais": {
"title": "yoohoo les nazes",
"1": "Mon travail est d'abord inspiré sur la nature.",
"2": "chaque création est unique.",
"3": "La porcelaine blanche que j'utilise",
"4": "j'ai étudiée et sui diplômée",
"5": "j'aimerai remercier"
}
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.switch {
position: relative;
display: inline-block;
width: 80px;
height: 34px;
}

.switch input {
display: none;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: brown;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked+.slider {
background-color: burlywood;
}

input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(45px);
}

.slider {
border-radius: 34px;
}

.slider:before {
border-radius: 50%;
}

.on {
display: none;
}

.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked+.slider .on {
display: block;
}

input:checked+.slider .off {
display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Whisper&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span language='english' class="on">EN</span>
<span language='francais' class="off">FR</span>
</div>
</label>
<ul class="nav-items">
<div class="content">
<h2 class="title">welcome!</h2>
<p class="1">My work is primarily inspired by nature.</p>
<p class="2">Each creation is unique.</p>
<p class="3">The white porcelain I use</p>
<p class="4">I studied and graduated </p>
<p class="5">I wish to thank</p>
</div>
</ul></code></pre>
</div>
</div>
</p>
 

Latest posts

I
Replies
0
Views
1
Isaac P. Liu
I
U
Replies
0
Views
1
user3658366
U
G
Replies
0
Views
1
Giampaolo Levorato
G
M
Replies
0
Views
1
Marcelo Rodrigo Nascimento
M
Top