add day 11

day11/src/pages/experiences/day1-2.ts

@@ -0,0 +1,24 @@
+import { Counter } from '../../components/counter';
+import { RouterLink } from '../../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <div class="w-80 max-w-full text-center">
+        <h1 class="text-2xl font-semibold">Day 1 & 2</h1>
+        <h3 class="text-lg">This is the day I worked on reactivity, simple click attributes and templates.</h3>
+        </div>
+        <br/>
+        <div class="p-2 border border-neutral-800 rounded-md shadow-md">
+        ${Counter()}
+        </div>
+        <br/>
+        <div class="text-center">
+            Return ${RouterLink('/', 'Home')}
+        </div>
+    </div>
+    `;
+}
+
+export const layout = 'default'

day11/src/pages/experiences/day11.ts

@@ -0,0 +1,23 @@
+import { RouterLink } from '../../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <div class="min-w-full text-center">
+            <h1 class="text-2xl font-semibold">Day 9</h1>
+            <h3 class="text-lg">On day 11 I worked with pointer events.</h3>
+        </div>
+        <br/>
+        <div class="p-2 border border-neutral-800 rounded-md shadow-md">
+        <div id="ad" class="p-6 rounded-md bg-gray-600 transition-colors" d-on:pointerEnter="document.getElementById('ad').classList.toggle('!bg-gray-700')" d-on:pointerExit="document.getElementById('ad').classList.toggle('!bg-gray-700')" d-on:mouseDown="document.getElementById('ad').classList.toggle('!bg-gray-800')" d-on:mouseUp="document.getElementById('ad').classList.toggle('!bg-gray-800')">asd</div>
+        </div>
+        <br/>
+        <div class="text-center">
+            Return ${RouterLink('/', 'Home')}
+        </div>
+    </div>
+    `;
+}
+
+export const layout = 'default'

day11/src/pages/experiences/day3.ts

@@ -0,0 +1,24 @@
+import { RouterLink } from '../../components/routerLink';
+import { TextInput } from '../../components/textInput';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <div class="min-w-full text-center">
+            <h1 class="text-2xl font-semibold">Day 3</h1>
+            <h3 class="text-lg">On day 3 I added a d-model attribute.</h3>
+        </div>
+        <br/>
+        <div class="p-2 border border-neutral-800 rounded-md shadow-md">
+        ${TextInput()}
+        </div>
+        <br/>
+        <div class="text-center">
+            Return ${RouterLink('/', 'Home')}
+        </div>
+    </div>
+    `;
+}
+
+export const layout = 'default'

day11/src/pages/experiences/day5.ts

@@ -0,0 +1,24 @@
+import { RouterLink } from '../../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <div class="min-w-full text-center">
+            <h1 class="text-2xl font-semibold">Day 5</h1>
+            <h3 class="text-lg">On day 5 I learnt about SPA routing.</h3>
+        </div>
+        <br/>
+        <div class="p-2 border border-neutral-800 rounded-md shadow-md">
+        Go ${RouterLink('/experiences/routes/page2', 'Deeper')}
+        Go ${RouterLink('/experiences/routes/deeper/deep', 'So deep')}
+        </div>
+        <br/>
+        <div class="text-center">
+            Return ${RouterLink('/', 'Home')}
+        </div>
+    </div>
+    `;
+}
+
+export const layout = 'default'

day11/src/pages/experiences/day6.ts

@@ -0,0 +1,24 @@
+import { CookieInput } from '../../components/cookieInput';
+import { RouterLink } from '../../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <div class="min-w-full text-center">
+            <h1 class="text-2xl font-semibold">Day 6</h1>
+            <h3 class="text-lg">On day 6 I learnt about cookies.</h3>
+        </div>
+        <br/>
+        <div class="p-2 border border-neutral-800 rounded-md shadow-md">
+        ${CookieInput()}
+        </div>
+        <br/>
+        <div class="text-center">
+            Return ${RouterLink('/', 'Home')}
+        </div>
+    </div>
+    `;
+}
+
+export const layout = 'default'

day11/src/pages/experiences/day7.ts

@@ -0,0 +1,25 @@
+import { RouterLink } from '../../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <div class="min-w-full text-center">
+            <h1 class="text-2xl font-semibold">Day 7</h1>
+            <h3 class="text-lg">On day 7 I got plain javascript running in my templates.</h3>
+        </div>
+        <br/>
+        <div class="p-2 border border-neutral-800 rounded-md shadow-md">
+        <p>1 + 2 = {1+2}</p>
+        <p>"string" substringed with 0, 1 = {"string".substring(0, 1)}</p>
+        <p>Current url is {window.location}</p>
+        </div>
+        <br/>
+        <div class="text-center">
+            Return ${RouterLink('/', 'Home')}
+        </div>
+    </div>
+    `;
+}
+
+export const layout = 'default'

