01_grundlagen/uebungen/o02_palindrom.html

@@ -36,10 +36,53 @@
             <li>Leerzeichen und Satzzeichen sollen ignoriert werden.</li>
           </ul>
         </div>
+
+        <form name="palindrom">
+          <div class="row align-items-center">
+            <div class="col-auto">
+              <label for="input-text">String</label>
+            </div>
+            <div class="col">
+              <input type="text" name="input-text" id="input-text" class="form-control" />
+            </div>
+
+            <div class="col">
+              <button type="submit" class="btn btn-primary">Check</button>
+            </div>
+          </div>
+        </form>
+
+        <div class="output alert alert-secondary my-3"></div>
       </div>
     </main>
     <script>
       'use strict';
+
+      const outputEl = document.querySelector('.output');
+      const form = document.forms['palindrom'];
+      const textEl = form['input-text'];
+      const letters = 'abcdefghijklmnopqrstuvwxyz';
+
+      const isPalindrom = (text) => {
+        // alle nicht buchstaben aussortieren
+        const textArray = text
+          .toLowerCase()
+          .split('')
+          .filter((string) => letters.includes(string));
+
+        return textArray.join('') === [...textArray].reverse().join('');
+      };
+
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+
+        if (textEl.value.length < 2) {
+          outputEl.innerText = 'Text muss mindestens 2 Zeichen lang sein';
+          return;
+        }
+
+        outputEl.innerText = `"${textEl.value}" ist ${isPalindrom(textEl.value) ? '' : 'k'}ein Palindrom`;
+      });
     </script>
   </body>
 </html>