chore: add multiple signals example

src/counter.ts

@@ -2,6 +2,7 @@ import { createEffect, createSignal } from './signals';
 
 export function setupCounter(element: HTMLDivElement) {
 	const [count, setCount] = createSignal(0);
+	const [name, setName] = createSignal('StyleShit');
 
 	const doubled = () => count() * 2;
 
@@ -10,11 +11,28 @@ export function setupCounter(element: HTMLDivElement) {
 	const countEl = element.querySelector<HTMLDivElement>('#count')!;
 	const doubledEl = element.querySelector<HTMLDivElement>('#count-doubled')!;
 
+	const nameInput = element.querySelector<HTMLInputElement>('#name')!;
+	const nameOutput = element.querySelector<HTMLSpanElement>('#name-output')!;
+
 	createEffect(() => {
 		countEl.innerHTML = `Count is ${count()}`;
 		doubledEl.innerHTML = `Doubled is ${doubled()}`;
 	});
 
+	createEffect(() => {
+		const value = name().trim();
+
+		if (value === '') {
+			nameOutput.innerHTML = 'Please enter your name';
+			return;
+		}
+
+		nameOutput.innerHTML = `Hello, ${value}`;
+	});
+
 	increment.addEventListener('click', () => setCount(count() + 1));
 	reset.addEventListener('click', () => setCount(0));
+	nameInput.addEventListener('input', () => setName(nameInput.value));
+
+	nameInput.value = name();
 }

src/main.ts

@@ -16,9 +16,17 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
       <div id="counter">
         <button id="increment" type="button">Increment</button>
         <button id="reset" type="button">Reset</button>
+
         <br /><br />
+
         <div id="count"></div>
         <div id="count-doubled"></div>
+
+        <br />
+
+        <input type="text" autocomplete="off" id="name" />
+        <br /><br />
+        <span id="name-output"></span>
       </div>
     </div>
   </div>

src/style.css

@@ -63,20 +63,26 @@ h1 {
 	color: #888;
 }
 
-button {
+button,
+input {
 	border-radius: 8px;
 	border: 1px solid transparent;
 	padding: 0.6em 1.2em;
 	font-size: 1em;
 	font-weight: 500;
 	font-family: inherit;
 	background-color: #1a1a1a;
-	cursor: pointer;
 	transition: border-color 0.25s;
 }
+
+button {
+	cursor: pointer;
+}
+
 button:hover {
 	border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;