Svelte 3: Usando blocos "if"
Tags: ptbr, javascript, webdev, svelte
Published: 2019-10-18 03:45:28

## Aplicativos web aprimorados ciberneticamente

> Neste artigo, veremos como usar os blocos **if** com o Svelte para adicionar alguma lógica de controle de fluxo ao nosso código de marcação.

Os blocos no Svelte começam com a sintaxe **{#block}...{/block}**, portanto, os blocos **if** usam a sintaxe **{#if}...{/if}**. E, como você verá, também podemos adicionar um bloco **else** e/ou blocos **elseif** como parte de um bloco **if**.

Vamos começar com o exemplo mais simples, onde apenas mostramos algumas marcações se o valor da prop **lightsOn** for verdadeiro:

```html
<script>
  export let lightsOn;
</script>

{#if lightsOn}
  <p>I can see clearly now!</p>
{/if}
```

Também podemos adicionar um bloco **else** usando a sintaxe **{:else}**:

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

Também podemos adicionar quantos blocos de **elseif** nós quisermos com a sintaxe **{:else if condition}**. Vamos modificar um pouco o nosso exemplo:

```html
<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}
```

E no exemplo acima, também poderíamos ter adicionado um bloco **else** como o último item em nosso bloco **if**, para adicionar alguma marcação se nenhuma de nossas condições for verdadeira.

Em seguida, vamos ver um exemplo de um aplicativo que usa um bloco if para ocultar ou exibir alguma marcação. O exemplo também será um bom lembrete sobre como inicializar um novo projeto Svelte.

Sinta-se à vontade para pular essa parte se sentir que já tem uma boa idéia sobre a configuração de um projeto Svelte e o uso de blocos if.

---

Quer ver o exemplo final funcionando? Você pode acessar o live demo que criei no CodeSandbox:

- https://codesandbox.io/s/live-demo-article-svelte-if-blocks-dfiib

{% codesandbox live-demo-article-svelte-if-blocks-dfiib runonclick=1 %}

---

# Nosso Exemplo

Para ajudar a ilustrar e aprofundar o conhecimento sobre os blocos, criaremos um aplicativo **gerador de QR Code**, com a ajuda desta [API de geração de QR Code](http://goqr.me/api/).

Então, vamos começar nossa jornada com este mini projeto 🚣‍.

# Configuração do Projeto

- Instale a versão recomendada do Node.js, se você não tiver um.
- Crie uma pasta para o novo projeto.

Agora abra seu terminal, e na nova pasta, digite os comandos abaixo:

```bash
$ npx degit sveltejs/template qr-code-generator
$ cd qr-code-generator
$ npm install
```

Agora, para ver se você configurou seu projeto corretamente ou não, execute o comando abaixo:

```bash
$ npm run dev
```

Abrindo **http://localhost:5000** no seu navegador, veremos algo como:

![](https://d33wubrfki0l68.cloudfront.net/bbd3557cd846ca08ad5cd5f09fe051ec535830ac/f7df6/images/svelte/using-if-blocks/sveltesetup.png)

Sua estrutura de arquivos será semelhante a isso:

```bash
qr-code-generator
  |- node_modules  
  |- index.js
  |- public
  |- src
    |- App.svelte
    |- main.js
```

O **App.svelte** é o arquivo principal onde escreveremos nosso código. Comece excluindo todo o seu conteúdo.

# Construindo o Projeto

Vamos primeiro começar com a parte da marcação HTML e fazer um pequeno formulário para enviar o texto digitado para o qual você precisa gerar o QR Code.

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

Temos **dataSubmit** que é uma função que iremos usar na parte JavaScript. O **on:submit** é semelhante ao nativo **onsubmit()** e é usado como manipulador de eventos para o evento **submit** do formulário. Observe como também usamos o modificador **preventDefault** para evitar a necessidade de adicionar um código adicional à nossa função de manipulador.

Em **bind:value={inputText}** fazemos a ligação bidirecional entre o valor da entrada e a variável **inputText**.

Você também pode escrever o CSS no mesmo arquivo **App.svelte** usando uma tag **style**:


```css
.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;
}
```

Depois de escrever o código acima, a página ficará mais ou menos assim:

![](https://d33wubrfki0l68.cloudfront.net/d4aa0a193bba2c74f92bd6fd18292af076fa755c/564c6/images/svelte/using-if-blocks/svelte-qr-code.png)

# Escrevendo o JavaScript

No mesmo arquivo **‌App.svelte**, você também pode escrever a parte do JavaScript em uma tag **script**.

Iremos criar a variável com o endereço do servidor da API do QR Code e também as variáveis do exemplo usado pelo HTML, como **dataSubmit**.

```html
<script>
let qrCodeUrl = "";
let inputText = "";
let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
function dataSubmit(e) {
  // logic will go here
}
</script>
```

Em seguida, vamos criar uma variável que indica se o texto é ou não digitado pelo usuário e começar a escrever a lógica do código do QR Code:

```html
<script>
let qrCodeUrl = "";
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;
    qrCodeUrl = API_URL + inputText;
  }
}
</script>
```

# Criando os blocos "if"

Agora temos que adicionar um pouco de HTML e os blocos **if** para mostrar o código QR gerado quando o texto é inserido:

```html
<div  class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit|preventDefault={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={qrCodeUrl} /><br>
    <a href={qrCodeUrl} download>Download</a> 
  {/if}
</div>
```

Se **textPresent** for verdadeiro, a marcação dentro do bloco **if** será visível e incluída no DOM.

# Blocos "else"

Você também pode usar um blocl **else** para exibir outra coisa se a condição do **if** não for avaliada como verdadeira:

```html
<div  class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit|preventDefault={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={qrCodeUrl} /><br>
    <a href={qrCodeUrl} download>Download</a> 
  {:else}
    <p>No QR code yet! ☹️</p>
  {/if}
</div>
```

Agora adicione um pouco mais de estilo: 🤓

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

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

Agora, ao digitar algum texto na caixa de entrada e clicar em enviar, você obterá o código QR que representa esse texto.

Algo assim 😍.

![](https://d33wubrfki0l68.cloudfront.net/6cf725520c890008a4ca61988cd1707e9dd1485f/6d4e1/images/svelte/using-if-blocks/final-qr-code.png)

Seu aplicativo está pronto para produção! 🥳🔥

# # Créditos ⭐️

- [Using if Blocks in Svelte](https://alligator.io/svelte/using-if-blocks/), escrito originalmente por [@alligatorio](https://mobile.twitter.com/alligatorio)