<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Goldpreisrechner</title>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Goldpreisrechner</h1>
</div>
<div class="col-lg-6">
<form id="carat" role="form">
<div class="form-group">
<label for="gram">Gramm hier eintragen:</label>
<input type="text" class="form-control input-lg" id="gram" placeholder="1">
</div>
<p>
<strong>Unser Ankaufpreis:</strong>
</p>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="28.67" checked> 999 Karat (28.67 €/Gramm)
</label><br>
<label>
<input type="radio" name="optionsRadios" value="19.71"> 750 Karat (19.71 €/Gramm)
</label><br>
<label>
<input type="radio" name="optionsRadios" value="8.35"> 333 Karat (8.35 €/Gramm)
</label>
</div>
<button type="submit" class="btn btn-primary">Berechnen</button>
</form>
</div>
<div class="col-lg-6">
<p>
<span class="text-muted">Aktueller Börsenpreis:</span><br>
<span class="lead">939.56</span> € pro Feinunze
</p>
<p>
<span class="text-muted">Unser Ankaufpreis:</span><br>
<span id="our_price" class="lead">28.67</span> €
</p>
</div>
</div>
<script>
(function($) {
var getPrice = function() {
var carat = $('#carat').find('input:checked').val(),
result = parseFloat( carat * $('#gram').val() ).toFixed(2);
return result;
};
$('button').on('click', function(event) {
event.preventDefault();
$('#our_price').html(getPrice());
});
})(jQuery);
</script>
</body>
</html>
