With the increased amount of user data, there comes a need for a tool to analyze such data. And for analyzing data, there is no better option than data visualization.…
Create an iOS / iPhone style toggle switch in Vue.js | Example
In this tutorial, we will learn how to create an iOS-style toggle switch button purely in Vue.js without using any library. Here's the underlying concept of the functionality we're going…
How to use :else inside an :each loop in Svelte | Example
Svelte allows us to explicitly show an element if the array to be looped is found empty. It's a feature that's exclusively available to Svelte among other SPA frameworks. Let's…
How to loop through a list of data and render it in Svelte | Example
Svelte allows us to loop through a list of data using the #each block. Let's have a look at this example to understand how it works. We're going to add…
How to show HTML conditionally using if-else statements in Svelte | Example
Like any other SPA framework, Svelte allows us to show parts of HTML or components conditionally. If we compare it with React, in React we return a fragment/component for each…
How to bind CSS classes conditionally in Svelte | Example
More often than not, we'd need to bind CSS class names conditionally. One of the prime examples is form validation. We often like to highlight to show erroneous messages in…
How to parse and output HTML in Svelte | Example
By default, if we try to input some HTML value in a text input or a textarea input and display it directly, it won't parse it as HTML. That is,…
How to pass props to components in Svelte | Example
Earlier we saw how we can import one component into another in Svelte. But this is not of much use if we cannot pass some values to the components we…
How to import one component inside another in Svelte | Example
Svelte has probably one of the most compact syntaxes to import components. All other SPA frameworks seem to demand more code lines. Let's have a look at an example. In…