<script>
  let word="Hello";
  let categories=new Map();
  let categoryToAdd="";
  let selectedCategory="?";
  let todoToAdd="";
  const addCategory=() => {
   if(categoryToAdd){
	if(categories.has(categoryToAdd)){alert("juba olemas");return; }
	 console.log(categoryToAdd);
	 categories.set(categoryToAdd, []);
	 categoryToAdd="";
	 categories=categories;
	}
  }

  $: addTodo=() => {
	 categories.get(selectedCategory).push(todoToAdd);
	 categories=categories;
	 console.log(categories)
  }
</script>



<h1>{word}</h1>
<input type="text" bind:value={categoryToAdd} />
<button on:click={addCategory}>Add</button>
<select bind:value={selectedCategory}>
   {#each categories.entries() as [k]}
      <option>{k}</option>
   {/each}
</select>
<input type="text" bind:value={todoToAdd} />
<button on:click={addTodo} >Add todo</button>
<ul>
 <li>loetelu</li>
 {#if categories.length }
  {#each categories[selectedCategory] as t}
   <li>{t}</li>
  {/each}
 {/if}
</ul>
<style>

</style>
