added missing validations and other changes

public/index.html

@@ -54,9 +54,10 @@
             <label for="inputTextCharacters">Enter number of characters: </label>
             <input oninput="handleCharacterInputChange()" placeholder="e.g. 120" class="box-input" type="number"
               id="inputTextCharacters" name="inputTextCharacters" value="">
-            <div id="textCharacters-validation" class="error-message">Please enter number the of characters.</div>
+            <div id="textCharacters-validation" class="error-message">Please enter the number of characters.</div>
           </div>
-          <div id="min-count-validation" class="error-message">Please enter minimum number the of characters.</div>
+          <div id="min-count-100-validation" class="error-message">Please enter more than 100 alphabetic characters.</div>
+          <div id="min-count-400-validation" class="error-message">Please enter more than 400 alphabetic characters.</div>
           <div class="more-information">
             <div>
               <h4> <span>&#9432;</span> Note</h4>
@@ -114,7 +115,10 @@
           </div>
           <div id="calculate-time-element" style="display: none;">
             <div class="title">
-              <h2>Estimated Reading Time(hh:mm:ss): <span id="reading-time-element"></span> hours</h2>
+              <h2><span><br>Estimated Reading Time(hh:mm:ss)
+                <br>
+                <span id="reading-time-element"></span>
+              </span></h2>
             </div>
             <div>
               Send your feedback on: behira.younes@univ-oran2.dz

public/index.js

@@ -36,6 +36,9 @@ function handleTextRadioClick() {
         document.getElementById('textCharacters-validation').style.display = 'none';
     }
 
+    document.getElementById('min-count-100-validation').style.display = 'none';
+    document.getElementById('min-count-400-validation').style.display = 'none';
+
     toggleElement('character-calculation-wrapper');
     toggleElement('manual-character-input');
 }
@@ -126,9 +129,16 @@ function isFormValid() {
 
     if ((inputObj.numberOfCharacters < 100 && (inputObj.schoolLevel === '1' || inputObj.schoolLevel === '2'))) {
         invalidFields++;
-        document.getElementById('min-count-validation').style.display = 'block';
+        document.getElementById('min-count-100-validation').style.display = 'block';
+    } else {
+        document.getElementById('min-count-100-validation').style.display = 'none';
+    }
+
+    if ((inputObj.numberOfCharacters < 400 && (inputObj.schoolLevel === '3' || inputObj.schoolLevel === '4'))) {
+        invalidFields++;
+        document.getElementById('min-count-400-validation').style.display = 'block';
     } else {
-        document.getElementById('min-count-validation').style.display = 'none';
+        document.getElementById('min-count-400-validation').style.display = 'none';
     }
 
     return invalidFields < 1