Sharing is Caring ;)

src/App.svelte

@@ -8,12 +8,14 @@
    import LostUploaded from './routes/lost-and-found/LostUploaded.svelte';
    import SearchInFound from './routes/lost-and-found/SearchInFound.svelte';
    import ThanksForUploading from './routes/lost-and-found/ThanksForUploading.svelte';
+   import ShareAslot from './routes/share-a-slot/shareAslot.svelte';
 </script>
 
 <Router>
    <nav>
       <Link to="/">Calendar</Link>
       <Link to="/lost-and-found/LostAndFound.svelte">Lost&Found</Link>
+      <Link to="/share-a-slot/shareAslot.svelte">Share a Slot</Link>
    </nav>
    <main>
       <Route path="/lost-and-found/ThanksForUploading.svelte" component={ThanksForUploading} />
@@ -22,6 +24,7 @@
       <Route path="/lost-and-found/Found.svelte" component={Found} />
       <Route path="/lost-and-found/Lost.svelte" component={Lost} />
       <Route path="/lost-and-found/LostAndFound.svelte" component={LostAndFound} />
+      <Route path="/share-a-slot/shareAslot.svelte" component={ShareAslot} />
       <Route path="/"><Calendar /></Route>
    </main>
 </Router>

src/routes/share-a-slot/shareAslot.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+   import { Router, Route, Link } from 'svelte-routing';
+
+   let size = '';
+   let SelectionColor = 'Sock';
+	let OptionColor = [
+		'Sock',
+		'Underwear',
+		'T-shirt', 'Shirt', 'Trousers', 'Jacket'
+	]
+
+   let SelectionProgram= 'Sock';
+	let OptionProgram = [
+		'Sock',
+		'Underwear',
+		'T-shirt', 'Shirt', 'Trousers', 'Jacket'
+	]
+
+   $: console.log('Changed selected:', SelectionProgram)
+	$: console.log('Updated options:', OptionProgram)
+</script>
+
+<div class="boxes">
+   <div>Define your cloths for the shared laundry</div>
+   <div></div>
+</div>
+
+
+Color: <select bind:value={SelectionColor}>
+	{#each OptionColor as value}<option {value}>{value}</option>{/each}
+</select>
+
+Laundry Program: <select bind:value={SelectionProgram}>
+	{#each OptionProgram as value}<option {value}>{value}</option>{/each}
+</select>
+
+ Temperature: <input bind:value={size} placeholder="enter the size" />
+
+Amount: <input bind:value={size} placeholder="enter the cloth amount you have" />
+
+<style>
+   .boxes {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+   }
+</style>