47 lines
2.1 KiB
JavaScript
47 lines
2.1 KiB
JavaScript
function analyseText(text) {
|
|
const zeichen = text.length;
|
|
const woerter = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
|
|
const grossbuchstaben = (text.match(/[A-ZÄÖÜ]/g) || []).length;
|
|
const saetze = (text.match(/[.!?]+/g) || []).length;
|
|
|
|
return { zeichen, woerter, grossbuchstaben, saetze };
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const container = document.querySelector(".page") || document.querySelector(".page-hero");
|
|
|
|
const ui = document.createElement("div");
|
|
ui.className = "page";
|
|
ui.innerHTML = `
|
|
<textarea id="ta-input" rows="6" placeholder="Text hier eingeben…" style="width:100%;padding:1rem;font-family:'Barlow',sans-serif;font-size:1rem;background:rgba(255,255,255,0.05);color:inherit;border:1px solid rgba(255,255,255,0.15);resize:vertical;margin-bottom:1rem;"></textarea>
|
|
<a class="btn" id="ta-btn" href="#">Analysieren</a>
|
|
<div id="ta-ergebnis" style="margin-top:2rem;display:none;">
|
|
<hr>
|
|
<div class="cards" style="margin-top:1.5rem;">
|
|
<div class="card"><div class="num" id="r-zeichen">0</div><h3>Zeichen</h3></div>
|
|
<div class="card"><div class="num" id="r-woerter">0</div><h3>Wörter</h3></div>
|
|
<div class="card"><div class="num" id="r-gross">0</div><h3>Großbuchstaben</h3></div>
|
|
<div class="card"><div class="num" id="r-saetze">0</div><h3>Sätze</h3></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
container.insertAdjacentElement("afterend", ui);
|
|
|
|
document.getElementById("ta-btn").addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
const text = document.getElementById("ta-input").value;
|
|
|
|
if (text.trim() === "") {
|
|
alert("Bitte gib einen Text ein.");
|
|
return;
|
|
}
|
|
|
|
const { zeichen, woerter, grossbuchstaben, saetze } = analyseText(text);
|
|
document.getElementById("r-zeichen").textContent = zeichen;
|
|
document.getElementById("r-woerter").textContent = woerter;
|
|
document.getElementById("r-gross").textContent = grossbuchstaben;
|
|
document.getElementById("r-saetze").textContent = saetze;
|
|
document.getElementById("ta-ergebnis").style.display = "block";
|
|
});
|
|
});
|