feat: Google Translate Dropdown

src/css/style.css

@@ -1149,3 +1149,5 @@ a:focus {
     flex-direction: row;
   }
 }
+
+

src/data/contributors.json

@@ -286,7 +286,7 @@
     "name": "Karthikeya"
   },
   {
-    "name" : "Veda Varshit"
+    "name": "Veda Varshit"
   },
   {
     "name": "Veekshitha Nelluru"
@@ -300,6 +300,9 @@
   {
     "name": "Siddhant Prasad"
   },
+  {
+    "name": "Tanchuoi"
+  },
   {
     "name": "Maram Shanmukha Siva Sekhar Yeswanth"
   },

src/index.html

@@ -32,6 +32,12 @@
   <meta name="twitter:image" content="/img/logo.webp" />
   <meta name="twitter:image:alt" content="Hacktoberfest Logo" />
 
+
+  <!-- Google Translate -->
+  <script type="text/javascript"
+    src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+
+
   <!-- Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-G6EQC4D6KY"></script>
   <script>
@@ -80,11 +86,27 @@
     </button>
 
     <nav id="headerControls" class="header-controls">
+
+      <button id="surpriseButton" class="contact-btn" aria-label="Contact">
+        <a href="tos.html">ToS</a>
+      </button>
+      <button id="aboutUsButton" class="about-us-btn" aria-label="About Us">
+        <a href="#about-us-section">About Us</a>
+      </button>
+      <button id="surpriseButton" class="surprise-btn" aria-label="Surprise Me!">
+        Surprise Me!
+      </button>
+      <button id="surpriseButton" class="contact-btn" aria-label="Contact">
+        <a href="form.html">Contact</a>
+      </button>
+      <div id="google_translate_element"></div>
+
       <button class="contact-btn" aria-label="ToS" onclick="window.location.href='tos.html';">ToS</button>
       <button class="about-us-btn" aria-label="About Us" onclick="window.location.href='#about-us-section';">About
         Us</button>
       <button class="surprise-btn" aria-label="Surprise Me!">Surprise Me!</button>
       <button class="contact-btn" aria-label="Contact" onclick="window.location.href='form.html';">Contact</button>
+
       <button id="toggleButton" class="toggle-btn" aria-label="Toggle theme"></button>
     </nav>
 

src/js/app.js

@@ -399,3 +399,9 @@ document.addEventListener('DOMContentLoaded', function() {
     headerControls.classList.toggle('show');
   });
 });
+
+
+// Google Translate
+function googleTranslateElementInit() {
+  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
+}