const costInput = document.getElementById('cost'); const vendaInput = document.getElementById('venda'); const ivaInput = document.getElementById('iva'); const reInput = document.getElementById('re'); const presetBtns = document.querySelectorAll('.preset-btn'); function formatEuro(n){ return n.toLocaleString('ca-ES', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' €'; } function calcular(){ const cost = parseFloat(costInput.value) 0; const venda = parseFloat(vendaInput.value) 0; const ivaPct = parseFloat(ivaInput.value) 0; const rePct = parseFloat(reInput.value) 0; const baseVenda = venda / (1 + ivaPct/100); const ivaImport = venda - baseVenda; const reImport = baseVenda * (rePct/100); const benefici = baseVenda - cost; document.getElementById('baseVenda').textContent = formatEuro(baseVenda); document.getElementById('ivaImport').textContent = formatEuro(ivaImport); document.getElementById('reImport').textContent = formatEuro(reImport); document.getElementById('costMostrat').textContent = formatEuro(cost); const beneficiEl = document.getElementById('benefici'); beneficiEl.textContent = formatEuro(benefici); beneficiEl.classList.toggle('negative', benefici < 0); const marge = baseVenda > 0 ? (benefici / baseVenda * 100) : 0; document.getElementById('margeBadge').textContent = marge.toFixed(1).replace('.', ',') + '%'; } [costInput, vendaInput, ivaInput, reInput].forEach(el => { el.addEventListener('input', calcular); }); presetBtns.forEach(btn => { btn.addEventListener('click', () => { presetBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); ivaInput.value = btn.dataset.iva; reInput.value = btn.dataset.re; calcular(); }); }); calcular();
Calculadora de Beneficis · El Meu Poble
-removed
:root{
--terracota:#c1502e;
--terracota-dark:#9c3d21;
--crema:#f6ede1;
--crema-dark:#ead9c2;
--oliva:#6b7a4f;
--tinta:#3a2e26;
--linea:#d8c4a8;
}
*{box-sizing:border-box;}
html, body{
height:100%;
overscroll-behavior:none;
}
body{
margin:0;
font-family:'Georgia', 'Times New Roman', serif;
background:var(--crema);
color:var(--tinta);
padding:20px 14px 60px;
padding-top:calc(20px + env(safe-area-inset-top));
-webkit-tap-highlight-color:transparent;
}
.wrap{max-width:480px;margin:0 auto;}
header{
text-align:center;
margin-bottom:22px;
}
header .tag{
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--oliva);
font-family:Arial, sans-serif;
font-weight:600;
}
h1{
font-size:24px;
margin:6px 0 2px;
color:var(--terracota-dark);
}
.sub{
font-family:Arial, sans-serif;
font-size:13px;
color:#7a6a5a;
}
.card{
background:#fffaf3;
border:1px solid var(--linea);
border-radius:14px;
padding:18px;
margin-bottom:16px;
box-shadow:0 2px 6px rgba(58,46,38,0.06);
}
.card h2{
font-size:15px;
margin:0 0 12px;
color:var(--terracota-dark);
font-family:Arial, sans-serif;
letter-spacing:0.3px;
}
label{
display:block;
font-family:Arial, sans-serif;
font-size:13px;
color:#5c4d3f;
margin-bottom:4px;
margin-top:12px;
}
label:first-of-type{margin-top:0;}
input[type=number]{
width:100%;
padding:10px 12px;
border:1px solid var(--linea);
border-radius:8px;
font-size:16px;
font-family:Arial, sans-serif;
background:#fff;
color:var(--tinta);
}
input[type=number]:focus{
outline:none;
border-color:var(--terracota);
}
.row{
display:flex;
gap:10px;
}
.row > div{flex:1;}
.presets{
display:flex;
gap:6px;
margin-top:8px;
flex-wrap:wrap;
}
.preset-btn{
font-family:Arial, sans-serif;
font-size:12px;
padding:5px 10px;
border-radius:20px;
border:1px solid var(--linea);
background:var(--crema-dark);
color:var(--tinta);
cursor:pointer;
}
.preset-btn.active{
background:var(--oliva);
border-color:var(--oliva);
color:#fff;
}
.results{
margin-top:6px;
}
.result-line{
display:flex;
justify-content:space-between;
align-items:baseline;
padding:8px 0;
border-bottom:1px dashed var(--linea);
font-family:Arial, sans-serif;
font-size:14px;
}
.result-line:last-child{border-bottom:none;}
.result-line .label{color:#6b5c4c;}
.result-line .value{font-weight:600;}
.result-line.total{
margin-top:6px;
padding-top:14px;
border-top:2px solid var(--terracota);
border-bottom:none;
}
.result-line.total .label{
font-size:15px;
color:var(--tinta);
font-weight:600;
}
.result-line.total .value{
font-size:22px;
color:var(--terracota-dark);
font-family:'Georgia', serif;
}
.result-line.total .value.negative{
color:#a33;
}
.margin-badge{
display:inline-block;
font-size:12px;
padding:2px 8px;
border-radius:12px;
margin-left:8px;
background:var(--crema-dark);
color:var(--oliva);
font-weight:600;
}
.note{
font-family:Arial, sans-serif;
font-size:11.5px;
color:#9a8b7a;
margin-top:14px;
line-height:1.5;
}
footer{
text-align:center;
margin-top:20px;
font-family:Arial, sans-serif;
font-size:12px;
color:#7a6a5a;
}
footer a{
color:var(--terracota-dark);
text-decoration:none;
font-weight:600;
}
footer a:hover{
text-decoration:underline;
}
Calculadora de Beneficis
IVA + Recàrrec d'Equivalència
Preus del producte
```
Preu de cost (sense IVA) €
Preu de venda al públic (amb IVA) €
21% · RE 5,2%
10% · RE 1,4%
4% · RE 0,5%
```
Resultat
Base imposable (venda sense IVA)
0,00 €
Recàrrec d'equivalència
0,00 €
Amb recàrrec d'equivalència, l'IVA + RE que pagues al proveïdor ja inclou la teva liquidació davant Hisenda, per la qual cosa no presentes IVA trimestral per aquestes vendes. El benefici net aquí és venda menys IVA menys cost (el RE no es calcula sobre la teva venda, sinó que ja el vas pagar al proveïdor inclòs en el cost; es mostra igualment com a referència sobre el preu de venda).
const costInput = document.getElementById('cost');
const vendaInput = document.getElementById('venda');
const ivaInput = document.getElementById('iva');
const reInput = document.getElementById('re');
const presetBtns = document.querySelectorAll('.preset-btn');
function formatEuro(n){
return n.toLocaleString('ca-ES', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' €';
}
function calcular(){
const cost = parseFloat(costInput.value) 0;
const venda = parseFloat(vendaInput.value) 0;
const ivaPct = parseFloat(ivaInput.value) 0;
const rePct = parseFloat(reInput.value) 0;
const baseVenda = venda / (1 + ivaPct/100);
const ivaImport = venda - baseVenda;
const reImport = baseVenda * (rePct/100);
const benefici = baseVenda - cost;
document.getElementById('baseVenda').textContent = formatEuro(baseVenda);
document.getElementById('ivaImport').textContent = formatEuro(ivaImport);
document.getElementById('reImport').textContent = formatEuro(reImport);
document.getElementById('costMostrat').textContent = formatEuro(cost);
const beneficiEl = document.getElementById('benefici');
beneficiEl.textContent = formatEuro(benefici);
beneficiEl.classList.toggle('negative', benefici < 0);
const marge = baseVenda > 0 ? (benefici / baseVenda * 100) : 0;
document.getElementById('margeBadge').textContent = marge.toFixed(1).replace('.', ',') + '%';
}
[costInput, vendaInput, ivaInput, reInput].forEach(el => {
el.addEventListener('input', calcular);
});
presetBtns.forEach(btn => {
btn.addEventListener('click', () => {
presetBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
ivaInput.value = btn.dataset.iva;
reInput.value = btn.dataset.re;
calcular();
});
});
calcular();