Mostre aos Usuários o Que Estão Reservando

Imagine preencher um formulário longo, clicar em enviar e só então perceber que cometeu um erro de digitação no e-mail ou selecionou a data errada. Frustrante, não é? Você precisa voltar, encontrar o erro, corrigir e enviar novamente.

Agora imagine o seguinte: à medida que você digita em cada campo, você vê um painel de prévia que mostra exatamente o que está inserindo. Erros de digitação ficam evidentes imediatamente. Datas erradas se destacam. Você pode corrigir os problemas antes de clicar em enviar, não depois.

É isso que as prévias em tempo real oferecem — feedback instantâneo que aumenta a confiança e reduz erros.

Por Que Isso É Importante para o BookIt

Em uma aplicação de reservas, erros têm consequências:

E-mail errado? O cliente nunca recebe a confirmação
Data errada? Ele aparece no dia errado
Horário errado? Conflitos de dupla reserva
Notas confusas? O prestador de serviço não consegue se preparar adequadamente

Uma prévia em tempo real detecta esses problemas instantaneamente. Os usuários veem os detalhes da reserva formatados de forma clara enquanto digitam, dando-lhes a chance de verificar tudo antes de enviar.

O Que Estamos Construindo

Nesta lição, você adicionará um painel de prévia ao lado do formulário de reserva. À medida que os usuários preenchem os campos:

O nome deles aparece na prévia imediatamente
O e-mail é exibido enquanto digitam
As datas são mostradas em formato legível por humanos ("segunda-feira, 15 de junho de 2025" e não "2025-06-15")
Os horários são convertidos para o formato de 12 horas ("2:00 PM" e não "14:00")
Campos vazios exibem placeholders úteis ("Não informado" e não espaço em branco)

Isso é a reatividade do Svelte no seu melhor — sem atualizações manuais do DOM, sem event listeners, apenas atualizações automáticas da UI quando o estado muda.

O Que Você Aprenderá

Exibir estado reativo em um painel de prévia
Tratar estados vazios/incompletos de forma elegante
Criar uma experiência de usuário melhor com feedback em tempo real

Adicionar uma Seção de Prévia

Lembra da tag <pre> de depuração que adicionamos na última lição para verificar se o binding estava funcionando? Agora vamos substituí-la por um painel de prévia refinado, com aparência profissional e que oferece valor real aos usuários.

O Layout em Duas Colunas

Vamos criar um layout lado a lado:

Lado esquerdo: O formulário de reserva (o que já temos)
Lado direito: Painel de prévia em tempo real (o que estamos adicionando agora)

Esse layout permite que os usuários vejam o formulário e a prévia simultaneamente, sem precisar rolar a página.

Entendendo a Estrutura da Prévia

A prévia utilizará uma lista de definições (<dl>) com pares de termo/descrição:

<dl>
	<dt>Name</dt>
	<!-- Term: the label -->
	<dd>Jane Smith</dd>
	<!-- Description: the value -->
</dl>

Este é HTML semântico para pares de chave-valor, e é perfeito para exibir dados estruturados como detalhes de uma reserva.

Adicionando a Prévia

Substitua todo o seu BookingForm.svelte por esta versão atualizada:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
	let customerName = $state('')
	let email = $state('')
	let date = $state('')
	let time = $state('')
	let notes = $state('')
</script>

<div class="booking-container">
	<form>
		<h2>Book a Service</h2>

		<div class="field">
			<label for="name">Your Name</label>
			<input type="text" id="name" name="name" placeholder="Jane Smith" bind:value={customerName} />
		</div>

		<div class="field">
			<label for="email">Email Address</label>
			<input
				type="email"
				id="email"
				name="email"
				placeholder="jane@example.com"
				bind:value={email}
			/>
		</div>

		<div class="field">
			<label for="date">Preferred Date</label>
			<input type="date" id="date" name="date" bind:value={date} />
		</div>

		<div class="field">
			<label for="time">Preferred Time</label>
			<select id="time" name="time" bind:value={time}>
				<option value="">Select a time...</option>
				<option value="09:00">9:00 AM</option>
				<option value="10:00">10:00 AM</option>
				<option value="11:00">11:00 AM</option>
				<option value="13:00">1:00 PM</option>
				<option value="14:00">2:00 PM</option>
				<option value="15:00">3:00 PM</option>
			</select>
		</div>

		<div class="field">
			<label for="notes">Additional Notes</label>
			<textarea
				id="notes"
				name="notes"
				rows="3"
				placeholder="Any special requests?"
				bind:value={notes}
			></textarea>
		</div>

		<button type="submit">Request Booking</button>
	</form>

	<aside class="preview">
		<h3>Booking Preview</h3>

		<dl>
			<dt>Name</dt>
			<dd>{customerName || 'Not entered'}</dd>

			<dt>Email</dt>
			<dd>{email || 'Not entered'}</dd>

			<dt>Date</dt>
			<dd>{date || 'Not selected'}</dd>

			<dt>Time</dt>
			<dd>{time || 'Not selected'}</dd>

			<dt>Notes</dt>
			<dd>{notes || 'None'}</dd>
		</dl>
	</aside>
</div>

O Que Mudou?

Três adições principais:

1. Div de envoltório:

<div class="booking-container">

Isso envolve tanto o formulário quanto a prévia, permitindo que os estilizemos como um container flex (layout lado a lado).

2. O painel de prévia:

<aside class="preview">
	<h3>Booking Preview</h3>
	<dl>...</dl>
</aside>

Usamos <aside> porque a prévia é um conteúdo complementar — relacionado ao formulário principal, mas não o conteúdo primário. O <dl> (lista de definições) exibe pares de chave-valor.

3. Exibição reativa com fallbacks:

<dd>{customerName || 'Not entered'}</dd>

Esta é a parte crucial. Vamos analisá-la.

Entendendo o Padrão de Fallback

A expressão {customerName || 'Not entered'} utiliza o operador lógico OR do JavaScript:

Se customerName tiver um valor (como "Jane Smith"), ele é truthy, então é exibido
Se customerName estiver vazio (""), ele é falsy, então 'Not entered' é exibido no lugar

Isso evita mostrar espaços em branco quando os campos estão vazios. Compare:

<!-- ❌ Bad: Shows blank space when empty -->
<dd>{customerName}</dd>

<!-- ✅ Good: Shows helpful placeholder -->
<dd>{customerName || 'Not entered'}</dd>

Strings vazias são falsy em JavaScript, então "" || 'fallback' é avaliado como 'fallback'.

Por Que Isso Funciona Reativamente

Aqui está a mágica: toda vez que os usuários digitam no campo de nome:

bind:value={customerName} atualiza o estado customerName
O Svelte detecta a mudança de estado
O Svelte re-renderiza a linha <dd>{customerName || 'Not entered'}</dd>
A prévia é atualizada instantaneamente

Você não escreveu nenhum código para que isso acontecesse. Sem addEventListener, sem manipulação manual do DOM. A reatividade do Svelte cuida disso automaticamente.

A Prévia É Apenas Outro Uso do Estado

Pense no que construímos:

O campo de entrada do formulário é um uso de customerName (via bind:value)
A exibição na prévia é outro uso de customerName (via {customerName || ...})
Ambos ficam sincronizados automaticamente porque referenciam o mesmo estado reativo

Este é o poder da programação declarativa — você declara o que deve aparecer onde, e o Svelte descobre como manter tudo em sincronia.

Testar a Prévia

Acesse a página de um serviço e comece a digitar nos campos do formulário. Observe o painel de prévia ser atualizado a cada tecla pressionada.

Isso é a reatividade do Svelte em ação:

Digite em qualquer campo → a prévia é atualizada instantaneamente
Limpe um campo → a prévia exibe o texto de fallback
Sem atualizações manuais do DOM, sem event handlers necessários

A mesma variável $state alimenta tanto o bind:value (entrada) quanto o {value} (exibição), mantendo-os sincronizados automaticamente.

As 2 seções a seguir são dedicadas à formatação de Data e Hora. Elas não estão relacionadas ao Svelte, sendo apenas JavaScript puro — você pode pulá-las.

Formatar a Data

Melhorando a Exibição de Data com JS Puro

Atualmente, o campo de data exibe o valor bruto como 2025-06-15. Vamos melhorar isso formatando para uma string mais amigável ao usuário, como "domingo, 15 de junho de 2025".

