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






<div id="container">
  <h1>Investment Calculator</h1>
  <div id="calculator">
    <!-- 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>
    <p>What is the interest rate?</p>
    <input id="intrate" type="text" placeholder="Interest rate">%
    <button type="button" id="calculate">Calculate!</button>
<div id="investyield">
    <sup>$</sup><span id="yield">0.00</span>
    <small id="yieldamount">Future Value</small>


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





body {
  background-color: beige;

h1 {
  text-align: center;

p {
  padding-left: 5px;

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

button {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin: 30px auto;
  background: #ad133a;
  border-radius: 5px;
  width: 200px;
  height: 50px;
  font-size: 17px;
  color: #ADD8E6;

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;






//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 === "") {
    alert("Please enter values");

  //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() {

Leave a Reply