Build a Money Future Investment Calculator in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

`index.html`

``````<div id="container">
<h1>Investment Calculator</h1>
<div id="calculator">
<!-- Form-->
<form>
<p>How much are you investing?</p>
\$ <input id="investamt" type="text" placeholder="Investment Amount">
<p>How many years will you be investing?</p>
<select id="investyr">
<option disabled selected value="0">How many years?</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">2 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
<option value="6">6 years</option>
<option value="7">7 years</option>
<option value="8">8 years</option>
<option value="9">9 years</option>
<option value="10">10 years</option>
</select>
</form>
<p>What is the interest rate?</p>
<input id="intrate" type="text" placeholder="Interest rate">%
</br>
</br>
<button type="button" id="calculate">Calculate!</button>
</div>
</br>
<div id="investyield">
<sup>\$</sup><span id="yield">0.00</span>
<small id="yieldamount">Future Value</small>
</div
</div>``````

See also  Build a Animate.css Vertical Scrolling News Ticker Animation in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

`style.css`

``````body {
background-color: beige;
}

h1 {
text-align: center;
}

p {
}

#container {
height: 500px;
width: 360px;
margin: 50px auto;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

button {
text-transform: uppercase;
font-weight: bold;
display: block;
margin: 30px auto;
width: 200px;
height: 50px;
font-size: 17px;
}

button:hover {
background: #4c2827;
border-bottom-color: #111;
}

#investyield {
font-size: 30px;
margin-top: 5px;
text-align: center;
}

#investyield:before {
content: "";
font-size: 20px;
font-weight: bold;
display: block;
text-transform: uppercase;
}

#investyield sup {
font-size: 20px;
top: -18px;
}

#investyield yield {
font-size: 20px;
font-weight: bold;
display: block;
}``````

`script.js`

``````//calculate Tip
function calculateInvestment() {
var investAmt = document.getElementById("investamt").value;
var investYr = document.getElementById("investyr").value;
var interestRate = document.getElementById("intrate").value;

//validate input
if (investAmt === "" || investYr == 0 || interestRate === "") {
return;
}

//check to see if this input is empty or less than or equal to 1
if (interestRate === "" || interestRate <= 1) {
interestRate = 1;
document.getElementById("yieldamount").style.display = "block";
} else {
document.getElementById("yieldamount").style.display = "block";
}

//calculate tip
var total = [investAmt * (interestRate / 100) * investYr];

var grandTotal = parseFloat(total) + parseFloat(investAmt);

//round to two decimal places
grandTotal = Math.round(grandTotal * 100) / 100;

//next line allows us to always have two digits after decimal point
grandTotal = grandTotal.toFixed(2);

//display the tip
document.getElementById("investyield").style.display = "block";
document.getElementById("yield").innerHTML = grandTotal;
}

//hide the tip amount on load
document.getElementById("investyield").style.display = "none";
document.getElementById("yieldamount").style.display = "none";

//click to call function
document.getElementById("calculate").onclick = function() {
calculateInvestment();
};``````