89 lines
3.1 KiB
HTML
89 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Übung optional 02: Palindrom Checker</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="container py-5">
|
|
<div class="alert alert-primary">
|
|
<h2>Übung 02 optional: Palindrom Checker</h2>
|
|
|
|
<p>
|
|
Ein Palindrom ist ein Wort, das vorwärts und rückwärts gelesen dasselbe ist. Ein guter Weg, um das zu
|
|
überprüfen, ist, das Wort umzukehren und zu sehen, ob es dem Original entspricht. Allerdings sollte man
|
|
dabei die Groß- und Kleinschreibung sowie Leerzeichen oder Sonderzeichen berücksichtigen.
|
|
</p>
|
|
<p>
|
|
Schreibe eine JavaScript-Funktion namens <code>isPalindrom</code>, die eine Zeichenkette (string) als
|
|
Eingabe akzeptiert. Die Funktion soll <code>true</code> zurückgeben, wenn es sich bei der Zeichenkette um
|
|
ein Palindrom handelt, und <code>false</code> andernfalls.
|
|
</p>
|
|
<h3>Beispiele:</h3>
|
|
<ul>
|
|
<li>"anna"</li>
|
|
<li>"Lagerregal"</li>
|
|
<li>"Ein Esel lese nie"</li>
|
|
</ul>
|
|
<h3>Anforderungen:</h3>
|
|
<ul>
|
|
<li>
|
|
Die Funktion soll nicht zwischen Groß- und Kleinschreibung unterscheiden (z. B. 'Anna' ist ein Palindrom).
|
|
</li>
|
|
<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>
|