Adicione uma função de formatação ao seu bloco <script>:

<script>
	let customerName = $state('')
	let email = $state('')
	let date = $state('')
	let time = $state('')
	let notes = $state('')

	function formatDate(dateString) {
		if (!dateString) return 'Not selected'

		const dateObj = new Date(dateString + 'T00:00:00')
		return dateObj.toLocaleDateString('en-US', {
			weekday: 'long',
			year: 'numeric',
			month: 'long',
			day: 'numeric'
		})
	}
</script>

Entendendo a Função

Vamos analisar o que essa função faz:

1. Tratar datas vazias:

if (!dateString) return 'Not selected'

Se o usuário ainda não selecionou uma data (date é ""), exiba um placeholder amigável em vez de lançar um erro ou mostrar "Data Inválida".

2. Criar um objeto Date:

const dateObj = new Date(dateString + 'T00:00:00')

Acrescentamos 'T00:00:00' à string de data para especificar meia-noite. Sem isso, o JavaScript pode interpretar a data em UTC e exibir o dia errado devido à conversão de fuso horário. Adicionar o horário garante que obtenhamos exatamente a data que o usuário selecionou.

3. Formatar a data:

return dateObj.toLocaleDateString('en-US', {
	weekday: 'long', // "Sunday"
	year: 'numeric', // "2025"
	month: 'long', // "June"
	day: 'numeric' // "15"
})

O método toLocaleDateString formata datas de acordo com as convenções de localidade. O objeto de opções especifica:

weekday: 'long' — Nome completo do dia ("domingo" e não "dom")
month: 'long' — Nome completo do mês ("junho" e não "jun" ou "06")
year e day como números

Usando o Formatador

Agora atualize a prévia para usar essa função em vez de exibir a data bruta:

<dt>Date</dt><dd>{formatDate(date)}</dd>

Em vez de:

<dd>{date || 'Not selected'}</dd>

A lógica de fallback (|| 'Not selected') agora está dentro da função, mantendo o template limpo.

Testar a Data Formatada

Atualize a página e selecione uma data. Em vez de ver 2025-06-15, você deverá ver algo como:

"Sunday, June 15, 2025"

Muito melhor! Esse é o tipo de refinamento que faz as aplicações parecerem profissionais.

Por Que Usar Funções para Formatação?

Você pode se perguntar: "Por que não formatar diretamente no template?"

