Skip to main content

​
Quick Start

Get up and running with ITV Gestion Concesionario in just a few steps. This guide will walk you through the complete workflow from opening the application to generating your first ITV report.
The application runs entirely in your web browser. No installation or backend server is required.

​
Getting Started

1

Open the Application

Open index.html in your web browser. You’ll see the main interface with the ITV form header and client information section.The application features a modern gradient design with a glassmorphism container for a professional look.
For the best experience, use a modern browser like Chrome, Firefox, Safari, or Edge with JavaScript enabled.
2

Enter Client Information

Fill in the initial client form with the following required fields:
  • Nombre (Name): Client’s first name
  • Apellidos (Surname): Client’s last name
  • Razón Social (Business Name): Company name or “Particular” for individuals
  • Nº de Vehículos (Number of Vehicles): How many vehicles need inspection (1-50)
// The system validates these fields before proceeding
const nombre = document.getElementById("nombre").value.trim();
const apellidos = document.getElementById("apellidos").value.trim();
const razonSocial = document.getElementById("razonSocial").value.trim();
const nAutosInput = document.getElementById("nAutos").value.trim();
All fields are required. The system validates that:
  • No fields are empty
  • Vehicle number is between 1-50
  • Vehicle number is a valid integer
Example Input:
  • Name: “Juan”
  • Surname: “García”
  • Business Name: “AutoGarcia S.L.”
  • Number of Vehicles: “3”
3

Generate Vehicle Forms

Click the “Generar Formularios” (Generate Forms) button. The system will:
  1. Validate all input fields
  2. Show a loading animation
  3. Dynamically generate individual forms for each vehicle
// Dynamic form generation (script.js:44)
function generarFormulariosVehiculos() {
    const contenedor = document.getElementById("formularios");
    for (let i = 1; i <= numeroAutos; i++) {
        const vehiculoHTML = crearFormularioVehiculo(i);
        contenedor.innerHTML += vehiculoHTML;
    }
}
Each vehicle form includes:
  • Vehicle number identifier
  • Engine type selection (radio buttons)
  • ITV approval status (radio buttons)
  • Observations text area
4

Complete Vehicle Information

For each vehicle form, provide the following information:

​
Engine Type (Required)

Select one of the following options:
  • 🛢️ Diesel - €50 per inspection
  • ⛽ Gasolina (Gasoline) - €45 per inspection
  • 🔋 Híbrido (Hybrid) - €35 per inspection
  • ⚡ Eléctrico (Electric) - €30 per inspection

​
ITV Status (Required)

Select the inspection result:
  • ✅ Aprobado (Approved) - Vehicle passed inspection
  • ❌ No Aprobado (Not Approved) - Vehicle failed inspection

​
Observations (Optional)

Add any relevant notes about the vehicle’s condition:
<textarea
    id="observaciones1"
    class="caja-texto"
    placeholder="Ingrese observaciones sobre el estado del vehículo..."
    maxlength="250"
    rows="4">
</textarea>
Observations are limited to 250 characters per vehicle and support multiline input.
Example for Vehicle #1:
  • Engine Type: Diesel
  • ITV Status: Approved
  • Observations: “Brake pads at 60%, recommended replacement in 6 months”
5

Calculate Results

After completing all vehicle forms, click “Calcular Resultados” (Calculate Results).The system will:
  1. Validate all vehicle forms are complete
  2. Process data for all vehicles
  3. Calculate total costs based on engine types
  4. Display comprehensive results
// Cost calculation with tariff rates (script.js:268)
function calcularYMostrarTotal() {
    const tarifas = {
        "Diesel": 50,
        "Gasolina": 45,
        "Hibrido": 35,
        "Electrico": 30
    };
    
    // Count vehicles by engine type
    vehiculosData.forEach(vehiculo => {
        contadores[vehiculo.motorizacion]++;
    });
    
    // Calculate total cost
    const totalGeneral = costos.diesel + costos.gasolina + 
                        costos.hibrido + costos.electrico;
}
If any vehicle form is incomplete, the system will display an error message specifying which vehicle needs attention.
6

View Results

The results screen displays four main sections:

​
👤 Client Information

Shows the client data entered in step 2:
  • Full name
  • Business name
  • Number of vehicles processed

​
💰 Total to Pay

Displays an itemized breakdown:
// Example output:
🛢️ 2 Diesel: 100€
⛽ 1 Gasolina: 45€
💰 Total: 145€

