besparingscalculator maken

NLDamp · 15 apr 2014

Goedendag,

Op mijn website NLDamp.nl zou ik graag een besparingscalculator willen toevoegen voor besparen op roken en hiermee mensen extra aan te sporen om over te stappen op elektrisch roken.
Ik ben op onderzoek uitgegaan en heb gelezen dat ik hier wellicht een javascript code voor nodig heb. Zelf heb ik geen idee hoe ik zoiets moet samenstellen. Daarom stel ik deze vraag op dit forum.

Mijn idee is als volgt:
Graag zou ik de volgende velden willen:
Formule 1:
(Aantal pakjes per week x Prijs van een pakje)*52 weken = Totale kosten per jaar

Formule 2:
Dan moet er automatisch een berekening gemaakt worden van het volgende:
((Aantal pakjes per week/5)*4,95)*52

Daarna krijg je de vergelijking van:
Formule 1- Formule 2= Besparing

Ik weet dat ik erg veel vraag en ben benieuwd of iemand mij hier mee kan verder helpen, of een handige link/tutorial kan bieden waarmee ik verder kom.

Alle hulp stel ik erg op prijs!

Groeten Robin

CoD_NL · 19 apr 2014

Leuk dat je mensen op die manier probeert te helpen. De tweede formule die je vraagt is me niet geheel duidelijk en ik heb zodoende naar eigen invullen ingevuld (het gemiddelde van een roker met hetzelfde aantal pakjes per week), maar kan makkelijk naar iets anders veranderd worden. Verder ben ik geen web developer en kan het wellicht netter of eenvoudiger, maar dat horen we dan wel van de echte web developers:

[cpp]
<!DOCTYPE html>
<head>
<title>NLDamp</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
#content {
margin: 0 auto;
width: 480px;
}

#besparingscalculator {
height: 150px;
}

#besparingscalculator label {
width: 430px;
float: left;
}

#besparingscalculator input {
width: 40px;
float: right;
}

#besparingscalculator h3, #resultaat h3 {
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<div id="besparingscalculator">
<h3>Besparingscalculator</h3>
<label for="tbAantalPakjes">Aantal pakjes per week:</label>
<input id="tbAantalPakjes" required="true" type="number" value="1"/>
<label for="tbPrijsPerPakje">Prijs per pakje:</label>
<input id="tbPrijsPerPakje" required="true" type="number" value="5.00"/>
<input id="btBereken" type="button" value="Bereken uw besparing!" style="margin-top: 20px; float: right; width: 170px;"/>
<label id="error" style="color: red;"></label>
</div>
<div id="resultaat">
<h3>Resultaat</h3>
<p id="kostenPerJaar"/>
<p id="gemiddeldeKostenPerJaar"/>
<p id="besparingPerJaar"/>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var AANTAL_WEKEN_PER_JAAR = 52;
var GEMIDDELDE_PRIJS_PER_PAKJE = 4.95;

function getTotaleKostenPerJaar(aantalPakjesPerWeek, prijsPerPakje) {
var kosten = aantalPakjesPerWeek * prijsPerPakje * AANTAL_WEKEN_PER_JAAR;
return kosten;
}

function getBesparing(kostenPerJaar, minimaleKostenPerJaar) {
var besparing = kostenPerJaar - minimaleKostenPerJaar;
return besparing;
}

$(document).ready(function() {
$('#resultaat').hide();
$('#tbAantalPakjes').keypress(function(e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
$("#error").html("Alleen numerieke invoer toegestaan!").show().fadeOut("slow");
return false;
}
});
$('#tbPrijsPerPakje').keypress(function(e) {
if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
$("#error").html("Alleen numerieke invoer toegestaan!").show().fadeOut("slow");
return false;
}
});
$('#tbAantalPakjes').change(function(){
$('#btBereken').prop('disabled', ($('#tbAantalPakjes').val() == '' || $('#tbPrijsPerPakje').val() == ''? true : false));
});
$('#tbPrijsPerPakje').change(function(){
$('#btBereken').prop('disabled', ($('#tbAantalPakjes').val() == '' || $('#tbPrijsPerPakje').val() == ''? true : false));
});
});

$('#btBereken').click(function() {
var aantalPakjesPerWeek = document.getElementById('tbAantalPakjes').value;
var prijsPerPakje = document.getElementById('tbPrijsPerPakje').value;

var kostenPerJaar = getTotaleKostenPerJaar(aantalPakjesPerWeek, prijsPerPakje);
$('#kostenPerJaar').text("Uw kosten per jaar: € " + kostenPerJaar.toFixed(2));

var gemiddeldeKostenPerJaar = getTotaleKostenPerJaar(aantalPakjesPerWeek, GEMIDDELDE_PRIJS_PER_PAKJE);
$('#gemiddeldeKostenPerJaar').text("De gemiddelde kosten van een vergelijkbare roker op jaarbasis: € " + gemiddeldeKostenPerJaar.toFixed(2));

var besparingPerJaar = getBesparing(kostenPerJaar, gemiddeldeKostenPerJaar);
$('#besparingPerJaar').text("Uw besparing op jaarbasis: € " + besparingPerJaar.toFixed(2));

$('#resultaat').show();
});
</script>
</body>
</html>
[/cpp]

besparingscalculator maken

NLDamp

Nieuwe gebruiker

CoD_NL

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy