Muéstrale a los Usuarios Lo Que Están Reservando

Imagina que completas un formulario largo, haces clic en enviar y recién entonces descubres que cometiste un error tipográfico en tu correo electrónico o seleccionaste la fecha incorrecta. Frustrante, ¿verdad? Tienes que volver, encontrar el error, corregirlo y enviar de nuevo.

Ahora imagina lo siguiente: mientras escribes en cada campo, ves un panel de vista previa que muestra exactamente lo que estás ingresando. Los errores tipográficos son evidentes de inmediato. Las fechas incorrectas se destacan. Puedes corregir los errores antes de hacer clic en enviar, no después.

Esto es lo que ofrecen las vistas previas en vivo — retroalimentación en tiempo real que genera confianza y reduce errores.

Por Qué Esto Es Importante para BookIt

En una aplicación de reservas, los errores tienen un costo:

¿Correo electrónico incorrecto? El cliente nunca recibe la confirmación
¿Fecha incorrecta? Se presenta el día equivocado
¿Hora incorrecta? Conflictos de doble reserva
¿Notas poco claras? El proveedor del servicio no puede prepararse correctamente

Una vista previa en vivo detecta estos problemas al instante. Los usuarios ven los detalles de su reserva formateados con claridad mientras escriben, dándoles la oportunidad de verificar todo antes de enviar.

Qué Estamos Construyendo

En esta lección, añadirás un panel de vista previa junto al formulario de reserva. A medida que los usuarios completan los campos:

Su nombre aparece en la vista previa de inmediato
El correo electrónico se muestra mientras escriben
Las fechas se muestran en formato legible para personas ("lunes, 15 de junio de 2025" y no "2025-06-15")
Los horarios se convierten al formato de 12 horas ("2:00 PM" y no "14:00")
Los campos vacíos muestran marcadores de posición útiles ("No ingresado" y no espacio en blanco)

Esto es la reactividad de Svelte en su mejor momento — sin actualizaciones manuales del DOM, sin event listeners, solo actualizaciones automáticas de la interfaz cuando el estado cambia.

Qué Aprenderás

Mostrar estado reactivo en un panel de vista previa
Manejar estados vacíos/incompletos de manera elegante
Crear una mejor experiencia de usuario con retroalimentación en tiempo real

Agregar una Sección de Vista Previa

¿Recuerdas la etiqueta <pre> de depuración que agregamos en la lección anterior para verificar que el binding funcionaba? Ahora la reemplazaremos con un panel de vista previa pulido que se ve profesional y aporta valor real a los usuarios.

El Diseño de Dos Columnas

Vamos a crear un diseño lado a lado:

Lado izquierdo: El formulario de reserva (lo que ya tenemos)
Lado derecho: Panel de vista previa en vivo (lo que estamos agregando ahora)

Este diseño permite a los usuarios ver el formulario y la vista previa simultáneamente sin necesidad de desplazarse.

Entendiendo la Estructura de la Vista Previa

La vista previa utilizará una lista de definición (<dl>) con pares término/descripción:

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

Este es HTML semántico para pares clave-valor, y es perfecto para mostrar datos estructurados como los detalles de una reserva.

Agregar la Vista Previa

Reemplaza todo el contenido de BookingForm.svelte con esta versión actualizada:

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

¿Qué Cambió?

Tres adiciones clave:

1. Div contenedor:

<div class="booking-container">

Esto envuelve tanto el formulario como la vista previa, permitiéndonos aplicarles estilo como contenedor flex (diseño lado a lado).

2. El panel de vista previa:

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

Usamos <aside> porque la vista previa es contenido complementario — relacionado con el formulario principal pero no el contenido primario. El <dl> (lista de definición) muestra pares clave-valor.

3. Visualización reactiva con valores de respaldo:

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

Esta es la parte crucial. Analicémosla en detalle.

Entendiendo el Patrón de Respaldo

La expresión {customerName || 'Not entered'} usa el operador lógico OR de JavaScript:

Si customerName tiene un valor (como "Jane Smith"), es verdadero (truthy), por lo que se muestra
Si customerName está vacío (""), es falso (falsy), por lo que se muestra 'Not entered' en su lugar

Esto evita mostrar espacios en blanco cuando los campos están vacíos. Compara:

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

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

Las cadenas vacías son falsy en JavaScript, por lo que "" || 'fallback' se evalúa como 'fallback'.

Por Qué Esto Funciona de Forma Reactiva

Aquí está la magia: cada vez que el usuario escribe en el campo de nombre:

bind:value={customerName} actualiza el estado customerName
Svelte detecta el cambio de estado
Svelte vuelve a renderizar la línea <dd>{customerName || 'Not entered'}</dd>
La vista previa se actualiza al instante

No escribiste ningún código para que esto sucediera. Sin addEventListener, sin manipulación manual del DOM. La reactividad de Svelte lo maneja automáticamente.

La Vista Previa Es Solo Otro Uso del Estado

Piensa en lo que hemos construido:

El campo de entrada del formulario es un uso de customerName (mediante bind:value)
La visualización en la vista previa es otro uso de customerName (mediante {customerName || ...})
Ambos se mantienen sincronizados automáticamente porque hacen referencia al mismo estado reactivo

Este es el poder de la programación declarativa — declaras qué debe aparecer y dónde, y Svelte se encarga de mantener todo sincronizado.

Probar la Vista Previa

Visita la página de un servicio y comienza a escribir en los campos del formulario. Observa cómo el panel de vista previa se actualiza con cada tecla que presionas.

Esto es la reactividad de Svelte en acción:

Escribe en cualquier campo → la vista previa se actualiza al instante
Borra un campo → la vista previa muestra el texto de respaldo
Sin actualizaciones manuales del DOM, sin manejadores de eventos necesarios

La misma variable $state impulsa tanto bind:value (entrada) como {value} (visualización), manteniéndolos sincronizados automáticamente.

Las siguientes 2 secciones están dedicadas al formato de Fecha y Hora. No están relacionadas con Svelte, es solo JavaScript estándar — puedes omitirlas.

Formatear la Fecha

Mejorar la Visualización de Fechas con JS estándar

Por ahora, el campo de fecha muestra el valor sin procesar, como 2025-06-15. Vamos a mejorar eso formateándolo a una cadena más amigable para el usuario como "domingo, 15 de junio de 2025".

Agrega una función de formato a tu bloque <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>

Entendiendo la Función

Analicemos qué hace esta función:

1. Manejar fechas vacías:

if (!dateString) return 'Not selected'

Si el usuario todavía no ha seleccionado una fecha (date es ""), muestra un marcador de posición amigable en lugar de lanzar un error o mostrar "Invalid Date".

2. Crear un objeto Date:

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

Añadimos 'T00:00:00' a la cadena de fecha para especificar la medianoche. Sin esto, JavaScript podría interpretar la fecha en UTC y mostrar el día incorrecto debido a la conversión de zona horaria. Agregar la hora garantiza que obtenemos exactamente la fecha que el usuario seleccionó.

3. Formatear la fecha:

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

El método toLocaleDateString formatea las fechas según las convenciones locales. El objeto de opciones especifica:

weekday: 'long' — Nombre completo del día ("Sunday" y no "Sun")
month: 'long' — Nombre completo del mes ("June" y no "Jun" ni "06")
year y day como números

Usar el Formateador

Ahora actualiza la vista previa para usar esta función en lugar de mostrar la fecha sin procesar:

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

En lugar de:

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

La lógica de respaldo (|| 'Not selected') ahora está dentro de la función, manteniendo el template limpio.

Prueba la Fecha Formateada

Recarga la página y selecciona una fecha. En lugar de ver 2025-06-15, deberías ver algo como:

"Sunday, June 15, 2025"

¡Mucho mejor! Este es el tipo de pulido que hace que las aplicaciones se sientan profesionales.

¿Por Qué Funciones para Formatear?

Quizás te preguntes: "¿Por qué no formatear directamente en el template?"

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

Esto funciona, pero:

El template se vuelve desordenado y difícil de leer
La lógica de formateo no puede reutilizarse en otro lugar
Es más difícil de probar
Mezcla presentación (template) con lógica (formateo)

Extraer a una función mantiene los templates limpios y la lógica comprobable.

Formatea la Hora

Convirtamos "14:00" a "2:00 PM". Agrega esta función:

<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 el Formateador de Hora

Actualiza la vista previa para usar esta función:

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

El Componente Completo

Aquí está el BookingForm.svelte completo con vista previa y formateo:

<!-- 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 Qué Vistas Previas en Tiempo Real?

Si bien las vistas previas en tiempo real de los datos del formulario son opcionales, algunos clientes pueden encontrar que mejoran significativamente la experiencia de usuario al proporcionar retroalimentación inmediata y reducir errores.

Con la reactividad de Svelte, este patrón requiere un código mínimo:

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

Sin escuchadores de eventos, sin actualizaciones manuales del DOM. Svelte sincroniza automáticamente la entrada y la visualización.

Errores Comunes

Olvidar los Valores de Respaldo

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

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

Lógica Compleja en los 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>

Mantén los templates limpios. Mueve la lógica de formateo a funciones.

Resumen

El formulario de reserva ahora muestra una vista previa en tiempo real que se actualiza mientras los usuarios escriben. Esto demuestra el modelo de reactividad central de Svelte:

Conceptos clave de Svelte:

$state crea valores reactivos
bind:value conecta las entradas al estado (bidireccional)
{value} muestra el estado en los templates
Los cambios en el estado actualizan automáticamente todos los lugares donde se usa
No se necesitan escuchadores de eventos ni actualizaciones manuales del DOM

Lo que no tuviste que escribir:

Manejadores de eventos para cambios en las entradas
Código para actualizar la vista previa
Lógica de sincronización entre el formulario y la visualización

El compilador de Svelte generó toda la fontanería reactiva automáticamente.

Próximos Pasos

Los usuarios pueden completar el formulario y ver una vista previa, pero el botón de envío aún no hace nada. Continúa con Handle the Submit Button para capturar los envíos del formulario.