[JavaScript] Przelicznik ceny złota

Aby przeliczyć wagę złota na cenę musimy znać szacunkową cenę danej próby.

Formularz HTML

Zacznijmy od stworzenia prostej strony HTML zawierającej formularz, w którym będzie wybierana próba złota oraz podawana do obliczenia waga:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przelicznik Ceny Złota</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>Przelicznik ceny złota użytkowego</h1>
    <p><label for="purity">Wybierz próbę złota:</label>
    <select id="purity">
        <option value="333">333 (8 karatów)</option>
        <option value="375">375 (9 karatów)</option>
        <option value="585">585 (14 karatów)</option>
        <option value="750">750 (18 karatów)</option>
    </select></p>
    <p><label for="weight">Waga złota (w gramach):</label>
    <input type="number" id="weight" placeholder="Wprowadź wagę" required></p>
    <p><button id="calculate">Oblicz cenę</button></p>
    <h2 id="result"></h2>
</body>
</html>

Kod JavaScript

// Cena za gram dla danej próby:

const p_333 = 110.00;
const p_375 = 128.00;
const p_585 = 199.00;
const p_750 = 250.00;

function calculatePrice() {

    const selectedPurity = document.getElementById('purity').value;
    const weight = parseFloat(document.getElementById('weight').value);

    let rate;
    
    switch(selectedPurity) {
    
        case '333':
        
        rate = p_333;
            
        break;
            
        case '375':
        
        rate = p_375;
            
        break;
            
        case '585':
        
        rate = p_585;
            
        break;
            
        case '750':
        
        rate = p_750;
            
        break;
            
        default:
        
        rate = 0;
            
    }

    if(isNaN(weight) || weight <= 0) {
    
        document.getElementById('result').textContent = 'Wprowadź poprawną wagę';
        
        return;
        
    }

    const totalPrice = rate * weight;
    document.getElementById('result').innerText = `Całkowity koszt: ${totalPrice.toFixed(2)} PLN`;
    
}

document.addEventListener('DOMContentLoaded', function() {

    document.getElementById('calculate').addEventListener('click', calculatePrice);
    
});

Aby kalkulator podawał jak najbardziej przybliżone wyniki, należy zaktualizować ceny podane na początku powyższego kodu.

Komentarze

Popular

[C++] Jak obliczyć pole i obwód trapezu?

[HTML] Jak wyśrodkować tekst?

[PHP|HTML] Odświeżenie strony