Pure - HTML - Trip Budget Calculator (HTML and JS) - Code With Bishal (Using Bootstrap)


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]

You might like this :

HOW TO CHANGE THE BACKGROUND COLOR ONCLICK USING JS
Few days ago
Show current time using JS
Few days ago
SIMPLE BUTTON USING HTML AND CSS
Few days ago

This is an example



Pure - HTML - Trip Budget Calculator - Code With Bishal (Using Bootstrap)








HTML Code

<!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>
Copy Contents

JS(Javascript) Code

<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>