Prettyfied

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.cursorBlinking": "smooth",
+    "editor.formatOnSave": true
+}

src/lib/apps/todoApp.svelte

@@ -1,7 +1,7 @@
 <script>
-    import {todos} from "$lib/stores/todos.js";
+	import { todos } from '$lib/stores/todos.js';
-    let todo_text = "";
+	let todo_text = '';
-    let todo_type = "active";
+	let todo_type = 'active';
 	let filteredTodo = [];
 	let addTodo = () => {
 		if (todo_text.length > 0) {
@@ -9,41 +9,40 @@
 				text: todo_text,
 				date: Date.now,
 				done: false
-            }
+			};
-            todo_text = "";
+			todo_text = '';
-            if (todo_type == "done") todo_type = "all";
+			if (todo_type == 'done') todo_type = 'all';
 			$todos = [todo, ...$todos];
 		}
-    }
+	};
 	let solveTodo = (todo) => {
 		if (todo.done) {
 			todo.done = false;
-        }
+		} else {
-        else {
 			todo.done = true;
 		}
-        $todos = $todos
+		$todos = $todos;
-    }
+	};
 	let clearTodo = (todo) => {
-        $todos = $todos.filter(x => x != todo)
+		$todos = $todos.filter((x) => x != todo);
-    }
+	};
 	let filterTodo = (type) => {
 		todo_type = type;
 		switch (type) {
 			case 'active':
-                filteredTodo = $todos.filter(todo => !todo.done);
+				filteredTodo = $todos.filter((todo) => !todo.done);
 				break;
 			case 'done':
-                filteredTodo = $todos.filter(todo => todo.done);
+				filteredTodo = $todos.filter((todo) => todo.done);
 				break;
 			case 'all':
 				filteredTodo = $todos;
 				break;
 		}
-    }
+	};
 	$: {
 		filteredTodo = $todos;
-        filterTodo(todo_type)
+		filterTodo(todo_type);
 	}
 </script>
 
@@ -51,13 +50,23 @@
 	<h2 class="title">todo</h2>
 	<hr />
 	<div class="todo-input">
-        <input class="todo-text" bind:value="{todo_text}" placeholder="title"/>
+		<input class="todo-text" bind:value={todo_text} placeholder="title" />
-        <button on:click="{addTodo}" disabled = {todo_text.length == 0} class = "todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button>    
+		<button
+			on:click={addTodo}
+			disabled={todo_text.length == 0}
+			class="todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button
+		>
 	</div>
 	<div class="todo-filter">