​
✅ ITV Status

Shows the approval status for each vehicle:
✅ Vehículo Nº 1: Aprobado
✅ Vehículo Nº 2: Aprobado
❌ Vehículo Nº 3: No Aprobado

​
📝 Observations

Lists all observations recorded for each vehicle.
If no observations were entered, the system displays “Sin observaciones registradas”.
7

Export or Print Results

Use the action buttons to save or share the results:

​
🖨️ Print

Generates a printer-friendly version of the results:
// Print functionality (script.js:551)
function imprimirResultados() {
    // Creates a clean print layout with:
    // - Company header
    // - Client information
    // - Complete results
    // - Timestamp
    window.print();
}

​
📥 Export JSON

Downloads results as a JSON file for data integration:
// Export functionality (script.js:529)
function exportarResultados() {
    const datosExportacion = {
        cliente: obtenerDatosCliente(),
        vehiculos: vehiculosData,
        fecha: new Date().toLocaleDateString('es-ES'),
        hora: new Date().toLocaleTimeString('es-ES')
    };
    // Downloads as: ITV_[Surname]_[Timestamp].json
}

​
🔄 New Form

Resets the application to start a new ITV process:
  • Clears all data
  • Returns to the initial client form
  • Requires confirmation to prevent accidental data loss

​
Validation & Error Handling

The system includes comprehensive validation at every step: 
// Validates required fields (script.js:16)
if (!nombre || !apellidos || !razonSocial || !nAutosInput) {
    mostrarError("Por favor, complete todos los campos obligatorios.");
    return;
}

// Validates vehicle count (script.js:22)
if (isNaN(numeroAutos) || numeroAutos <= 0 || numeroAutos > 50) {
    mostrarError("Por favor, ingrese un número válido de vehículos (1-50).");
    return;
}

// Validates engine type selection (script.js:170)
const motorizacionSeleccionada = document.querySelector(
    `input[name="motorizacion${i}"]:checked`
);
if (!motorizacionSeleccionada) {
    mostrarError(`Por favor, seleccione la motorización para el vehículo ${i}.`);
    return false;
}

// Validates ITV status selection (script.js:177)
const itvSeleccionado = document.querySelector(
    `input[name="aprobados${i}"]:checked`
);
if (!itvSeleccionado) {
    mostrarError(`Por favor, seleccione el estado ITV para el vehículo ${i}.`);
    return false;
}

// Number of vehicles input validation (script.js:489)
nAutosInput.addEventListener("input", function() {
    const valor = parseInt(this.value);
    if (valor > 50) {
        this.value = 50;
        mostrarError("El número máximo de vehículos es 50.");
    }
});

// Auto-capitalize names (script.js:512)
input.addEventListener("input", function() {
    this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1);
});

​
Example Workflow

Here’s a complete example of processing 2 vehicles: 
Name: María
Surname: Rodríguez
Business Name: Particular
Number of Vehicles: 2

​
Tips for Efficient Use

Batch Processing

Process multiple vehicles at once by entering the correct count upfront. This is more efficient than processing vehicles one by one.

Detailed Observations

Use the observations field to record specific findings. This creates valuable documentation for follow-up work.

Regular Exports

Export results to JSON regularly to maintain a digital archive of all inspections performed.

Print for Clients

Use the print function to provide clients with professional documentation of their inspection results.

​
Keyboard Shortcuts & Accessibility

The application includes accessibility features:
  • Tab navigation through all form fields
  • Clear focus indicators on interactive elements
  • Keyboard support for all buttons and inputs
  • Screen reader compatible semantic HTML

​
Troubleshooting

Solution: Ensure all client information fields are filled and the number of vehicles is between 1-50. Check the error message displayed at the top right of the screen.
Solution: Verify that all vehicle forms have both engine type and ITV status selected. Missing selections will trigger a validation error specifying which vehicle needs attention.
Solution: Make sure you’ve calculated results first. The export function requires processed data. Check that your browser allows file downloads.
For additional help or to report issues, contact the developer at [email protected] or visit the GitHub repository.

​
Next Steps

Now that you know how to use the application, explore:
  • Customizing tariff rates in script.js (line 269)
  • Modifying the color scheme in styles.css
  • Adding custom validation rules for your specific requirements

Build docs developers (and LLMs) love

Get started for freeTalk to us