<!-- ❌ Don't do this -->
<dd>
  {#if date}
    {new Date(date + 'T00:00:00').toLocaleDateString('en-US', {...})}
  {:else}
    Not selected
  {/if}
</dd>

Isso funciona, mas:

O template fica poluído e difícil de ler
A lógica de formatação não pode ser reutilizada em outros lugares
É mais difícil de testar
Mistura apresentação (template) com lógica (formatação)

Extrair para uma função mantém os templates limpos e a lógica testável.

Formatar o Horário

Vamos converter "14:00" em "2:00 PM". Adicione esta função:

<script>
	// ... existing state ...

	function formatTime(timeString) {
		if (!timeString) return 'Not selected'

		const [hours, minutes] = timeString.split(':')
		const hour = parseInt(hours)
		const ampm = hour >= 12 ? 'PM' : 'AM'
		const displayHour = hour % 12 || 12

		return `${displayHour}:${minutes} ${ampm}`
	}
</script>

Usando o Formatador de Horário

Atualize o preview para usar esta função:

<dt>Time</dt>
<dd>{formatTime(time)}</dd>

O Componente Completo

Aqui está o BookingForm.svelte completo com preview e formatação:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
	let customerName = $state('')
	let email = $state('')
	let date = $state('')
	let time = $state('')
	let notes = $state('')

	/**
	 * @param {string} dateString
	 */
	function formatDate(dateString) {
		if (!dateString) return 'Not selected'

		const dateObj = new Date(dateString + 'T00:00:00')
		return dateObj.toLocaleDateString('en-US', {
			weekday: 'long',
			year: 'numeric',
			month: 'long',
			day: 'numeric'
		})
	}

	/**
	 * @param {string} timeString
	 */
	function formatTime(timeString) {
		if (!timeString) return 'Not selected'

		const [hours, minutes] = timeString.split(':')
		const hour = parseInt(hours)
		const ampm = hour >= 12 ? 'PM' : 'AM'
		const displayHour = hour % 12 || 12

		return `${displayHour}:${minutes} ${ampm}`
	}
</script>

<div class="booking-container">
	<form>
		<h2>Book a Service</h2>

		<div class="field">
			<label for="name">Your Name</label>
			<input type="text" id="name" name="name" placeholder="Jane Smith" bind:value={customerName} />
		</div>

		<div class="field">
			<label for="email">Email Address</label>
			<input
				type="email"
				id="email"
				name="email"
				placeholder="jane@example.com"
				bind:value={email}
			/>
		</div>

		<div class="field">
			<label for="date">Preferred Date</label>
			<input type="date" id="date" name="date" bind:value={date} />
		</div>

		<div class="field">
			<label for="time">Preferred Time</label>
			<select id="time" name="time" bind:value={time}>
				<option value="">Select a time...</option>
				<option value="09:00">9:00 AM</option>
				<option value="10:00">10:00 AM</option>
				<option value="11:00">11:00 AM</option>
				<option value="13:00">1:00 PM</option>
				<option value="14:00">2:00 PM</option>
				<option value="15:00">3:00 PM</option>
			</select>
		</div>

		<div class="field">
			<label for="notes">Additional Notes</label>
			<textarea
				id="notes"
				name="notes"
				rows="3"
				placeholder="Any special requests?"
				bind:value={notes}
			></textarea>
		</div>

		<button type="submit">Request Booking</button>
	</form>

	<aside class="preview">
		<h3>Booking Preview</h3>

		<dl>
			<dt>Name</dt>
			<dd>{customerName || 'Not entered'}</dd>

			<dt>Email</dt>
			<dd>{email || 'Not entered'}</dd>

			<dt>Date</dt>
			<dd>{formatDate(date)}</dd>

			<dt>Time</dt>
			<dd>{formatTime(time)}</dd>

			<dt>Notes</dt>
			<dd>{notes || 'None'}</dd>
		</dl>
	</aside>
</div>

Por Que Usar Previews ao Vivo?

Embora os previews ao vivo dos dados do formulário sejam opcionais, alguns clientes podem constatar que eles melhoram significativamente a experiência do usuário ao fornecer feedback imediato e reduzir erros.

Com a reatividade do Svelte, esse padrão requer código mínimo:

<input bind:value={customerName} /><dd>{customerName || 'Not entered'}</dd>

Sem event listeners, sem atualizações manuais do DOM. O Svelte sincroniza automaticamente a entrada e a exibição.

Erros Comuns

Esquecer Valores de Fallback

<!-- ❌ Shows nothing when empty -->
<dd>{customerName}</dd>

<!-- ✅ Shows placeholder -->
<dd>{customerName || 'Not entered'}</dd>

Lógica Complexa em Templates

<!-- ❌ Hard to read -->
<dd>
	{#if date}
		{new Date(date + 'T00:00:00').toLocaleDateString('en-US', {...})}
	{:else}
		Not selected
	{/if}
</dd>

<!-- ✅ Extract to function -->
<dd>{formatDate(date)}</dd>

Mantenha os templates limpos. Mova a lógica de formatação para funções.

Resumo

O formulário de reserva agora exibe um preview ao vivo que é atualizado conforme o usuário digita. Isso demonstra o modelo de reatividade central do Svelte:

Conceitos-chave do Svelte:

$state cria valores reativos
bind:value conecta inputs ao estado (bidirecional)
{value} exibe o estado nos templates
Alterações no estado atualizam automaticamente todos os lugares onde ele é utilizado
Nenhum event listener ou atualização manual do DOM é necessário

O que você não precisou escrever:

Handlers de eventos para mudanças nos inputs
Código para atualizar o preview
Lógica de sincronização entre o formulário e a exibição

O compilador do Svelte gerou toda a infraestrutura reativa automaticamente.

Próximos Passos

Os usuários podem preencher o formulário e visualizar um preview, mas o botão de envio ainda não faz nada. Continue com Tratar o Botão de Envio para capturar os envios do formulário.