Yesterday we saw what SvelteJS is and why it is different from other JS frameworks like React and Vue etc. We also build a little counter with it and now we will be building a little Todo List with it and tomorrow again will make the list more better and functional than it is today.
Again started with install SvelteJS by using the following command.
User:~/svelte$ npx degit sveltejs/template svelte-demo
User:~/svelte$ npm install
User:~/svelte$ npm run dev
ToDo List
We will be building a Todo List with SvelteJS. We can create an item and when we click on it it will cross the item. It is a simple application just like the last one but in this we will be learning about some more things about SvelteJS like using conditionals and Loops in the compoents.
I removed all the boiler plate and create two new files, list.svelte and item.svelte in the src directory. Here's what item.svelte looks like.
<script>
export let name;
let strike = false;
function strikeItem() {
strike = !strike;
}
</script>
<div class="item" on:click={strikeItem}>
<div class={strike ? "item-name strike" : "item-name"}>
{name}
</div>
</div>
In it we are first exporting a var name which is provided by the parent component list.svelte as a prop. boolean strike for checking if the item was clicked on and function strikeItem to change the boolean value if the item was clicked.
Events & Event Modifiers in Svelte
In the .item tag we see an attribute on:click. The keyword on followd by a colon : is how we listen for events in Svelte. on:click means to listen for event that is clicking the item in this case and in braces call the funciton to handle the event which changes the vaule of the boolean.
Every event that you can use in JS or HTML can be used is Svelte with on: followed by the event name like on:mousemove, on:submit, on:focus, on:dblclick and on:drag etc.
We can also use Event Modifiers in SvelteJS by using a pipe sign after the event name and adding the name of the modifier like this.
<button on:click|preventDefault={function} type="submit">
Click
</button>
In this example, clicking the button will prevent the default from happening which in this case will reload the page but will be prevented by the event modifier. If we have to do this in vanila JS it would look like this.
function onClick(event) {
event.preventDefault();
}
Conditionals In Svelte
This strike ? "item-name strike" : "item-name" is just a ternary operator in JS which check if the condition is true return this or else this. condition ? if true : if false. Conditionals in Svelte work like following.
{#if condition}
<!-- Do Someting -->
{/if}
<!-- Or using else statements -->
{#if condition}
<!-- Do Someting -->
{:else}
<!-- Do Someting -->
{/if}
<!-- Nesting IFs -->
{#if condition}
<!-- Do Someting -->
{:else if anotherCondition}
<!-- Do Someting -->
{/if}
Looping In Svelte
Next is the list.svelte file and it looks like this.
<script>
import Item from "./item.svelte";
let items = [];
let value;
function addItem() {
items[items.length] = value;
value = "";
}
</script>
<div class="wrapper">
<div class="items">
{#each items as item}
<Item name={item} />
{/each}
</div>
<form on:submit|preventDefault={addItem}>
<input type="text" bind:value />
<button>Add Item</button>
</form>
</div>
Here we are importing first the item component and them using it inside a for loop which in Svelte looks like this.
{#each items as item}
<!-- Do Something With item -->
{/each}
We are passing the item name as a prop to the item component while looping over each item in the items array. Then we pass the addItem function to the form which calls the function on on:submit|preventDefault event which appends the item to items array and prevents the page from reloading. Adding some styling and it works like this.
zainsci