Edytor tagów z obsługą klawiatury

<main class="tags"><header><h1>Opisz projekt<br>kilkoma słowami.</h1><p>Enter dodaje tag. Backspace usuwa ostatni, gdy pole jest puste.</p></header><form id="tag-form"><label for="tag-input">Technologie lub tematy</label><div id="tag-list" class="tag-list" aria-label="Wybrane tagi"></div><div class="row"><input id="tag-input" maxlength="24" placeholder="Np. canvas" autocomplete="off"><button id="add-tag" type="button">Dodaj tag</button></div><p id="tag-status" class="status" role="status"></p><button id="save-tags" type="button" data-demo-submit class="secondary">Zapisz zestaw</button><output id="saved" class="status" aria-live="polite"></output></form></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:#edbd43;color:#282311;--accent:#40330b}.tags{max-width:760px}.tags header{border-bottom:3px solid #282311;margin-bottom:24px;padding-bottom:8px}.tags h1{font-family:Georgia,serif;font-size:clamp(32px,5vw,54px)}.tag-list{display:flex;flex-wrap:wrap;gap:8px;min-height:66px;padding:10px;border:1px solid #74601e;background:#fff2c6;margin-bottom:12px}.tag-list button{display:flex;align-items:center;gap:12px;background:#282311;color:#fff2c6;min-height:40px;padding:7px 10px}.tag-list span{font-size:20px}.tags .row{flex-wrap:nowrap}.tags .row input{min-width:0}.tags .row button{white-space:nowrap}.tags .secondary{border-width:2px}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];let tags=['HTML','CSS'];const render=()=>{const list=q('#tag-list');list.replaceChildren();tags.forEach((tag,i)=>{const b=document.createElement('button');b.type='button';b.textContent=tag+' ×';b.setAttribute('aria-label','Usuń tag '+tag);b.addEventListener('click',()=>{tags.splice(i,1);render()});list.append(b)});q('#tag-status').textContent=`Tagi: ${tags.length} / 8`;};const add=()=>{const value=q('#tag-input').value.trim().replace(/,+$/,'');if(!value)return;if(tags.some(t=>t.toLowerCase()===value.toLowerCase())){q('#tag-status').textContent='Ten tag już istnieje.';return}if(tags.length>=8){q('#tag-status').textContent='Limit wynosi 8 tagów.';return}tags.push(value);q('#tag-input').value='';q('#saved').textContent='';render();q('#tag-input').focus()};$('#add-tag').on('click',add);$('#tag-input').on('keydown',e=>{if(e.key==='Enter'||e.key===','){e.preventDefault();add()}else if(e.key==='Backspace'&&!e.target.value){tags.pop();render()}});$('#tag-form').on('submit',e=>{e.preventDefault();q('#saved').textContent=tags.length?'Zapisano: '+tags.join(', '):'Dodaj co najmniej jeden tag.'});render();all('form').forEach(form=>{const submit=form.querySelector('[data-demo-submit]');if(!submit)return;submit.addEventListener('click',()=>form.dispatchEvent(new Event('submit',{cancelable:true})));form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.defaultPrevented&&event.target.matches('input:not([type=radio]):not([type=checkbox])')){event.preventDefault();submit.click();}})});})();