zoeissleeping/100DaysOfCode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add day 95

Browse Source
This commit is contained in:
Zoe
2022-12-26 18:15:19 -06:00
parent 888e351615
commit 162aa8a222
50 changed files with 12366 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
day95/src/components/Counter.devto Normal file
View File

@@ -0,0 +1,35 @@
<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'
image:bundle
width="24px"
height="24px"
alt="minus" />
</button>
<button d-on:click.once.prevent="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'
image:bundle
width="24px"
height="24px"
alt="reset">
</button>
<button d-on:click.prevent="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'
image:bundle
width="24px"
height="24px"
alt="plus" />
</button>
</div>
<div>
<p d-if="appState.contents.count % 2 === 0 && !(appState.contents.count < 1)">count is even</p>
<p d-else-if="appState.contents.count == 0">count is 0</p>
<p d-else-if="appState.contents.count < 0">count is less than 0</p>
<p d-else>count is odd</p>
</div>

16
day95/src/components/Nav.devto Normal file
View File

@@ -0,0 +1,16 @@
<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-baseline max-h-7">
<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>
</ul>
</nav>

20
day95/src/components/cookieInput.devto Normal file
View File

@@ -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', 'Lax');">Submit
Cookie</button>
</div>
<script setup>
console.log('page is first get')
</script>
<script>
console.log('page is fully loaded');
</script>

6
day95/src/components/formInput.devto Normal file
View File

@@ -0,0 +1,6 @@
<div class="flex justify-center">
<form d-on:submit.prevent="console.log('submit')" class="flex justify-center flex-col">
<input 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" type="text" />
<input class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 hover:bg-zinc-700 active:bg-zinc-900 transition-colors cursor-pointer" type="submit">
</form>
</div>

11
day95/src/components/htmlInput.devto Normal file
View File

@@ -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>

3
day95/src/components/indexComponent.devto Normal file
View File

@@ -0,0 +1,3 @@
<Counter />
<formInput />
<textInput />

25
day95/src/components/myDad.devto Normal file
View File

@@ -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>

7
day95/src/components/nestedSlotComponent.devto Normal file
View File

@@ -0,0 +1,7 @@
<div class="mb-2">
<h2 class="text-xl font-semibold text-center">I should be a nested slot component:</h2>
</div>
<div>
<slot />
<Counter />
</div>

16
day95/src/components/slotComponent.devto Normal file
View File

@@ -0,0 +1,16 @@
<div class="mb-2">
<h2 class="text-xl font-semibold text-center">Slot data is:</h2>
</div>
<div>
<slot />
</div>
<div class="md-2">
<h2 class="text-xl font-semibold text-center">nested slot:</h2>
</div>
<div class="flex justify-center">
<div class="border border-neutral-600 p-3 rounded-md mb-2 w-3/4">
<nestedSlotComponent>
<p>Im nested</p>
</nestedSlotComponent>
</div>
</div>

10
day95/src/components/textInput.devto Normal file
View File

@@ -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="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>