Learn how to show make trip budget calculator with the help of JS
In this example you can learn HOW TO MAKE BUDGET CALCULATOR with HTML and JS By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website the file. To Preview scroll the page. If you are having any problem viewing the code just refresh the page Trip budget calculator is a lightweight and easy-to-use JS code that creates a budget calculator for you. In this blog, there are Four sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can see the demo of the JS Budget calculator, after that you can copy the code and paste it [that's the fourth section]
<!DOCTYPE html>
<html>
<title>Pure - HTML - Trip Budget Calculator - Code With Bishal(Using Bootstrap)</title>
<body>
/* by Code With Bishal - www.codewithbishal.com*/
<label for="m-cwb"><h4>Money spent for Travelling</h4></label>
<input type="number" id="m-cwb" class="form-control" name="m-cwb" placeholder="Money spent for Travelling">
<label for="h-cwb"><h4>Money spent at Hotel</h4></label>
<input type="number" id="h-cwb" class="form-control" name="h-cwb" placeholder="Money spent at Hotel">
<label for="f-cwb"><h4>Money spent For Food</h4></label>
<input type="number" id="f-cwb" class="form-control" name="f-cwb" placeholder="Money spent For Food">
<label for="t-cwb"><h4>Total money spent</h4></label>
<input type="number" id="t-cwb" class="form-control" name="t-cwb" placeholder="Total money spent" readonly>
<div class="py-5 text-center">
<input type="button" id="total" class="btn btn-primary" value="Calculate Total" onclick="javascript:addNumbers()">
</body>
</html>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("m-cwb").value);
var val2 = parseInt(document.getElementById("h-cwb").value);
var val3 = parseInt(document.getElementById("f-cwb").value);
var total = document.getElementById("t-cwb");
total.value = val1 + val2+ val3;
}
</script>