Toggle translation when available. Bacground colors reviewed.

script.js

@@ -8,6 +8,9 @@ const loader = document.getElementById('loader');
 
 const sourceLangQuotes = 'en';
 let targetLangQuotes = 'en';
+let sourceLangText = '';
+let targetLangtext = '';
+let isTranslated = false;
 let quotes = [];
 
 function showLoadingSpinner() {
@@ -53,16 +56,28 @@ function initializeLangForTranslateBtn() {
 }
 
 async function translateQuote() {
-  // Thanks to https://codepen.io/junior-abd-almaged/pen/gQEbRv
-  var sourceText = quoteText.textContent;
-  const translateUrl = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=" + sourceLangQuotes + "&tl=" + targetLangQuotes + "&dt=t&q=" + encodeURI(sourceText);
-  try {
-    const response = await fetch(translateUrl);
-    showLoadingSpinner();
-    const translated = await response.json();
-    quoteText.textContent = translated[0].reduce((acc, line) => acc + line[0], '',);
-  } catch (error) {
-    console.log("Failed to translate quote: " + error);
+  if (isTranslated) {
+    quoteText.textContent = sourceLangText;
+    isTranslated = false;
+  } else {
+    if (sourceLangText === quoteText.textContent) {
+      quoteText.textContent = targetLangtext;
+    } else {
+      // Thanks to https://codepen.io/junior-abd-almaged/pen/gQEbRv
+      sourceLangText = quoteText.textContent;
+      const translateUrl = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=" + sourceLangQuotes + "&tl=" + targetLangQuotes + "&dt=t&q=" + encodeURI(sourceLangText);
+      try {
+        const response = await fetch(translateUrl);
+        showLoadingSpinner();
+        const translated = await response.json();
+        targetLangtext = translated[0].reduce((acc, line) => acc + line[0], '',);
+        quoteText.textContent = targetLangtext;
+
+      } catch (error) {
+        alert("Failed to translate quote: " + error);
+      }
+    }
+    isTranslated = true;
   }
   removeLoadingSpinner();
 }

style.css

@@ -2,19 +2,19 @@
 
 
 /* 
+
 Backgroung color:
-https://youtu.be/f3mwKLXpOLk?feature=shared 
-https://www.makeuseof.com/css-background-gradients/
+* https://youtu.be/f3mwKLXpOLk?feature=shared 
+* https://www.makeuseof.com/css-background-gradients/
+
 */
 
 :root {
   --gradient: linear-gradient(45deg,
       #5e75c2,
-      #1b2d9d,
-      #ff6f91,
-      #ff9671,
-      #ffc75f,
-      #f9f871);
+      #718dff,
+      #5fcfff,
+      #3c92be);
 }
 
 html {
@@ -30,7 +30,7 @@ body {
   background-size: 400%;
   background-image: var(--gradient);
   /* background-image: linear-gradient(to right, #b6fbff, #83a4d4); */
-  animation: bg-animation 120s infinite;
+  animation: bg-animation 160s infinite;
 
   font-family: 'Amaranth', sans-serif;
   font-weight: 300;