[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
Prześlij komentarz
Dzięki za komentarz!