Using if Blocks in Svelte

We can also add any number of elseif blocks with the {:else if condition} syntax. Let’s modify our example a little:

<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.

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 🚣‍.

• Install the recommended version of the Node if 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 App.svelte. this is the main file where we’ll write our code. Start by deleting all its content.

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.

<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:

<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:

<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.

<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>

img {
  margin-top: 100px;
  margin-bottom: 30px;
}

a {
  font-weight: 700px;
  font-size: 30px;
  color: black;
}