0){i.textContent=T?T.emptyScript:"";for(let _=0;_<$;_++)i.append(a[_],w()),m.nextNode(),h.push({type:2,index:++o});i.append(a[$],w())}}}else if(i.nodeType===8)if(i.data===X)h.push({type:2,index:o});else{let a=-1;for(;(a=i.data.indexOf(f,a+1))!==-1;)h.push({type:7,index:o}),a+=f.length-1}o++}}static createElement(t,e){const s=y.createElement("template");return s.innerHTML=t,s}}function E(n,t,e=n,s){if(t===v)return t;let i=s!==void 0?e._$Co?.[s]:e._$Cl;const o=P(t)?void 0:t._$litDirective$;return i?.constructor!==o&&(i?._$AO?.(!1),o===void 0?i=void 0:(i=new o(n),i._$AT(n,e,s)),s!==void 0?(e._$Co??=[])[s]=i:e._$Cl=i),i!==void 0&&(t=E(n,i._$AS(n,t.values),i,s)),t}class mt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??y).importNode(e,!0);m.currentNode=i;let o=m.nextNode(),r=0,p=0,h=s[0];for(;h!==void 0;){if(r===h.index){let c;h.type===2?c=new x(o,o.nextSibling,this,t):h.type===1?c=new h.ctor(o,h.name,h.strings,this,t):h.type===6&&(c=new Et(o,this,t)),this._$AV.push(c),h=s[++p]}r!==h?.index&&(o=m.nextNode(),r++)}return m.currentNode=y,i}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class x{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=E(this,t,e),P(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==v&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):$t(t)?this.k(t):this._(t)}S(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t))}_(t){this._$AH!==d&&P(this._$AH)?this._$AA.nextSibling.data=t:this.T(y.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=U.createElement(et(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const o=new mt(i,this),r=o.u(this.options);o.p(e),this.T(r),this._$AH=o}}_$AC(t){let e=K.get(t.strings);return e===void 0&&K.set(t.strings,e=new U(t)),e}k(t){Y(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new x(this.S(w()),this.S(w()),this,this.options)):s=e[i],s._$AI(o),i++;i >>1,Y=C[H];if(0
+ Press n or j to go to the next uncovered block, b, p or k for the previous block.
+ All files AddItemForm.js
+
+
+
+
+ 1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28
+29
+30
+31
+32
+33
+34
+35
+36
+37
+38
+39
+40
+41
+42
+43
+44
+45
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ const AddItemForm = ({ onAdd }, { useState, useStyle, html, css }) => {
+ console.log("AddItemForm", onAdd);
+ const [inputValue, setInputValue] = useState("");
+
+ useStyle(css`
+ button {
+ background-color: #029cfd;
+ border: none;
+ border-radius: 5px;
+ color: white;
+ padding: 5px 10px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ cursor: pointer;
+ }
+ `);
+
+ const handleInput = (e) => {
+ e.preventDefault();
+ setInputValue(e.target.value);
+ };
+
+ const clearInput = () => {
+ setInputValue("");
+ };
+
+ const addTodo = () => {
+ onAdd(inputValue);
+ clearInput();
+ };
+
+ return html`
+ <input
+ type="text"
+ placeholder="Add todo"
+ .value="${inputValue}"
+ @change="${handleInput}"
+ />
+ <button @click="${addTodo}">Add</button>
+ <button @click="${clearInput}">Clear</button>
+ `;
+};
+
+export default AddItemForm;
All files Button.ts
+
+
+
+