add day10

day10/src/components/cookieInput.ts

@@ -0,0 +1,12 @@
+export const CookieInput = () => {
+    return `
+    <div class="mb-2">
+    <h2 class="text-xl font-semibold text-center">Username cookie is: {appState.contents.cookie}</h2>
+</div>
+<div class="flex justify-center flex-col">
+    <input placeholder="username..." class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" d-model="cookiedata" />
+    {appState.contents.cookiedata}
+    <button class="bg-blue-600 font-semibold rounded-md py-1 px-2 text-sm" d-click="appState.contents.cookie = appState.contents.cookiedata; setCookie('username', appState.contents.cookiedata, '365');">Submit Cookie</button>
+</div>
+    `
+}

day10/src/components/counter.ts

@@ -0,0 +1,22 @@
+import minus from '../icons/minus.svg'
+import plus from '../icons/plus.svg'
+import refresh from '../icons/refresh.svg'
+
+export const Counter = () => {
+    return `
+    <div class="mb-2">
+                <h2 class="text-xl font-semibold text-center">count is: { appState.contents.count }</h2>
+            </div>
+    <div class="flex justify-center">
+    <button d-on:click="appState.contents.count--" class="transition-colors p-3 duration-300 active:bg-red-700 hover:bg-red-600 hover:text-zinc-100 mr-1">
+    <img src=${minus} alt="minus" />
+    </button>
+    <button d-on:click="appState.contents.count = 0" class="transition-colors p-3 duration-300 active:bg-zinc-700 hover:bg-zinc-800 hover:text-red-100 mr-1">
+        <img src=${refresh} alt="reset">
+    </button>
+    <button d-on:click="appState.contents.count++" class="transition-colors p-3 duration-300 active:bg-green-700 hover:bg-green-600 hover:text-green-100">
+        <img src=${plus} alt="plus" />
+    </button>
+</div>
+    `
+}

day10/src/components/htmlInput.ts

@@ -0,0 +1,12 @@
+export const HtmlInput = () => {
+    return `
+    <div class="mb-2">
+    <h2 class="text-xl font-semibold text-center" d-html>html input is: {appState.contents.html}</h2>
+</div>
+<div class="flex justify-center">
+<div>
+    <input placeholder="text..." class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" d-model="html" />
+    </div>
+    </div>
+    `
+}

day10/src/components/myDad.ts

@@ -0,0 +1,23 @@
+export const MyDad = () => {
+    return `
+    <div class="mb-2">
+    <h2 class="text-xl font-semibold text-center">My dad {appState.contents.year}</h2>
+</div>
+<div class="flex justify-center">
+<input placeholder="ex: 1985" class="no-arrows py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" type="number" d-model="year">
+</div>
+<style>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+</style>
+    `
+}

day10/src/components/routerLink.ts

@@ -0,0 +1,5 @@
+export const RouterLink = (link: string, name: string) => {
+    return `
+    <a href="${link}" d-on:click="event.preventDefault(); renderPage('${link}')">${name}</a>
+    `
+}

day10/src/components/textInput.ts

@@ -0,0 +1,12 @@
+export const TextInput = () => {
+    return `
+    <div class="mb-2">
+    <h2 class="text-xl font-semibold text-center">Input is: {appState.contents.text}</h2>
+</div>
+<div class="flex justify-center">
+<div>
+    <input placeholder="text..." class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" d-model="text" />
+    </div>
+    </div>
+    `
+}