diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..bfbbe25
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.cursorBlinking": "smooth",
+    "editor.formatOnSave": true
+}
\ No newline at end of file
diff --git a/src/lib/apps/todoApp.svelte b/src/lib/apps/todoApp.svelte
index 9b30943..f0476ee 100644
--- a/src/lib/apps/todoApp.svelte
+++ b/src/lib/apps/todoApp.svelte
@@ -1,204 +1,211 @@
 <script>
-    import {todos} from "$lib/stores/todos.js";
-    let todo_text = "";
-    let todo_type = "active";
-    let filteredTodo = [];
-    let addTodo = () => {
-        if (todo_text.length > 0) {
-            const todo = {
-                text: todo_text,
-                date: Date.now,
-                done: false
-            }
-            todo_text = "";
-            if (todo_type == "done") todo_type = "all";
-            $todos = [todo, ...$todos];
-        }
-    }
-    let solveTodo = (todo) => {
-        if(todo.done) {
-            todo.done = false;
-        }
-        else {
-            todo.done = true;
-        }
-        $todos = $todos
-    }
-    let clearTodo = (todo) => {
-        $todos = $todos.filter(x => x != todo)
-    }
-    let filterTodo = (type) => {
-        todo_type = type;
-        switch (type) {
-            case 'active':
-                filteredTodo = $todos.filter(todo => !todo.done);
-                break;
-            case 'done':
-                filteredTodo = $todos.filter(todo => todo.done);
-                break;
-            case 'all':
-                filteredTodo = $todos;
-                break;
-        }
-    }
-    $: {
-        filteredTodo = $todos;
-        filterTodo(todo_type)
-    }
+	import { todos } from '$lib/stores/todos.js';
+	let todo_text = '';
+	let todo_type = 'active';
+	let filteredTodo = [];
+	let addTodo = () => {
+		if (todo_text.length > 0) {
+			const todo = {
+				text: todo_text,
+				date: Date.now,
+				done: false
+			};
+			todo_text = '';
+			if (todo_type == 'done') todo_type = 'all';
+			$todos = [todo, ...$todos];
+		}
+	};
+	let solveTodo = (todo) => {
+		if (todo.done) {
+			todo.done = false;
+		} else {
+			todo.done = true;
+		}
+		$todos = $todos;
+	};
+	let clearTodo = (todo) => {
+		$todos = $todos.filter((x) => x != todo);
+	};
+	let filterTodo = (type) => {
+		todo_type = type;
+		switch (type) {
+			case 'active':
+				filteredTodo = $todos.filter((todo) => !todo.done);
+				break;
+			case 'done':
+				filteredTodo = $todos.filter((todo) => todo.done);
+				break;
+			case 'all':
+				filteredTodo = $todos;
+				break;
+		}
+	};
+	$: {
+		filteredTodo = $todos;
+		filterTodo(todo_type);
+	}
 </script>
 
