Fixed Issue #5

script.js

@@ -24,8 +24,13 @@ function checkDigits(digits, tabName) {
     if (sum === 7) {
         showCongratulations(tabName);
     } else {
-        showAlert('Try again!', tabName);
-        showAlert('hint: addition of numbers', tabName);
+        showAlert(['Try again!'], tabName);
+        // Only show hint if the number of inputs taken is more than 1
+        if (digits.length > 1) {
+
+            showAlert(['Try again!', 'hint: addition of numbers'], tabName);
+        }
+        // showAlert('hint: addition of numbers', tabName);
     }
 }
 
@@ -49,17 +54,30 @@ function showCongratulations(tabName) {
 }
 
 // Function to show alert message
-function showAlert(message, tabName) {
+function showAlert(messages, tabName) {
     var tab = document.getElementById(tabName);
-    tab.innerHTML = '<div class="animate__animated animate__shakeX">' +
-                    message +
-                    '</div>';
+    var content = '<div class="alert-messages">';
+
+    // Create content for each message
+    for (var i = 0; i < messages.length; i++) {
+        content += '<span class="animate__animated animate__shakeX">' + messages[i] ;
+
+        if (i < messages.length - 1) {
+            content += '<br>';
+        }
+    }
+
+    content += '</div>';
+
+    tab.innerHTML = content;
+
     setTimeout(function() {
         tab.innerHTML = '';
         setupTabContent(tabName);
     }, 2000); // Display the alert for 2 seconds
 }
 
+
 // Setup tab content after the congratulations or alert message
 function setupTabContent(tabName) {
     if (tabName === 'oneDigit') {

styles.css

@@ -46,6 +46,16 @@ h1 {
     background-color: #007bff;
     color: white;
 }
+.alert-messages {
+    display: flex;
+    flex-direction: column;  /* Stack messages vertically */
+    align-items: center;     /* Center messages horizontally */
+}
+
+.alert-messages span {
+    margin: 1 5px;
+    /* Adds a small gap between messages */
+}
 
 .tabContent {
     display: flex;