Added Grammar Check

Author: angelabera

index.html

@@ -54,13 +54,22 @@ <h2>Resume Details</h2>
         <input type="url" id="input-github" placeholder="github.com/john" />
         <span class="error-message" id="error-github"></span>
       </div>
+      
       <div class="form-group">
-        <label for="input-about">Professional Summary</label>
-        <textarea id="input-about" placeholder="Passionate developer with 3 years of experience..."
-          maxlength="300"></textarea>
-        <span class="char-count" id="charCount-input-about"></span>
-        <span class="error-message" id="error-about"></span>
-      </div>
+  <label for="input-about">Professional Summary</label>
+  <textarea id="input-about" placeholder="Passionate developer with 3 years of experience..." maxlength="300"></textarea>
+  <span class="char-count" id="charCount-input-about"></span>
+  <span class="error-message" id="error-about"></span>
+
+  <!-- 💡 Grammar Improve Button -->
+  <button type="button" class="improve-btn" onclick="improveText('input-about')">
+    💡 GrammarCheck
+  </button>
+
+  <!-- 🌟 Suggestion Output -->
+  <div id="suggestion-input-about" class="suggestion-box"></div>
+</div>
+
 
       <!-- Education -->
       <div class="form-group fade-in">

script.js

@@ -507,3 +507,70 @@ function clearAndReload() {
   sessionStorage.clear();        
   window.location.reload();
 }
+
+async function improveText(textareaId) {
+  const textarea = document.getElementById(textareaId);
+  const suggestionBox = document.getElementById(`suggestion-${textareaId}`);
+  let text = textarea.value;
+
+  // Show loading state
+  suggestionBox.classList.add("loading");
+  suggestionBox.style.display = "block";
+  suggestionBox.innerText = "Checking for improvements...";
+
+  try {
+    let improved = text;
+    let hasMoreErrors = true;
+    let safetyCounter = 0; // Avoid infinite loop
+
+    while (hasMoreErrors && safetyCounter < 5) {
+      const response = await fetch("https://api.languagetool.org/v2/check", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded"
+        },
+        body: new URLSearchParams({
+          text: improved,
+          language: "en-US"
+        })
+      });
+
+      const data = await response.json();
+      const matches = data.matches;
+
+      if (matches.length === 0) {
+        hasMoreErrors = false;
+        break;
+      }
+
+      // Fix matches from last to first
+      matches
+        .sort((a, b) => b.offset - a.offset)
+        .forEach(match => {
+          if (match.replacements.length > 0) {
+            const replacement = match.replacements[0].value;
+            improved =
+              improved.slice(0, match.offset) +
+              replacement +
+              improved.slice(match.offset + match.length);
+          }
+        });
+
+      safetyCounter++;
+    }
+
+    suggestionBox.classList.remove("loading");
+
+    if (improved !== text) {
+      suggestionBox.innerHTML = `✨ <strong>Suggested:</strong> "${improved}"`;
+    } else {
+      suggestionBox.innerText = "✅ Your text looks good!";
+    }
+
+  } catch (error) {
+    suggestionBox.classList.remove("loading");
+    suggestionBox.innerText = "❌ Error checking grammar.";
+    console.error(error);
+  }
+}
+

style.css

@@ -307,24 +307,51 @@ main {
 /* Responsive Footer */
 
 .footer {
-  background-color: #f1f1f1; /* light mode background */
-  color: #333;
+  background-color: #f1f1f1;
 }
 
 .footer-link {
-  color: #333;
+  color: #b21d1d;
   text-decoration: none;
 }
 
 body.dark .footer {
-  background-color: #1a1a1a;  /* darker shade for footer in dark mode */
+  background-color: #1a1a1a;  
   color: #eee;
-  border-top: 1px solid #444;  /* subtle top border */
-  box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.05); /* soft top glow effect */
+  border-top: 1px solid #444; 
+  box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.05); 
 }
 
 body.dark .footer-link {
-  color: #ffcc00; /* dark yellow for better contrast */
+  color: #ffcc00; 
+}
+
+.improve-btn {
+  margin-top: 8px;
+  background: none;
+  border: none;
+  color: #007BFF;
+  cursor: pointer;
+  font-size: 14px;
+  text-decoration: underline;
+  display: inline-block;
+}
+
+.suggestion-box {
+  margin-top: 10px;
+  font-size: 14px;
+  color: green;
+  background: #e9fbe9;
+  padding: 10px;
+  border-left: 4px solid green;
+  border-radius: 4px;
+  display: none;
+}
+
+.suggestion-box.loading {
+  color: gray;
+  font-style: italic;
+  display: block;
 }