added form validations

public/index.html

@@ -33,16 +33,19 @@
             <h3>Please select an option</h3>
           </div>
           <div>
-            <input onclick="handleTextRadioClick()" type="radio" id="huey" name="drone" value="huey" checked>
-            <label for="huey">I will enter text manually.</label></div>
+            <input onclick="handleTextRadioClick()" type="radio" id="manual" name="text-input-option" value="manual"
+              checked>
+            <label for="manual">I will enter text manually.</label></div>
           <div>
-            <input onclick="handleTextRadioClick()" type="radio" id="dewey" name="drone" value="dewey">
-            <label for="dewey">I have already calculated the text length.</label>
+            <input onclick="handleTextRadioClick()" type="radio" id="calculated" name="text-input-option"
+              value="calculated">
+            <label for="calculated">I have already calculated the text length.</label>
           </div>
           <div id="character-calculation-wrapper">
             <div>
               <textarea oninput="handleTextAreaChange()" placeholder="Enter text here..." class="box-input"
                 name="textarea" id="manual-text-entry" cols="90" rows="5" value=""></textarea>
+              <div id="textarea-validation" style="color: red;display: none;">Please enter text</div>
             </div>
             <div>
               <label for="calculatedTextCharacters">Total characters in text: </label>
@@ -54,25 +57,30 @@
             <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" style="color: red;display: none;">Please enter number of characters.</div>
           </div>
         </div>
         <div>
-          <label for="readerLevel">Select reader level:</label>
-          <select class="box-input" id="readerLevel">
+          <label for="readerLevel">Reader Level:</label>
+          <select class="box-input" id="readerLevel" onchange="readerLevelChangeEvent(event)">
+            <option value="">Select level</option>
             <option value="First Year">First Year</option>
             <option value="Second Year">Second Year</option>
             <option value="Third Year">Third Year</option>
             <option value="Fourth Year">Fourth Year</option>
           </select>
+          <div id="readerLevel-validation" style="color: red;display: none;">Please enter number of characters.</div>
         </div>
         <div>
-          <label for="readerLevel">Select category of the reader:</label>
-          <select class="box-input" id="readerLevel">
+          <label for="readerCategory">Reader Category:</label>
+          <select class="box-input" id="readerCategory" onchange="readerCategoryChangeEvent(event)">
+            <option value="">Select category</option>
             <option value="Mixed-ability group">Mixed-ability group</option>
             <option value="High-ability group">High-ability group</option>
             <option value="Good-ability group">Good-ability group</option>
             <option value="Average-ability group">Average-ability group</option>
           </select>
+          <div id="readerCategory-validation" style="color: red;display: none;">Please enter number of characters.</div>
         </div>
         <div>
           <div>
@@ -87,7 +95,7 @@
               <button onclick="showFeedbackForm()">Feedback</button>
             </div>
           </div>
-          
+
         </div>
         <div id="feedback-form" style="display: none;">
           <div class="title" style="padding-bottom: 12px; border-bottom: 1px solid #dddddd; margin-bottom: 10px;">
@@ -122,9 +130,10 @@
       </section>
     </section>
 
+    <script src="index.js" type="text/javascript"> </script>
+
     <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
     <script src="settings.js"> </script>
-    <script src="index.js"> </script>
 </body>
 
 </html>
\ No newline at end of file

public/index.js

-let inputObj = {};
+let inputObj = {
+    textChoice: 'manual',
+    text: '',
+    textLength: '',
+    readerLevel: '',
+    readerCategory: ''
+};
 
 function handleTextRadioClick() {
-    let textChoice = document.querySelector('input[name="drone"]:checked').value;
+    let textChoice = document.querySelector('input[name="text-input-option"]:checked').value;
     console.log(textChoice);
+    inputObj.textChoice = textChoice;
     toggleElement('character-calculation-wrapper');
     toggleElement('manual-character-input');
 }
@@ -19,6 +26,7 @@ function toggleElement(id) {
 function handleTextAreaChange() {
     let value = document.getElementById("manual-text-entry").value;
     value = value.trim();
+    inputObj.text = value;
     let characters = value.split(' ').join('').length;
     setCharacterLength(characters);
     document.getElementById("calculatedTextCharacters").setAttribute('value', characters)
@@ -30,16 +38,59 @@ function handleCharacterInputChange() {
 }
 
 function setCharacterLength(characters) {
-    inputObj.characters = characters;
-    console.log('Character length: ' + inputObj.characters);
+    inputObj.textLength = characters;
+    console.log('Character length: ' + inputObj.textLength);
 }
 
 function calculateReadingTime() {
+    let isFormValid = validateForm();
     let x = document.getElementById('calculate-time-element');
     x.style.display = "block";
 }
 
+function validateForm() {
+    let invalidFields = 0;
+    if (inputObj.textChoice === 'manual' && inputObj.text === '') {
+        invalidFields++;
+        document.getElementById('textarea-validation').style.display = 'block';
+    } else {
+        document.getElementById('textarea-validation').style.display = 'none';
+    }
+
+    if (inputObj.textChoice === 'calculated' && (inputObj.textLength === '' || inputObj.textLength === 0)) {
+        invalidFields++;
+        document.getElementById('textCharacters-validation').style.display = 'block';
+    } else {
+        document.getElementById('textCharacters-validation').style.display = 'none';
+    }
+
+    if (inputObj.readerLevel === '') {
+        invalidFields++;
+        document.getElementById('readerLevel-validation').style.display = 'block';
+    } else {
+        document.getElementById('readerLevel-validation').style.display = 'none';
+    }
+
+    if (inputObj.readerCategory === '') {
+        invalidFields++;
+        document.getElementById('readerCategory-validation').style.display = 'block';
+    } else {
+        document.getElementById('readerCategory-validation').style.display = 'none';
+    }
+    
+}
+
 function showFeedbackForm() {
     let x = document.getElementById('feedback-form');
     x.style.display = "block";
 }
+
+function readerLevelChangeEvent(event) {
+    console.log(event.target.value)
+    inputObj.readerLevel = event.target.value;
+}
+
+function readerCategoryChangeEvent(event) {
+    console.log(event.target.value)
+    inputObj.readerCategory = event.target.value;
+}