text: function compute()
  {
      // saving the values of inputs in the variables to reuse it.
  
      var principal = document.getElementById("principal").value;
      var rate = document.getElementById("rate").value;
      var years = document.getElementById("years").value;
      var interest = principal * years * rate /100;
      var year = new Date().getFullYear()+parseInt(years);
  
      var text = document.getElementById("result");
  
      // validate the principal value to be a positive number
      if (principal <= 0){
          alert("Please: Enter positive number");
          text.innerHTML = "";
          
          document.getElementById("principal").focus();
          document.getElementById("principal").select();
      }
      else{
  
          //printing the results in the page
          text.innerHTML = "If you deposit: "+"<mark>" + principal + "</mark>"+"<br>" + 
          "at an interest rate of: " + "<mark>" + rate + "</mark>" + "<br>" + 
          "You will receive an amount of: <mark>" + interest + "</mark><br>" +
          "in the year: <mark>" + year + "</mark>";
      }   
  }
  
  // this function to view the rate value in span element beside the range input.
  function updateRate() 
  {
      var rateval = document.getElementById("rate").value;
      document.getElementById("rate_val").innerText=rateval + "%";
  }
      
  