Added new tab for words and a cool gif to celebrate.

index.html

@@ -15,13 +15,14 @@ <h1>Thala For A Reason</h1>
             <button class="tab active" onclick="showTab('oneDigit')">One Digit</button>
             <button class="tab" onclick="showTab('twoDigits')">Two Digits</button>
             <button class="tab" onclick="showTab('threeDigits')">Three Digits</button>
+            <button class="tab" onclick="showTab('anyWord')">Any word</button>
         </div>
 
         <div id="oneDigit" class="tabContent">
             <input type="text" id="singleDigit" placeholder="Type the Lucky number">
             <button onclick="checkOneDigit()">Submit</button>
         </div>
-        
+
         <div id="twoDigits" class="tabContent" style="display: none;">
             <input type="text" id="firstDigit" placeholder="First Lucky number">
             <input type="text" id="secondDigit" placeholder="Second Lucky number">
@@ -34,6 +35,12 @@ <h1>Thala For A Reason</h1>
             <input type="text" id="digitThree" placeholder="Third Lucky number">
             <button onclick="checkThreeDigits()">Submit</button>
         </div>
+
+        <div id="anyWord" class="tabContent" style="display: none;">
+            <input type="text" id="word" placeholder="Type the Lucky word/number">
+            <button onclick="checkWord()">Submit</button>
+        </div>
+
         <div id="link-icons" style="text-align: center; margin-top: 20px;">
             <a href="https://github.com/ankitkat042/ThalaForAReason" aria-label="Homepage" class="footer-octicon" title="GitHub">
                 <svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
@@ -47,3 +54,5 @@ <h1>Thala For A Reason</h1>
     <audio id="success-sound" src="music.mp3" preload="auto"></audio>
 </body>
 </html>
+
+

script.js

@@ -22,30 +22,30 @@ function checkDigits(digits, tabName) {
     var sum = digits.reduce(function(a, b) { return parseInt(a) + parseInt(b); }, 0);
 
     if (sum === 7) {
-        showCongratulations(tabName);
+        showCongratulations("",tabName);
     } else {
         showAlert('Try again!', tabName);
         showAlert('hint: addition of numbers', tabName);
     }
 }
 
 // Function to show congratulations message
-function showCongratulations(tabName) {
+function showCongratulations(message , tabName) {
     var tab = document.getElementById(tabName);
     tab.innerHTML = '<div class="animate__animated animate__zoomIn">' +
-                    'You Guessed It Correct!<br>' +
-                    'Thala for a reason❤' +
+                    'You Guessed It Correct!<br>' + message +
+                    ' Thala for a reason ❤' +
+                    '<br> <img src="./200.gif" alt="Thala-Gif" height="200" width="200"> '
                     '</div>';
 
     // Play the success sound
     var sound = document.getElementById('success-sound');
     sound.play();
-
     setTimeout(function() {
         tab.innerHTML = '';
         // Reset tab content after animation
         setupTabContent(tabName);
-    }, 5000); // Display the message for 5 seconds
+    }, 20000); // Display the message for 20 seconds
 }
 
 // Function to show alert message
@@ -75,6 +75,10 @@ function setupTabContent(tabName) {
                                                       '<input type="text" id="digitThree" placeholder="Third number">' +
                                                       '<button onclick="checkThreeDigits()">Submit</button>';
     }
+    else if(tabName === 'anyWord') {
+        document.getElementById(tabName).innerHTML = '<input type="text" id="word"               placeholder="Type the Lucky word/number">' +
+        '<button onclick="checkWord()">Submit</button>';
+    }
 }
 
 // Event listeners for the submit buttons
@@ -88,10 +92,14 @@ document.addEventListener('DOMContentLoaded', function() {
     document.getElementById('threeDigitsTab').addEventListener('click', function() {
         showTab('threeDigits');
     });
+    document.getElementById('anyWordTab').addEventListener('click', function() {
+        showTab('anyWord');
+    });
 
     setupTabContent('oneDigit');
     setupTabContent('twoDigits');
     setupTabContent('threeDigits');
+    setupTabContent('anyWord')
 });
 
 // Functions to check digits on submit
@@ -112,3 +120,24 @@ function checkThreeDigits() {
     var digitThree = document.getElementById('digitThree').value;
     checkDigits([digitOne, digitTwo, digitThree], 'threeDigits');
 }
+
+function checkWord() {
+    var word = document.getElementById('word').value;
+    var flag = 0;
+    if (isNaN(word)) {
+        flag += word.length;
+    }
+    else {
+        for(let i = 0; i<word.length; i++){
+            flag += parseInt(word.charAt(i)) ;
+        }
+        console.log(flag);
+    }
+
+    if (flag === 7) {
+        showCongratulations(word , 'anyWord');
+    }
+    else{
+        showAlert ('Not the lucky number','anyWord')
+    }
+}