-        <button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button>
+		<button on:click={() => filterTodo('active')} class={todo_type == 'active' ? 'disabled' : ''}
-        <button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button>
+			>active</button
-        <button on:click="{() => filterTodo('all')}" class = {todo_type == 'all' ? 'disabled' : ''}>all</button>
+		>
+		<button on:click={() => filterTodo('done')} class={todo_type == 'done' ? 'disabled' : ''}
+			>done</button
+		>
+		<button on:click={() => filterTodo('all')} class={todo_type == 'all' ? 'disabled' : ''}
+			>all</button
+		>
 	</div>
 	<ul class="todo-list">
 		{#each filteredTodo as todo}
@@ -65,9 +74,9 @@
 				<p>{todo.text}</p>
 				<div class="todo-buttons">
 					{#if todo.done}
-                  <button class = "clear" on:click="{() => clearTodo(todo)}">✗</button>
+						<button class="clear" on:click={() => clearTodo(todo)}>✗</button>
 					{/if}
-                <button class = "solve" on:click="{() => solveTodo(todo)}">✓</button>
+					<button class="solve" on:click={() => solveTodo(todo)}>✓</button>
 				</div>
 			</li>
 		{/each}
@@ -75,17 +84,15 @@
 </div>
 
 <style>
-
 	* {
-    --cream: #FEF9EF;
+		--cream: #fef9ef;
 		--blue: #227c9d;
 		--blue-disabled: #aabac0;
-    --green: #17C3B2;
+		--green: #17c3b2;
-    --yellow: #FFCB77;
+		--yellow: #ffcb77;
-    --red: #FE6D73;
+		--red: #fe6d73;
 	}
 
-
 	.panel {
 		padding-top: 1rem;
 		padding-bottom: 1rem;
@@ -212,7 +219,6 @@ button:active.disabled {
         + (12*3)px       (36px)
     */
 		min-height: calc(11.5rem + 48px);
-
 	}
 
 	.todo {
@@ -241,7 +247,6 @@ button:active.disabled {
 		border-radius: 1rem;
 	}
 
-
 	/* sovle button */
 	.todo button.solve {
 		background-color: var(--cream);
@@ -250,7 +255,7 @@ button:active.disabled {
 	}
 	.todo.done button.solve {
 		background-color: var(--cream);
-    color: var(--green)
+		color: var(--green);
 	}
 
 	/* clear button */
@@ -263,11 +268,10 @@ button:active.disabled {
 	/* active buttons */
 	.todo button:active {
 		background-color: var(--yellow);
-    border-color: var(--yellow)
+		border-color: var(--yellow);
 	}
 	.todo.done button:active {
 		background-color: var(--yellow);
-    border-color: var(--yellow)
+		border-color: var(--yellow);
 	}
-
 </style>

src/lib/components/footer.svelte

@@ -1,8 +1,9 @@
 <footer>
 	<p>
-        made with ❤️
+		made with ❤️ and
-        and 
+		<a href="https://svelte.dev/">
-        <a href="https://svelte.dev/"> <img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a>
+			<img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a
+		>
 	</p>
 </footer>
 

src/lib/components/nav.svelte

@@ -17,5 +17,4 @@
 		padding: 8px;
 		border-bottom: solid 1px black;
 	}
-
 </style>

src/lib/stores/todos.js

@@ -1,5 +1,5 @@
 import { onMount } from 'svelte';
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
 
 const localStore = (key, initial) => {
 	const toString = (value) => JSON.stringify(value, null, 2);
@@ -7,7 +7,7 @@ const localStore = (key, initial) => {
 
 	if (process.browser) {
 		if (localStorage.getItem(key) === null) {
-            localStorage.setItem(key, toString(initial))
+			localStorage.setItem(key, toString(initial));
 		}
 
 		const saved = toObject(localStorage.getItem(key));
@@ -16,16 +16,16 @@ const localStore = (key, initial) => {
 
 		return {
 			subscribe,
-            set: value => {
+			set: (value) => {
 				// both return and save in the local storage
 				localStorage.setItem(key, toString(value));
-                return set(value)
+				return set(value);
 			},
 			update
+		};
 	}
-    }
+};
-}
 
 // export const todos = localStore('todo-store', []);
-console.log("here we are: " + typeof window);
+console.log('here we are: ' + typeof window);
 export const todos = writable([]);

src/routes/__layout.svelte

@@ -1,11 +1,11 @@
 <script>
-    import Nav from "$lib/components/nav.svelte"
+	import Nav from '$lib/components/nav.svelte';
-    import Footer from "$lib/components/footer.svelte"
+	import Footer from '$lib/components/footer.svelte';
 </script>
 
 <div class="site">
 	<Nav />
-<slot></slot>
+	<slot />
 	<Footer />
 </div>
 
@@ -27,5 +27,4 @@
 		display: flex;
 		flex-direction: column;
 	}
-
 </style>

src/routes/apps/todo.svelte

@@ -1,5 +1,5 @@
 <script>
-    import ToDo from "$lib/apps/todoApp.svelte"
+	import ToDo from '$lib/apps/todoApp.svelte';
 </script>
 
 <ToDo />

src/routes/index.svelte

@@ -1,4 +1,3 @@
-
 <div class="panel">
 	<h1>APPS</h1>
 	<ul>
@@ -6,7 +5,6 @@
 	</ul>
 </div>
 
-
 <style>
 	.panel {
 		margin: 1em;