Menu
Community /Pin to ProfileBookmark
@cootheadDec 18.2014 — #Hi there Chrizzle,
[indent]
and a warm welcome to these forums. ?
Does this help...
[/indent]
[i]coothead[/i]
@NogDogDec 18.2014 — #<pedantry>
Note that from the preceding example, HTML itself can't actually [i]do[/i] anything dynamic. In this case, JavaScript [i]code[/i] was embedded within the HTML [I]markup[/I], since HTML itself is not a programming language -- it's "just" a text mark-up specification.
</pedantry>
How to create price calculator for HTML website
Hi guys,
I’m pretty much new to writing HTML code and was wondering if any of you could help me.
I want to make a very basic price calculator for the rental and delivery of goods for my company.
Basically what it should do is show the total costs, which consist of a fixed part (in this case €70) and a variable part. The variable part is €2 per kilometer, unless the total amount is below €20, then it should be €20.
I made the following in Excel but so far I have been unable to convert it into something that works on my HTML website. The yellow cells should be filled with info from the potential customer.
Screenshot: [url]http://goo.gl/oEpFn1
Hope to hear from you guys ?!
Cheers
Sign in
to post a comment2 Comments(s) ↴
0
@cootheadDec 18.2014 — #Hi there Chrizzle,[indent]
and a warm welcome to these forums. ?
Does this help...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>a little calculator</title>
<style media="screen">
body {
background-color:#f0f0f0;
}
#theform {
display:inline-block;
padding:20px;
border:1px solid #666;
border-radius:10px;
background-color:#fff;
color:#666;
box-shadow:inset 0 0 20px #999,3px 3px 3px #666;
}
#theform div {
margin:5px 0;
}
#theform label {
display:inline-block;
width:200px;
}
</style>
<script>
(function() {
'use strict';
var f,d,k;
function init(){
f=document.getElementById('theform');
f.reset();
document.getElementById('calc').onclick=function() {
d=document.getElementById('days').value;
k=document.getElementById('kilo').value;
if(isNaN(d)||d==''||isNaN(k)||k=='') {
f.reset();
alert('please enter a numerical value'); <br/>
return;
}
else {
if(k<10) {
k=20;
}
else {
k=k*2;
}
document.getElementById('tot').value='€ '+parseFloat(d*70+k); <br/>
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<form id="theform" action="#">
<div>
<label for="days">Amount of days :</label>
<input id="days" type="text">
</div><div>
<label for="kilo">Amount of kilometers :</label>
<input id="kilo" type="text">
</div><div>
<label>Total :</label>
<input id="tot" type="text" readonly="readonly">
</div><div>
<label></label>
<input id="calc" type="button" value="calculate">
<input id="r" type="reset" value="clear">
</div>
</form>
</body>
</html>[/color][/indent]
[i]coothead[/i]
0
@NogDogDec 18.2014 — #<pedantry>Note that from the preceding example, HTML itself can't actually [i]do[/i] anything dynamic. In this case, JavaScript [i]code[/i] was embedded within the HTML [I]markup[/I], since HTML itself is not a programming language -- it's "just" a text mark-up specification.
</pedantry>