Created
February 2, 2020 07:14
-
-
Save alejovdev/7bed0b93b651620efa9fe927d8907ae4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| let todoDescription = ""; | |
| let todosList = []; | |
| const onAddToList = () => { | |
| todosList = [ | |
| ...todosList, | |
| { | |
| id: new Date().getTime(), | |
| description: todoDescription, | |
| done: false | |
| } | |
| ]; | |
| todoDescription = ""; | |
| }; | |
| const onKeyPress = e => { | |
| if (e.charCode === 13) onAddToList(); | |
| }; | |
| const onToggle = (e, todo) => { | |
| let done = e.target.checked; | |
| todosList = todosList.map(td => { | |
| if (td.id !== todo.id) return td; | |
| return { | |
| ...td, | |
| done | |
| }; | |
| }); | |
| }; | |
| </script> | |
| <div class="container"> | |
| <div> | |
| {#each todosList as todo} | |
| <div class="list-item"> | |
| {#if !todo.done} | |
| <p>{todo.description}</p> | |
| {:else} | |
| <strike>{todo.description}</strike> | |
| {/if} | |
| <input on:change={e => onToggle(e, todo)} type="checkbox" /> | |
| </div> | |
| {/each} | |
| <input | |
| class="todoinput" | |
| on:keypress={onKeyPress} | |
| bind:value={todoDescription} | |
| type="text" /> | |
| <button class="todobutton" on:click={onAddToList}>Add to list</button> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment