Skip to content
Guía JavaScript

DOM

En este proyecto, vamos a realizar el registro de reservas para el alojamiento Phoenix. Deberán crear una aplicación web que permita a los usuarios registrar a los huéspedes, validar los datos ingresados y mostrar la información de la reserva con el precio final correspondiente.

Requisitos

1. Formulario de Registro

Crear un formulario con los siguientes campos:

  • Nombre (texto)
  • Apellido (texto)
  • Teléfono (número)
  • Email (texto)
  • Cantidad de días de estadía (número)
  • Tipo de habitación (selección: Individual, Doble, Suite)

2. Validaciones

  • Campos Requeridos: Todos los campos deben estar completados.
  • Campos Numéricos: Los campos Teléfono y Cantidad de días deben contener solo números.
  • Cantidad de Días: La cantidad de días debe ser mayor o igual a 1.
  • Rango de Precios: Validar que la cantidad de días esté dentro del rango permitido por la tabla de precios.

3. Interacción

  • Al hacer clic en “Registrar huésped”, validar los datos ingresados.
  • Si los datos son inválidos, mostrar los mensajes de error correspondientes cerca del campo que tiene el error (sin usar alert).
  • Si los datos son válidos, agregar debajo del formulario la información del huésped junto con el precio final calculado según la tabla de precios.

4. Tabla de Precios

Tipo de HabitaciónPrecio por Noche
Individual$50
Doble$90
Suite$150

Consideraciones

  • Interacción del Usuario: No usar prompt para pedir los datos al usuario, deben ingresarse en los inputs del formulario. El resultado se mostrará solo cuando el usuario presione el botón “Registrar huésped” (Ayuda: van a tener que usar un evento de JavaScript y manejarlo).
  • Visualización: La parte visual es importante, aunque no es necesario dejarlo hermoso (con que esté estructurado es suficiente). Usar el tiempo en resolver a nivel HTML y JavaScript, y luego agregar CSS básico.
  • Organización del Código: Separar el código en módulos para mantenerlo limpio y organizado, similar a cómo se hizo en el proyecto de ejemplo.

Proyecto de Ejemplo

Pueden basarse en el siguiente ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registro de Reservas</title>
</head>
<body>
<div class="container">
  <h1>Registro de Reservas</h1>
  <form id="registroForm">
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" placeholder="Ingrese el nombre" />
    <span class="error" id="errorNombre"></span>


    <label for="apellido">Apellido</label>
    <input type="text" id="apellido" placeholder="Ingrese el apellido" />
    <span class="error" id="errorApellido"></span>


    <label for="telefono">Teléfono</label>
    <input type="number" id="telefono" placeholder="Ingrese el teléfono" />
    <span class="error" id="errorTelefono"></span>


    <label for="email">Email</label>
    <input type="email" id="email" placeholder="Ingrese el email" />
    <span class="error" id="errorEmail"></span>


    <label for="dias">Cantidad de días</label>
    <input type="number" id="dias" placeholder="Ingrese los días de estadía" />
    <span class="error" id="errorDias"></span>


    <label for="tipoHabitacion">Tipo de Habitación</label>
    <select id="tipoHabitacion">
      <option value="">Seleccione una opción</option>
      <option value="Individual">Individual - $50</option>
      <option value="Doble">Doble - $90</option>
      <option value="Suite">Suite - $150</option>
    </select>
    <span class="error" id="errorTipoHabitacion"></span>


    <button type="submit">Registrar Huésped</button>
  </form>


  <div class="reservas" id="listaReservas">
    <h2>Reservas Registradas</h2>
  </div>
</div>
</body>
</html>