add day18

day18/src/components/Counter.devto

@@ -0,0 +1,23 @@
+<div class="mb-2">
+    <h2 class="text-xl font-semibold text-center">count is: { appState.contents.count }</h2>
+</div>
+<div class="flex justify-center mb-3">
+    <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.svg'
+            width="24px"
+            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.svg'
+            width="24px"
+            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.svg'
+            width="24px"
+            alt="plus" />
+    </button>
+</div>

day18/src/components/RouterLink.devto

@@ -0,0 +1 @@
+<p>TODO</p>

day18/src/components/cookieInput.devto

@@ -0,0 +1,12 @@
+<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>

day18/src/components/htmlInput.devto

@@ -0,0 +1,11 @@
+<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>

day18/src/components/myDad.devto

@@ -0,0 +1,25 @@
+<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>
+<script>
+  console.log('loaded myDad')
+</script>

day18/src/components/textInput.devto

@@ -0,0 +1,10 @@
+<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>