-<div class = "panel">
-    <h2 class= "title">todo</h2>
-    <hr/>
-    <div class="todo-input">
-        <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>    
-    </div>
-    <div class="todo-filter">
-        <button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</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}
-        <li class = "todo {todo.done ? 'done' : ''}">
-            <p>{todo.text}</p>
-            <div class = "todo-buttons">
-                {#if todo.done}
-                  <button class = "clear" on:click="{() => clearTodo(todo)}">✗</button>
-                {/if}
-                <button class = "solve" on:click="{() => solveTodo(todo)}">✓</button>
-            </div>
-        </li>
-        {/each}
-    </ul>
+<div class="panel">
+	<h2 class="title">todo</h2>
+	<hr />
+	<div class="todo-input">
+		<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
+		>
+	</div>
+	<div class="todo-filter">
+		<button on:click={() => filterTodo('active')} class={todo_type == 'active' ? 'disabled' : ''}
+			>active</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}
+			<li class="todo {todo.done ? 'done' : ''}">
+				<p>{todo.text}</p>
+				<div class="todo-buttons">
+					{#if todo.done}
+						<button class="clear" on:click={() => clearTodo(todo)}>✗</button>
+					{/if}
+					<button class="solve" on:click={() => solveTodo(todo)}>✓</button>
+				</div>
+			</li>
+		{/each}
+	</ul>
 </div>
 
 <style>
+	* {
+		--cream: #fef9ef;
+		--blue: #227c9d;
+		--blue-disabled: #aabac0;
+		--green: #17c3b2;
+		--yellow: #ffcb77;
+		--red: #fe6d73;
+	}
 
-* {
-    --cream: #FEF9EF;
-    --blue: #227c9d;
-    --blue-disabled: #aabac0;
-    --green: #17C3B2;
-    --yellow: #FFCB77;
-    --red: #FE6D73;
-}
+	.panel {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+		background-color: var(--cream);
+		font-size: 1rem;
+		font-family: 'Atkinson Hyperlegible', sans-serif;
+	}
+	@media only screen and (min-width: 500px) {
+		.panel {
+			margin-left: auto;
+			margin-right: auto;
+			width: 500px;
+			border: solid var(--cream) 0px;
+			border-radius: 10px;
+		}
+	}
 
+	.title {
+		margin-left: 2rem;
+		font-weight: 400;
+		font-size: 3rem;
+		color: var(--yellow);
+	}
 
-.panel {
-        padding-top: 1rem;
-        padding-bottom: 1rem;
-        background-color: var(--cream);
-        font-size: 1rem;
-        font-family: 'Atkinson Hyperlegible', sans-serif;
-}
-@media only screen and (min-width: 500px) {
-    .panel {
-        margin-left: auto;
-        margin-right: auto;
-        width: 500px;
-        border: solid var(--cream) 0px;
-        border-radius: 10px;
-    }
-}
+	hr {
+		margin-left: 1rem;
+		margin-bottom: 1rem;
+		border: 2px solid var(--yellow);
+	}
 
-.title {
-    margin-left: 2rem;
-    font-weight: 400;
-    font-size: 3rem;
-    color: var(--yellow);
-}
+	button {
+		padding: 5px;
+		margin: 0px;
+		background-color: var(--blue);
+		border: solid var(--blue) 1px;
+		border-radius: 5px;
+		color: white;
+		font-family: 'Atkinson Hyperlegible', sans-serif;
+		font-size: 1rem;
+	}
 
-hr {
-    margin-left: 1rem;
-    margin-bottom: 1rem;
-    border: 2px solid var(--yellow);
-}
+	.todo-input {
+		font-size: 0px;
+		margin: 1rem;
+		display: flex;
+	}
+	.todo-text {
+		padding: 1rem;
+		margin: 0px;
+		border: solid white 2px;
+		border-right: 0px;
+		border-radius: 0px;
+		border-bottom-left-radius: 5px;
+		border-top-left-radius: 5px;
+		font-family: 'Atkinson Hyperlegible', sans-serif;
+		font-size: 1rem;
+		width: 100%;
+	}
 
-button {
-    padding: 5px;
-    margin: 0px;
-    background-color: var(--blue);
-    border: solid var(--blue) 1px;
-    border-radius: 5px;
-    color: white;
-    font-family: 'Atkinson Hyperlegible', sans-serif;
-    font-size: 1rem;
-}
+	.todo-text:focus {
+		outline: none;
+		border-bottom-color: var(--blue);
+	}
 
-.todo-input {
-    font-size: 0px;
-    margin: 1rem;
-    display: flex;
-}
-.todo-text {
-    padding: 1rem;
-    margin: 0px;
-    border: solid white 2px;
-    border-right: 0px;
-    border-radius: 0px;
-    border-bottom-left-radius: 5px;
-    border-top-left-radius: 5px;
-    font-family: 'Atkinson Hyperlegible', sans-serif;
-    font-size: 1rem;
-    width: 100%;
-}
+	.todo-add {
+		padding: 1rem;
+		border-bottom-left-radius: 0px;
+		border-top-left-radius: 0px;
+	}
 
-.todo-text:focus {
-    outline: none;
-    border-bottom-color: var(--blue);
-}
+	.disabled {
+		background-color: var(--blue-disabled);
+		border-color: var(--blue-disabled);
+	}
 
-.todo-add {
-    padding: 1rem;
-    border-bottom-left-radius: 0px;
-    border-top-left-radius: 0px;
-}
+	button:active {
+		background-color: var(--yellow);
+		border-color: var(--yellow);
+		color: black;
+	}
 
-.disabled {
-    background-color: var(--blue-disabled);
-    border-color: var(--blue-disabled);
-}
+	button:active.disabled {
+		background-color: var(--blue-disabled);
+		border-color: var(--blue-disabled);
+		color: white;
+	}
 
-button:active {
-    background-color: var(--yellow);
-    border-color: var(--yellow);
-    color: black;
-}
+	.todo-filter {
+		margin-top: 1rem;
+		display: flex;
+		align-items: center;
+		padding-left: 1rem;
+	}
 
-button:active.disabled {
-    background-color: var(--blue-disabled);
-    border-color: var(--blue-disabled);
-    color: white;
-}
+	.todo-filter button {
+		padding-left: 1rem;
+		padding-right: 1rem;
+		margin-right: 1px;
+		border-bottom-left-radius: 0px;
+		border-bottom-right-radius: 0px;
+	}
 
-.todo-filter {
-    margin-top: 1rem;
-    display: flex;
-    align-items: center;
-    padding-left: 1rem;
-}
-
-.todo-filter button {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    margin-right: 1px;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
-
-.todo-list {
-    margin-left: 1rem;
-    margin-right: 1rem;
-    padding: 1rem;
-    padding-bottom: 0.5rem;
-    background-color: var(--blue-disabled);
-    border-bottom-left-radius: 0px;
-    border-top-right-radius: 5px;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    /* list
+	.todo-list {
+		margin-left: 1rem;
+		margin-right: 1rem;
+		padding: 1rem;
+		padding-bottom: 0.5rem;
+		background-color: var(--blue-disabled);
+		border-bottom-left-radius: 0px;
+		border-top-right-radius: 5px;
+		border-bottom-left-radius: 5px;
+		border-bottom-right-radius: 5px;
+		/* list
         * padding 1.5rem
        todo
         * content 1.0rem
@@ -211,63 +218,60 @@ button:active.disabled {
         (1.5 + 2.5*3)rem (9rem)
         + (12*3)px       (36px)
     */
-    min-height: calc(11.5rem + 48px);
+		min-height: calc(11.5rem + 48px);
+	}
 
-}
+	.todo {
+		padding: 0.5rem;
+		margin-bottom: 0.5rem;
+		background-color: var(--cream);
+		border-radius: 5px;
+		display: flex;
+		align-items: center;
+	}
 
-.todo {
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-    background-color: var(--cream);
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-}
+	.todo-buttons {
+		margin-left: auto;
+	}
 
-.todo-buttons {
-    margin-left: auto;
-}
+	.todo.done {
+		background-color: var(--cream);
+	}
 
-.todo.done {
-    background-color: var(--cream);
-}
+	/* common properties */
+	.todo button {
+		width: 2rem;
+		height: 2rem;
+		padding: 0rem;
+		border: solid 0.2rem;
+		border-radius: 1rem;
+	}
 
-/* common properties */
-.todo button {
-    width: 2rem;
-    height: 2rem;
-    padding: 0rem;
-    border: solid 0.2rem;
-    border-radius: 1rem;
-}
+	/* sovle button */
+	.todo button.solve {
+		background-color: var(--cream);
+		border-color: var(--green);
+		color: transparent;
+	}
+	.todo.done button.solve {
+		background-color: var(--cream);
+		color: var(--green);
+	}
 
+	/* clear button */
+	.todo button.clear {
+		background-color: var(--red);
+		border-color: var(--red);
+		color: var(--cream);
+	}
 
-/* sovle button */
-.todo button.solve {
-    background-color: var(--cream);
-    border-color: var(--green);
-    color: transparent;
-}
-.todo.done button.solve {
-    background-color: var(--cream);
-    color: var(--green)
-}
-
-/* clear button */
-.todo button.clear {
-    background-color: var(--red);
-    border-color: var(--red);
-    color: var(--cream);
-}
-
-/* active buttons */
-.todo button:active {
-    background-color: var(--yellow);
-    border-color: var(--yellow)
-}
-.todo.done button:active {
-    background-color: var(--yellow);
-    border-color: var(--yellow)
-}
-
-</style>
\ No newline at end of file
+	/* active buttons */
+	.todo button:active {
+		background-color: var(--yellow);
+		border-color: var(--yellow);
+	}
+	.todo.done button:active {
+		background-color: var(--yellow);
+		border-color: var(--yellow);
+	}
+</style>
diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte
index 7c0ac5f..d56ff37 100644
--- a/src/lib/components/footer.svelte
+++ b/src/lib/components/footer.svelte
@@ -1,14 +1,15 @@
 <footer>
-    <p>
-        made with ❤️
-        and 
-        <a href="https://svelte.dev/"> <img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a>
-    </p>
+	<p>
+		made with ❤️ and
+		<a href="https://svelte.dev/">
+			<img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a
+		>
+	</p>
 </footer>
 
 <style>
-    footer {
-        margin: 1em;
-        padding: 1em;
-    }
-</style>
\ No newline at end of file
+	footer {
+		margin: 1em;
+		padding: 1em;
+	}
+</style>
diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte
index 30988ec..7a650b1 100644
--- a/src/lib/components/nav.svelte
+++ b/src/lib/components/nav.svelte
@@ -1,21 +1,20 @@
 <script>
-    import { base } from '$app/paths';
+	import { base } from '$app/paths';
 </script>
 
 <nav>
-    <a class = "nav-button" href="{base}/">home</a>
-    <a class = "nav-button" href="{base}/about">about</a>
+	<a class="nav-button" href="{base}/">home</a>
+	<a class="nav-button" href="{base}/about">about</a>
 </nav>
 
 <style>
-    nav {
-        margin: 1em;
-        padding: 1em;
-        display: flex;
-    }
-    .nav-button {
-        padding: 8px;
-        border-bottom: solid 1px black;
-    }
-
-</style>
\ No newline at end of file
+	nav {
+		margin: 1em;
+		padding: 1em;
+		display: flex;
+	}
+	.nav-button {
+		padding: 8px;
+		border-bottom: solid 1px black;
+	}
+</style>
diff --git a/src/lib/stores/todos.js b/src/lib/stores/todos.js
index a87e34b..5b4c0fe 100644
--- a/src/lib/stores/todos.js
+++ b/src/lib/stores/todos.js
@@ -1,31 +1,31 @@
 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);
-    const toObject = JSON.parse;
+	const toString = (value) => JSON.stringify(value, null, 2);
+	const toObject = JSON.parse;
 
-    if(process.browser) {
-        if (localStorage.getItem(key) === null) {
-            localStorage.setItem(key, toString(initial))
-        }
+	if (process.browser) {
+		if (localStorage.getItem(key) === null) {
+			localStorage.setItem(key, toString(initial));
+		}
 
-        const saved = toObject(localStorage.getItem(key));
+		const saved = toObject(localStorage.getItem(key));
 
-        const { subscribe, set, update } = writable(saved);
+		const { subscribe, set, update } = writable(saved);
 
-        return {
-            subscribe,
-            set: value => {
-                // both return and save in the local storage
-                localStorage.setItem(key, toString(value));
-                return set(value)
-            },
-            update
-        }
-    }
-}
+		return {
+			subscribe,
+			set: (value) => {
+				// both return and save in the local storage
+				localStorage.setItem(key, toString(value));
+				return set(value);
+			},
+			update
+		};
+	}
+};
 
 // export const todos = localStore('todo-store', []);
-console.log("here we are: " + typeof window);
-export const todos = writable([]);
\ No newline at end of file
+console.log('here we are: ' + typeof window);
+export const todos = writable([]);
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 8f9f6a6..9447ccc 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,31 +1,30 @@
 <script>