day11/src/pages/experiences/day8-10.ts

@@ -0,0 +1,27 @@
+import { Counter } from '../../components/counter';
+import { RouterLink } from '../../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <div class="min-w-full text-center">
+            <h1 class="text-2xl font-semibold">Day 8 & 10</h1>
+            <h3 class="text-lg">On day 8 & 10 I played around with conditional rendering.</h3>
+        </div>
+        <br/>
+        <div class="p-2 border border-neutral-800 rounded-md shadow-md">
+        ${Counter()}
+        <p d-if="appState.contents.count == 0">The count is exactly 0.</p>
+        <p d-else-if="appState.contents.count == 1">The count is exactly 1.</p>
+        <p d-else>The count is not 0 or 1.</p>
+        </div>
+        <br/>
+        <div class="text-center">
+            Return ${RouterLink('/', 'Home')}
+        </div>
+    </div>
+    `;
+}
+
+export const layout = 'default'

day11/src/pages/experiences/day9.ts

@@ -0,0 +1,24 @@
+import { HtmlInput } from '../../components/htmlInput';
+import { RouterLink } from '../../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <div class="min-w-full text-center">
+            <h1 class="text-2xl font-semibold">Day 9</h1>
+            <h3 class="text-lg">Day 9 I worked with unsafe HTML.</h3>
+        </div>
+        <br/>
+        <div class="p-2 border border-neutral-800 rounded-md shadow-md">
+        ${HtmlInput()}
+        </div>
+        <br/>
+        <div class="text-center">
+            Return ${RouterLink('/', 'Home')}
+        </div>
+    </div>
+    `;
+}
+
+export const layout = 'default'

day11/src/pages/experiences/routes/deeper/deep.ts

@@ -0,0 +1,16 @@
+import { RouterLink } from '../../../../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <h1 class="text-2xl font-semibold">nested page</h1>
+        <br/>
+        <div class="grid grid-cols-1">
+            This is a deeply nested page
+            Go ${RouterLink('/experiences/day5', 'back')}
+        </div>
+    </div>
+    `;
+}
+

day11/src/pages/experiences/routes/page2.ts

@@ -0,0 +1,16 @@
+import { RouterLink } from '../../../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <h1 class="text-2xl font-semibold">Page 2</h1>
+        <br/>
+        <div class="grid grid-cols-1">
+            This is page 2
+            Go ${RouterLink('/experiences/day5', 'back')}
+        </div>
+    </div>
+    `;
+}
+

day11/src/pages/index.ts

@@ -0,0 +1,24 @@
+import { RouterLink } from '../components/routerLink';
+
+export default () => {
+    return `
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <h1 class="text-2xl font-semibold">100DaysOfCode Progress</h1>
+        <br/>
+        <div class="grid grid-cols-1">
+            ${RouterLink('/experiences/day1-2', 'Day 1 & 2')}
+            ${RouterLink('/experiences/day3', 'Day 3')}
+            Day 4 I Changed how the temple is rendered so I can have text before the variable
+            ${RouterLink('/experiences/day5', 'Day 5')}
+            ${RouterLink('/experiences/day6', 'Day 6')}
+            ${RouterLink('/experiences/day7', 'Day 7')}
+            ${RouterLink('/experiences/day8-10', 'Day 8 & 10')}
+            ${RouterLink('/experiences/day9', 'Day 9')}
+            ${RouterLink('/experiences/day11', 'Day 11')}
+        </div>
+    </div>
+    `;
+}
+
+export const layout = 'default'