test

<script>
import { flip } from "svelte/animate";
let todos = [];
let value = "";
function handleClick() {
const newTodo = {
id: todos.length,
todo: value,
};
todos = [newTodo, ...todos];
value = "";
}
function deleteTodo(id) {
let newTodo = todos.filter((value) => value.id !== id);
todos = newTodo;
}
</script>

<div style="height:300px; width:300px;">
<form on:submit|preventDefault={handleClick}>
<input type="text" placeholder="Enter Text" bind:value />
<button type="submit">Add Todo</button>
</form>

{#each todos as todo (todo.id)}
<div animate:flip={{ duration: 500 }}>
<div>{todo.todo}</div>
<button on:click={() => deleteTodo(todo.id)}>Delete</button>
</div>
{/each}
</div>

Post a Comment

0 Comments