-    import Nav from "$lib/components/nav.svelte"
-    import Footer from "$lib/components/footer.svelte"
+	import Nav from '$lib/components/nav.svelte';
+	import Footer from '$lib/components/footer.svelte';
 </script>
 
 <div class="site">
-<Nav/>
-<slot></slot>
-<Footer/>
+	<Nav />
+	<slot />
+	<Footer />
 </div>
 
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
+	@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
 
-:global(*) {
-    padding: 0px;
-    margin: 0px;
-    text-decoration: none;
-    list-style-type: none;
-    color : black;
+	:global(*) {
+		padding: 0px;
+		margin: 0px;
+		text-decoration: none;
+		list-style-type: none;
+		color: black;
 
-    --gray: rgb(160, 160, 160);
-    --lightgray: rgb(240, 240, 240);
-}
+		--gray: rgb(160, 160, 160);
+		--lightgray: rgb(240, 240, 240);
+	}
 
-.site {
-    display: flex;
-    flex-direction: column;
-}
-
-</style>
\ No newline at end of file
+	.site {
+		display: flex;
+		flex-direction: column;
+	}
+</style>
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
index e3e5683..6ad05c7 100644
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -1,11 +1,11 @@
-<div class = "panel">
-    <h1>About this</h1>
-    <p>This is a test website using sveltekit</p>
+<div class="panel">
+	<h1>About this</h1>
+	<p>This is a test website using sveltekit</p>
 </div>
 
 <style>
-    .panel {
-        margin: 1em;
-        padding: 1em;
-    }
-</style>
\ No newline at end of file
+	.panel {
+		margin: 1em;
+		padding: 1em;
+	}
+</style>
diff --git a/src/routes/apps/todo.svelte b/src/routes/apps/todo.svelte
index 4ece915..b25ac38 100644
--- a/src/routes/apps/todo.svelte
+++ b/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/>
\ No newline at end of file
+<ToDo />
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index dd478df..1550636 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,22 +1,20 @@
-
-<div class = "panel">
-    <h1>APPS</h1>
-    <ul>
-        <li><a href="/apps/todo">todo</a></li>
-    </ul>    
+<div class="panel">
+	<h1>APPS</h1>
+	<ul>
+		<li><a href="/apps/todo">todo</a></li>
+	</ul>
 </div>
 
-
 <style>
-    .panel {
-        margin: 1em;
-        padding: 1em;
-    }
+	.panel {
+		margin: 1em;
+		padding: 1em;
+	}
 
-    ul {
-        margin: 2em;
-    }
-    li {
-        list-style-type:circle;
-    }
-</style>
\ No newline at end of file
+	ul {
+		margin: 2em;
+	}
+	li {
+		list-style-type: circle;
+	}
+</style>