Mostre aos Usuários o que Estão Reservando

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

Agora imagine: enquanto você digita em cada campo, um painel de prévia mostra exatamente o que está sendo inserido. Erros de digitação ficam evidentes imediatamente. Datas erradas saltam aos olhos. Você pode corrigir os erros antes de clicar em enviar, não depois.

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

Por que Isso Importa para o BookIt

Para uma aplicação de reservas, erros têm um custo alto:

E-mail errado? O cliente nunca recebe a confirmação
Data errada? Ele aparece no dia errado
Horário errado? Conflitos de dupla reserva
Observações 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 Vamos Construir

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

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

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

O que Você Vai Aprender

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

Adicionar uma Seção de Prévia

Lembra da tag <pre> de depuração que adicionamos na lição anterior 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 usará 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 é o HTML semântico para pares chave-valor e é perfeito para exibir dados estruturados como detalhes de reserva.

Adicionando a Prévia

Substitua todo o conteúdo do 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 contêiner:

<div class="booking-container">

Isso envolve tanto o formulário quanto a prévia, permitindo estilizá-los como um contêiner 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 chave-valor.

3. Exibição reativa com fallbacks:

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

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

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 de Forma Reativa

Aqui está a mágica: cada vez que o usuário digita 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 Mais um Uso do Estado

Pense no que construímos:

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

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

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.

Esta é 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 automaticamente sincronizados.

As 2 seções seguintes são dedicadas à formatação de data e hora. Elas não estão relacionadas ao Svelte, é apenas JavaScript puro — você pode pulá-las.

Formatar a Data

Melhorando a Exibição da Data com JS puro

Por enquanto, 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 esta função faz:

1. Tratar datas vazias:

if (!dateString) return 'Not selected'

Se o usuário ainda não selecionou uma data (date é ""), exibe um texto de apoio amigável em vez de lançar um erro ou mostrar "Invalid Date".

2. Criar um objeto Date:

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

Adicionamos '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 obtemos exatamente a data selecionada pelo usuário.

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 ("Sunday", não "Sun")
month: 'long' — Nome completo do mês ("June", não "Jun" ou "06")
year e day como números

Usando o Formatador

Agora atualize a prévia para usar esta 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.

Teste 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 polimento 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 confuso 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.

Formate o Horário

Vamos converter "14:00" para "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 Previews ao Vivo?

Embora os previews ao vivo dos dados do formulário sejam opcionais, alguns clientes podem perceber 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 listeners de eventos, 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 os usuários digitam. Isso demonstra o modelo de reatividade central do Svelte:

Conceitos-chave do Svelte:

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

O que você não precisou escrever:

Handlers de eventos para alterações de entrada
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 estrutura reativa automaticamente.

Próximos Passos

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