Skip to main content

​
Overview

The ITV pricing system is configured in the JavaScript file at source/js/script.js. Prices are based on vehicle motorization type (Diesel, Gasolina, Híbrido, Eléctrico).

​
Tariff Structure

The pricing configuration is defined in the calcularYMostrarTotal() function: 
function calcularYMostrarTotal() {
    const tarifas = {
        "Diesel": 50,
        "Gasolina": 45,
        "Hibrido": 35,
        "Electrico": 30
    };
    // ... calculation logic
}

​
Current Pricing

Vehicle TypePrice per Vehicle
Diesel 🛢️50€
Gasolina ⛽45€
Híbrido 🔋35€
Eléctrico ⚡30€
Electric vehicles have the lowest tariff (30€) to encourage eco-friendly transportation.

​
How Pricing Works

The application calculates the total cost by:
  1. Counting vehicles by type - Groups all vehicles by their motorization
  2. Applying tariffs - Multiplies the count by the corresponding tariff
  3. Summing totals - Adds all costs together for the final amount
let contadores = {
    "Diesel": 0,
    "Gasolina": 0,
    "Hibrido": 0,
    "Electrico": 0
};

// Contar vehículos por tipo de motorización
vehiculosData.forEach(vehiculo => {
    contadores[vehiculo.motorizacion]++;
});

// Calcular costos por tipo
const costos = {
    diesel: tarifas.Diesel * contadores.Diesel,
    gasolina: tarifas.Gasolina * contadores.Gasolina,
    hibrido: tarifas.Hibrido * contadores.Hibrido,
    electrico: tarifas.Electrico * contadores.Electrico
};

const totalGeneral = costos.diesel + costos.gasolina + costos.hibrido + costos.electrico;

​
Customizing Tariffs

​
Example 1: Increase All Prices by 10€

const tarifas = {
    "Diesel": 60,      // Was 50
    "Gasolina": 55,    // Was 45
    "Hibrido": 45,     // Was 35
    "Electrico": 40    // Was 30
};

​
Example 2: Premium Pricing for Diesel

const tarifas = {
    "Diesel": 75,      // Increased significantly
    "Gasolina": 45,
    "Hibrido": 35,
    "Electrico": 30
};

​
Example 3: Free ITV for Electric Vehicles

const tarifas = {
    "Diesel": 50,
    "Gasolina": 45,
    "Hibrido": 35,
    "Electrico": 0     // Free!
};
Always ensure prices are numeric values (integers or decimals). Non-numeric values will cause calculation errors.

​
Adding Discount Logic

You can add volume discounts by modifying the calculation logic: 
function calcularYMostrarTotal() {
    const tarifas = {
        "Diesel": 50,
        "Gasolina": 45,
        "Hibrido": 35,
        "Electrico": 30
    };

    // ... counting logic ...

    let totalGeneral = costos.diesel + costos.gasolina + costos.hibrido + costos.electrico;
    
    // Apply 10% discount for 5+ vehicles
    if (numeroAutos >= 5) {
        totalGeneral = totalGeneral * 0.9;
    }
    
    // Apply 20% discount for 10+ vehicles
    if (numeroAutos >= 10) {
        totalGeneral = totalGeneral * 0.8;
    }
    
    // Display the total
    document.getElementById("total").innerHTML = `
        <div class="total-desglose">
            ${desglose}
            <div class="total-final">
                💰 Total: ${totalGeneral.toFixed(2)}€
            </div>
        </div>
    `;
}

​
Adding New Vehicle Types

To add a new motorization type (e.g., “Hydrogen”):

​
Step 1: Update the Tariff Object

const tarifas = {
    "Diesel": 50,
    "Gasolina": 45,
    "Hibrido": 35,
    "Electrico": 30,
    "Hidrogeno": 25    // New type
};

​
Step 2: Update the Counter Object

let contadores = {
    "Diesel": 0,
    "Gasolina": 0,
    "Hibrido": 0,
    "Electrico": 0,
    "Hidrogeno": 0     // New counter
};

​
Step 3: Update the Cost Calculation

const costos = {
    diesel: tarifas.Diesel * contadores.Diesel,
    gasolina: tarifas.Gasolina * contadores.Gasolina,
    hibrido: tarifas.Hibrido * contadores.Hibrido,
    electrico: tarifas.Electrico * contadores.Electrico,
    hidrogeno: tarifas.Hidrogeno * contadores.Hidrogeno  // New
};

const totalGeneral = costos.diesel + costos.gasolina + 
                     costos.hibrido + costos.electrico + 
                     costos.hidrogeno;  // Add to total

​
Step 4: Add Radio Button in HTML Form

<label>
    <input type="radio" name="motorizacion${numeroVehiculo}" value="Hidrogeno">
    💧 Hidrógeno
</label>
You’ll also need to update the crearFormularioVehiculo() function in script.js lines 58-102 to include the new radio button option.

​
Price Display Logic

The application displays an itemized breakdown before showing the total: 
let desglose = "";
Object.keys(contadores).forEach(tipo => {
    if (contadores[tipo] > 0) {
        const costo = tarifas[tipo] * contadores[tipo];
        desglose += `
            <div class="desglose-item">
                ${obtenerEmojiMotorizacion(tipo)} ${contadores[tipo]} ${tipo}: ${costo}€
            </div>
        `;
    }
});

document.getElementById("total").innerHTML = `
    <div class="total-desglose">
        ${desglose}
        <div class="total-final">
            💰 Total: ${totalGeneral}€
        </div>
    </div>
`;

​
Emoji Mapping for Vehicle Types

The application uses emojis for better visual representation: 
function obtenerEmojiMotorizacion(tipo) {
    const emojis = {
        "Diesel": "🛢️",
        "Gasolina": "⛽",
        "Hibrido": "🔋",
        "Electrico": "⚡"
    };
    return emojis[tipo] || "🚗";
}
If you add new vehicle types, remember to add corresponding emojis to this function for consistent visual presentation.

​
Testing Price Changes

1

Backup Original File

Create a copy of script.js before making changes:
cp source/js/script.js source/js/script.js.backup
2

Modify Tariffs

Edit the tarifas object in the calcularYMostrarTotal() function
3

Test in Browser

Open index.html in your browser and submit a test form with various vehicle types
4

Verify Calculations

Ensure the itemized breakdown and total match your expected calculations

​
Common Issues

Check that all tariff values are valid numbers. Non-numeric values will break calculations.
Ensure you’ve added the new type to:
  • tarifas object
  • contadores object
  • costos calculation
  • totalGeneral sum
  • obtenerEmojiMotorizacion() function
Make sure discount logic comes AFTER the base calculation but BEFORE displaying the total. Use totalGeneral.toFixed(2) to format decimal places.
After modifying pricing logic, always test with edge cases:
  • Single vehicle
  • Mixed vehicle types
  • Maximum vehicles (50)
  • All same type

Build docs developers (and LLMs) love

Get started for freeTalk to us