Tuesday, 10 September, 2019 UTC
Summary
In this tutorial, we’ll see how to use the if blocks with the
Svelte framework to add some flow control logic to our Svelte markup code.Blocks in Svelte start use the
{#block}...{/block} syntax, so if blocks use the {#if}...{/if} syntax. And, as you’ll see, we can also add an else block and/or elseif blocks as part of an if block.Let’s start with the simplest example where we only show some markup if the
lightsOn prop passed-in evaluates to true:SomeComponent.svelte
<script> export let lightsOn; </script> {#if lightsOn} <p>I can see clearly now!</p> {/if} We can also add an
else block using the {:else} syntax:SomeComponent.svelte
<script> export let lightsOn; </script> {#if lightsOn} <p>I can see clearly now!</p> {:else} <p>It's too dark in here! 🌑</p> {/if} elseif
We can also add any number of
elseif blocks with the {:else if condition} syntax. Let’s modify our example a little:SomeComponent.svelte
<script> export let pickedColor; </script> {#if pickedColor === 'green'} <p>I agree with you! 💚</p> {:else if pickedColor === 'blue'} <p>Even better! 💙</p> {:else if pickedColor === 'purple'} <p>Ok then! 💜</p> {/if} And in the above example we could have also added an
else block as the last item in our if block to add some markup if none of our conditions have been true.Next let’s go over a simple app example that uses an if block to hide or display some markup. The example will also be a good reminder on how to initialize a new Svelte project.
Feel free to skip that part if you feel like you now have a good grasp over setting up a Svelte project and using if blocks.
Example App To help illustrate and hammer-in the knowledge around if blocks, we’ll create a small and simple
QR code generator app with the help of this QR code generator API.So, let’s start our journey with this mini project 🚣.
Project Setup - Install the recommended version of the
Nodeif you don’t have one. - Create a folder for the new project
Now open your terminal and type the below commands:
$ npx degit sveltejs/template qr-code-generator $ cd qr-code-generator $ npm install Now to see whether you setup your project correctly or not run the below command: 🙈
$ npm run dev Now open
localhost:5000 in your browser.It should look something like this:
Your file structure will look something like this.
qr-code-generator |- node_modules |- index.js |- public |- src |- App.svelte |- main.js Open
Start Building the Project App.svelte. this is the main file where we’ll write our code. Start by deleting all its content.HTML and CSS parts
Let’s first start with the HTML markup part and making a small form to submit the text entered for which you have to generate the QR Code.
App.svelte
<div class="wrapper"> <h1>QR CODE GENERATOR</h1> <form on:submit|preventDefault={dataSubmit}> <input bind:value={inputText} class="textInput" type="text" placeholder="Enter any text or url..." /> <input class="btn" type="submit" value="Submit" /> </form> </div> Here,
dataSubmit is a function we’ll later in the JavaScript part. on:submit is similar to the native onsubmit() and is used as the event handler for the form’s submit event. Notice how we’ve also used the preventDefault modifier to avoid having to add extra boilerplate code to our handler function.bind:value={inputText} is for two-way binding between the value of the input and the inputText variable.You can also write the CSS on the same
App.svelte file using a style tag:App.svelte
.wrapper { max-width: 700px; margin: 0 auto; } .textInput { width: 70%; height: 40px; color: #484848; border-width: 1.5px; border-style: solid; border-color: black; padding: 3px; font-weight: 700; } .btn { border-radius: 3px; background-color: black; color: whitesmoke; font-weight: 700; cursor: pointer; } After writing the above code, the page will look something like this:
In the same
App.svelte file you can write the JavaScript part also using a script tag.Initialize the
QR server API with the variable and also initialize the above-used variables inside the script tag. The dataSubmit() function should also be defined there.App.svelte
<script> let inputText = ""; let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="; function dataSubmit(e) { // logic will go here } </script> Next let’s create a variable which indicates whether or not text is entered by the user and start writing the logic for the QR code:
App.svelte
<script> let inputText = ""; let textPresent = false; let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="; function dataSubmit(e) { if (inputText !== "") { textPresent = true; API_URL += inputText; } } </script> Now we have to add some HTML and the
if block part to show the generated QR code when text is entered:App.svelte
<div class="wrapper"> <h1>QR CODE GENERATOR</h1> <form on:submit={dataSubmit}> <input class="textInput" type="text" placeholder="Enter any text or url..." bind:value={inputText} /> <input class="btn" type="submit" value="Submit" /> </form> {#if textPresent} <img src={API_URL} /><br> <a href={API_URL} download>Download</a> {/if} </div> If
textPresent is true then the markup inside the if block will be visible and included in the DOM.else Block
You can also use an
else block to display something else if the condition of the if statement doesn’t evaluate to true:<div class="wrapper"> <h1>QR CODE GENERATOR</h1> <form on:submit={dataSubmit}> <input class="textInput" type="text" placeholder="Enter any text or url..." bind:value={inputText} /> <input class="btn" type="submit" value="Submit" /> </form> {#if textPresent} <img src={API_URL} /><br> <a href={API_URL} download>Download</a> {:else} <p>No QR code yet! ☹️</p> {/if} </div> Now add a little bit more styling: 🤓
App.svelte
img { margin-top: 100px; margin-bottom: 30px; } a { font-weight: 700px; font-size: 30px; color: black; } Now on entering some text in the input box and clicking submit you will get the QR code representing that text.
Something like this 😍.
Your app is now ready for production! 🥳🔥