"Added spellcheck attribute to textarea, error list display, and lang…

…uageTool.js script inclusion"

assets/js/languageTool.js

@@ -0,0 +1,38 @@
+async function checkGrammar(text, language) {
+    const response = await fetch('https://api.languagetool.org/v2/check', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: new URLSearchParams({
+            'text': text,
+            'language': language, // 'ar' for Arabic, 'en' for English
+        })
+    });
+
+    const data = await response.json();
+    displayGrammarErrors(data.matches);
+}
+
+function displayGrammarErrors(matches) {
+    const errorList = document.getElementById('errorList');
+    errorList.innerHTML = ''; // Clear previous errors
+
+    matches.forEach(match => {
+        const errorItem = document.createElement('li');
+        errorItem.textContent = `${match.message} - اقتراح: ${match.replacements.map(rep => rep.value).join(', ')}`;
+        errorList.appendChild(errorItem);
+    });
+}
+
+let typingTimer;               
+const doneTypingInterval = 2000;
+
+document.getElementById('essayInput').addEventListener('input', function() {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(() => {
+        const text = document.getElementById('essayInput').value;
+        const language = /[\u0600-\u06FF]/.test(text) ? 'ar' : 'en'; // Detect Arabic characters
+        checkGrammar(text, language);
+    }, doneTypingInterval);
+});

essay-tool.html

@@ -143,7 +143,9 @@ <h1>كتابة مقال</h1>
                     <input type="text" name="essayTitle" id="titleInput" placeholder="اكتب عنوان المقال" />
 
                     <label for="essayContent">محتوى المقال:</label>
-                    <textarea id="essayInput" name="essayContent" rows="10" cols="50" oninput="updateCounts()"></textarea>
+                    <textarea id="essayInput" name="essayContent" rows="10" cols="50" oninput="updateCounts()" spellcheck="true"></textarea>
+                    <h3>الأخطاء الإملائية:</h3>
+                    <ul id="errorList" style="list-style: none; color: red;"></ul>
                     <hr>
                     <label for="selectedFile">ملف المقال:</label>
                     <p>إذا كان لديك ملف سابق يمكنك التعديل عليه، قم بإدراجه ادناه وانقر على "إدراج مقال".</p>
@@ -192,6 +194,7 @@ <h3>سجل المقالات</h3>
             </div>
         </footer>
 
+        <script src="assets/js/languageTool.js"></script>
         <script>
             let fileHistory = [];