ÁFA KALKULÁTOR 5% | 17% | 28%

ÁFA_KALKULÁTOR_1.0

ÁFA_KALKULÁTOR_1.0







EREDMÉNY

Nettó: - Ft

ÁFA: - Ft

Bruttó: - Ft

A kalkulátor forráskódja:

				
					```html
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ÁFA kalkulátor</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 700px;
            margin: 40px auto;
            padding: 20px;
        }

        .kalkulator {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
        }

        input, select, button {
            padding: 8px;
            margin: 5px 0;
        }

        .eredmeny {
            margin-top: 20px;
        }

        .kod-doboz {
            margin-top: 40px;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .kod-fejlec {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f2f2f2;
            padding: 10px 15px;
        }

        .kod-fejlec strong {
            font-size: 14px;
        }

        #masolasGomb {
            border: 1px solid #aaa;
            background: white;
            cursor: pointer;
            border-radius: 5px;
            padding: 6px 12px;
        }

        #masolasGomb:hover {
            background: #eaeaea;
        }

        pre {
            margin: 0;
            padding: 15px;
            background: #fafafa;
            overflow-x: auto;
            white-space: pre-wrap;
            word-break: break-word;
            font-size: 13px;
        }
    </style>
</head>

<body>

    <h1>ÁFA kalkulátor</h1>

    <div class="kalkulator">

        <label for="mode">Számítás:</label><br>

        <select id="mode">
            <option value="brutto-netto">Bruttó → Nettó</option>
            <option value="netto-brutto">Nettó → Bruttó</option>
        </select>

        <br><br>

        <label for="amount">Összeg (Ft):</label><br>

        <input
            type="number"
            id="amount"
            step="0.01"
            min="0"
            placeholder="10000"
        >

        <br><br>

        <label for="vat">ÁFA:</label><br>

        <select id="vat">
            <option value="27">27%</option>
            <option value="18">18%</option>
            <option value="5">5%</option>
        </select>

        <br><br>

        <button onclick="calculate()">Számítás</button>

        <div class="eredmeny">
            <p>Nettó: <strong id="netto">-</strong> Ft</p>
            <p>ÁFA: <strong id="afa">-</strong> Ft</p>
            <p>Bruttó: <strong id="brutto">-</strong> Ft</p>
        </div>

    </div>


    <!-- MÁSOLHATÓ KÓD -->

    <div class="kod-doboz">

        <div class="kod-fejlec">
            <strong>ÁFA kalkulátor HTML kód</strong>

            <button id="masolasGomb" onclick="masolKod()">
                📋 Másolás
            </button>
        </div>

        <pre id="kod"></pre>

    </div>


    <script>

        function formatFt(value) {
            return value.toLocaleString('hu-HU', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }


        function calculate() {

            const amount = parseFloat(
                document.getElementById('amount').value
            );

            const vatRate = parseFloat(
                document.getElementById('vat').value
            );

            const mode =
                document.getElementById('mode').value;


            if (isNaN(amount) || amount < 0) {
                alert('Adj meg egy érvényes összeget!');
                return;
            }


            const multiplier = 1 + vatRate / 100;

            let netto;
            let afa;
            let brutto;


            if (mode === 'brutto-netto') {

                brutto = amount;

                netto = brutto / multiplier;

                afa = brutto - netto;

            } else {

                netto = amount;

                afa = netto * (vatRate / 100);

                brutto = netto + afa;

            }


            document.getElementById('netto').textContent =
                formatFt(netto);

            document.getElementById('afa').textContent =
                formatFt(afa);

            document.getElementById('brutto').textContent =
                formatFt(brutto);
        }



        /*
         * A MÁSOLHATÓ KÓD MEGJELENÍTÉSE
         *
         * Ide kerül a kalkulátor beilleszthető HTML kódja.
         */

        const beilleszthetoKod = `<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ÁFA kalkulátor</title>

<style>

body {
    font-family: Arial, sans-serif;
    max-width: 500px;
    margin: 30px auto;
    padding: 20px;
}

.kalkulator {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
}

input, select, button {
    padding: 8px;
    margin: 5px 0;
}

.eredmeny {
    margin-top: 20px;
}

</style>

</head>

<body>

<div class="kalkulator">

<h2>ÁFA kalkulátor</h2>

<label>Számítás:</label><br>

<select id="mode">
<option value="brutto-netto">Bruttó → Nettó</option>
<option value="netto-brutto">Nettó → Bruttó</option>
</select>

<br><br>

<label>Összeg (Ft):</label><br>

<input
type="number"
id="amount"
step="0.01"
min="0"
placeholder="10000"
>

<br><br>

<label>ÁFA:</label><br>

<select id="vat">
<option value="27">27%</option>
<option value="18">18%</option>
<option value="5">5%</option>
</select>

<br><br>

<button onclick="calculate()">
Számítás
</button>

<div class="eredmeny">

<p>
Nettó:
<strong id="netto">-</strong> Ft
</p>

<p>
ÁFA:
<strong id="afa">-</strong> Ft
</p>

<p>
Bruttó:
<strong id="brutto">-</strong> Ft
</p>

</div>

</div>


<script>

function formatFt(value) {

return value.toLocaleString('hu-HU', {

minimumFractionDigits: 2,

maximumFractionDigits: 2

});

}


function calculate() {

const amount =
parseFloat(
document.getElementById('amount').value
);

const vatRate =
parseFloat(
document.getElementById('vat').value
);

const mode =
document.getElementById('mode').value;


if (isNaN(amount) || amount < 0) {

alert('Adj meg egy érvényes összeget!');

return;

}


const multiplier = 1 + vatRate / 100;

let netto;
let afa;
let brutto;


if (mode === 'brutto-netto') {

brutto = amount;

netto = brutto / multiplier;

afa = brutto - netto;

} else {

netto = amount;

afa = netto * (vatRate / 100);

brutto = netto + afa;

}


document.getElementById('netto').textContent =
formatFt(netto);

document.getElementById('afa').textContent =
formatFt(afa);

document.getElementById('brutto').textContent =
formatFt(brutto);

}

</script>

</body>
</html>`;


        document.getElementById('kod').textContent =
            beilleszthetoKod;


        function masolKod() {

            navigator.clipboard.writeText(beilleszthetoKod)
                .then(function() {

                    const gomb =
                        document.getElementById('masolasGomb');

                    gomb.textContent = '✓ Kimásolva!';

                    setTimeout(function() {

                        gomb.textContent = '📋 Másolás';

                    }, 2000);

                })
                .catch(function() {

                    alert(
                        'A másolás nem sikerült. Jelöld ki és másold ki a kódot kézzel.'
                    );

                });

        }

    </script>

</body>
</html>
```