Svelte For Beginners #5 - Logic

In this video we're going to learn how we can express logic inside Svelte.

▶️ Series:

1. What is Svelte?
2. What Makes Svelte Unique?
3. The Single File Component
4. Reactivity
5. Logic
6. Events
7. Bindings
8. Components
9. Slots
10. Animations
11. Stores
12. Conclusion

👉️ Links:

Svelte For Beginners Post

👉️ List of what I use:

👉️ Music:

"CrazyJaZz - Happiness"

[callowindia]

Finally, I found someone who explains Svelte not just on surface level. 🎉🎉🎉🎉

[remikchemik]

Thanks for the material. I love the quality and the comparison to vanilla js. I have a question for the updateUI function in 2:07. Isn't it better to have one function just for updating the UI and another for generating the initial view(the button that says "Sign in")? I think your function broke the SRP(single responsibility principle) because it generates the initial view and also updates it. I simply ask because I would like to know the best practices

[consciencedimension]

svelte 5
<script>
let loggedIn = $state(false);

function toggle() {
loggedIn = !loggedIn;
}
</script>

<button onclick={toggle}>
{loggedIn ? 'Log out' : 'Log in'}
</button>