client

client/src/components/Add.svelte

@@ -0,0 +1,31 @@
+<script>
+  import Button from './Button.svelte'
+  import Field from './Field.svelte'
+
+  import { add } from '../api'
+
+  let title = ''
+
+  async function submit(e) {
+    // Here generally you would do a first validation before sending it to your service
+    await add({ title, done: false })
+    title = ''
+  }
+</script>
+
+<!-- <style>
+  input {
+    outline: none;
+    border: 3px solid hsl(0, 0%, 0%);
+    border-radius: 1em;
+    font-size: inherit;
+    padding: 0.25em 1em;
+  }
+</style> -->
+
+<h2>Add</h2>
+
+<form on:submit|preventDefault={submit}>
+  <Field bind:value={title} type="text" placeholder="Buy milk" />
+  <Button type="submit" text="Save" />
+</form>

client/src/components/Button.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let text = ''
+</script>
+
+<style>
+  button {
+    outline: none;
+    border: none;
+    color: hsl(0, 0%, 100%);
+    background-color: hsl(0, 0%, 0%);
+    padding: 0.5em 1em;
+    border-radius: 1em;
+    font-size: inherit;
+    cursor: pointer;
+  }
+</style>
+
+<button on:click {...$$restProps}>{text}</button>

client/src/components/Field.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let value
+  export let full = false
+</script>
+
+<style>
+  input {
+    outline: none;
+    border: 3px solid hsl(0, 0%, 0%);
+    border-radius: 1em;
+    font-size: inherit;
+    padding: 0.25em 1em;
+  }
+
+  .full {
+    width: 100%;
+  }
+</style>
+
+<input bind:value class:full {...$$restProps} />

client/src/components/List.svelte

@@ -0,0 +1,19 @@
+<script>
+  import Todo from './Todo.svelte'
+  import { todos } from '../api'
+</script>
+
+<style>
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+</style>
+
+<h2>List</h2>
+
+<ul>
+  {#each $todos as todo (todo._id)}
+    <Todo {todo} />
+  {/each}
+</ul>

client/src/components/Todo.svelte

@@ -0,0 +1,34 @@
+<script>
+  import Button from './Button.svelte'
+  import Field from './Field.svelte'
+
+  import { remove, update } from '../api'
+
+  export let todo
+</script>
+
+<style>
+  li {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 2.5em;
+  }
+
+  span {
+    display: block;
+    width: 1em;
+  }
+</style>
+
+<li>
+  <Field bind:value={todo.title} full />
+  <span />
+  <Button
+    on:click={() => (window.location.pathname = '/todo/' + todo._id)}
+    text="View" />
+  <span />
+  <Button on:click={() => update(todo)} text="Update" />
+  <span />
+  <Button on:click={() => remove(todo._id)} text="Delete" />
+</li>