Analizator tekstu z czasem czytania

<main class="text-tool"><header><h1>Tekst w liczbach.</h1><p>Wklej tekst, aby policzyć słowa i znaki.</p></header><div class="text-grid"><section><label for="text-input">Tekst (maks. 20 000 znaków)</label><textarea id="text-input" rows="9" maxlength="20000" spellcheck="false">Prosty tekst ma wyraźny cel. Krótkie zdania pomagają czytać.</textarea><button id="clear-text" type="button" class="secondary">Wyczyść tekst</button></section><aside><dl><div><dt>Słowa</dt><dd id="words">10</dd></div><div><dt>Znaki</dt><dd id="characters">58</dd></div><div><dt>Akapity</dt><dd id="paragraphs">1</dd></div></dl><p id="reading">Około 1 min czytania</p><p class="note">Szacunek:<br>200 słów/min.</p></aside></div><p id="status" class="status" role="status"></p></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#fff8ef;color:#5c3b24;--accent:#976431}.text-tool{max-width:820px}.text-tool h1{font-family:Georgia,serif;font-weight:400;font-size:44px}.text-tool header{border-bottom:1px solid #b89369;margin-bottom:22px}.text-grid{display:grid;grid-template-columns:1fr 200px;gap:30px}.text-grid textarea{background:#fffdfa!important;border-color:#a58b71!important}.text-grid button{margin-top:12px}.text-grid aside{border-left:1px solid #b89369;padding-left:25px}.text-grid dl{margin:0}.text-grid dl div{border-bottom:1px solid #dcc4a6;padding:6px 0 12px;margin-bottom:14px}.text-grid dt{font-size:14px}.text-grid dd{font:42px/1.1 Georgia,serif;margin:3px 0 0}.text-grid aside p{font-size:14px}@media(max-width:560px){.text-grid{grid-template-columns:1fr}.text-grid aside{border-left:0;padding:0}.text-grid dl{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.text-tool h1{font-size:33px}.text-grid textarea{min-height:190px}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const update=()=>{const text=q('#text-input').value.trim();const words=text?text.split(/\s+/u).length:0,paragraphs=text?text.split(/\n\s*\n/u).filter(p=>p.trim()).length:0;q('#words').textContent=words;q('#characters').textContent=q('#text-input').value.length;q('#paragraphs').textContent=paragraphs;q('#reading').textContent=words?'Około '+Math.ceil(words/200)+' min czytania':'Brak tekstu do przeczytania';q('#status').textContent=''};q('#text-input').oninput=update;q('#clear-text').onclick=()=>{q('#text-input').value='';update();q('#status').textContent='Tekst wyczyszczony.';q('#text-input').focus()};update();})();