add day 48 & 49 (smh)

day48/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>

day48/src/components/Nav.devto

@@ -0,0 +1,18 @@
+<nav class="p-4 shadow-lg md:p-[1.375rem] dark:bg-zinc-900 border-b border-b-neutral-800 dark:text-white mb-2">
+	<ul class="flex flex-row items-center max-h-7">
+		<div class="flex items-baseline">
+		  <li class="mr-2 text-lg">
+			<a href="/" client:prefetch>Home</a>
+		  </li>
+		  <li class="mr-2">
+			<a href="/page2" client:prefetch>page 2</a>
+		  </li>
+		  <li class="mr-2">
+			<a href="/page3" client:prefetch>page 3</a>
+		  </li>
+		  <li class="mr-2">
+			<a href="/nojavascript" client:prefetch>No Javascript</a>
+		  </li>
+		</div>
+	  </ul>
+</nav>

day48/src/components/cookieInput.devto

@@ -0,0 +1,20 @@
+<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 mx-auto mb-2 w-fit">
+        <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" />
+        <button
+            class="bg-blue-600 font-semibold rounded-md py-2.5 px-2 text-sm hover:bg-blue-700 active:bg-blue-800 transition-colors"
+            d-on:click="appState.contents.cookie = appState.contents.cookiedata; setCookie('username', appState.contents.cookiedata, '365');">Submit
+            Cookie</button>
+</div>
+
+<script setup>
+    console.log('page is first get')
+</script>
+
+<script>
+    console.log('page is fully loaded');
+</script>

day48/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>

day48/src/components/indexComponent.devto

@@ -0,0 +1,2 @@
+<Counter />
+<textInput />

day48/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>

day48/src/components/slotComponent.devto

@@ -0,0 +1,6 @@
+<div class="mb-2">
+    <h2 class="text-xl font-semibold text-center">Slot data is:</h2>
+</div>
+<div>
+	<slot />
+</div>

day48/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 d-on:keydown.space="console.log('aaa')" 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>