TET71 Tilgungsrechner

In this example below you will see how to do a TET71 Tilgungsrechner with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -dennis-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -dennis- ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>TET71 Tilgungsrechner</title>
  
  
  
  
  
</head>

<body>

  <font face="Arial" color="">
<h1 class="text"> Tilgungsrechner</h1>
  <form id="eingabe">
  Kredithöhe
  <br>
  <br>
  <input id="kredithöhe" class="eingabe" type="text" value="">€
  <br>
  <br>
  Laufzeit
  <br>
  <input type="range" id="laufzeit" class="eingabe" value="" min="5" max="50">
  <output id="output" for="volume"></output> Jahre
  <br>
  Rate
  <br>
  <br>
  <input id="rate" class="eingabe" type="number" min="0" max="1000000"      step="10">€
  <br>
  <br>
  Zinssatz
  <br>
  <br>
  <input id="zinssatz" class="eingabe" type="text" value"">%
  <br>
  <br>
  Auszahlungsdatum
  <br>
  <br>
  <input type="date" name="Datum" value="2018-03-22">
  <br>
  <br>
  </form>




<input id="btn1" class="btn rechnen" type="submit" value="Berechnen" onclick='rechnen();'>
 
  <input id="btn2"  class="btn reset"   type="submit" form="eingabe" value="Reset" onclick='reset();'>

<br>
<br>
  
  Restschuld:
  <br>
  <input id="restschuld" type="text" value"">€
  <br>
  Gesamte Tilgung:
  <br>
  <input id="gesamttilgung" type="text" value"">€
  <br>
  Gesamte Zinsen:
  <br>
  <input id="gesamtzinsen" type="text" value"">€
<br>
<br>
</>
  
<TABLE align="center" BORDER="2" BORDERCOLOR="#000000" BORDERCOLORLIGHT="#66FFFF">
<TR>      <TR>
<TD>1A    <TD>1B
</TD>     </TD>
</TR>     </TR>
<TR>      <TR>
<TD>2A    <TD>2B
</TD>     </TD>
</TR>     </TR>
</TABLE>
  
  
  
</font>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-dennis-/tet71-tilgungsrechner-MVmLwX */
//SLIDER
function ausgeben(ev) {
    document.getElementById('output').value = ev.target.value;
}

document.getElementById('laufzeit').addEventListener('input', ausgeben)
//SLIDER ENDE

//Button 1 ausgrauen/einblenden
/*//Button 1 Eingabefelder freigabe
$('#btn1').prop('disabled', true);

function checkEingabe() {
  allesAusgefuellt = true;         // Annahme alle Felder sind ok
  $(".eingabe").each(function() { // Durchsuche alle Felder
    eingabe = $(this).val();       // lese den Wert des jeweiligen Feldes auf eingabe
    if (eingabe == "") {           // Prüfe ob Eingabe leer ist
     allesAusgefuellt = false;     // Annahme alle Felder sind leer ist falsch
    }
  });
  $("#btn1").prop("disabled", !allesAusgefuellt); // Disable wenn nicht alles ausgefüllt
}
 //Button 1 Freigabe ENDE
*/
document.getElementById('btn1').enable = (document.getElementByclass('eingabe').value.length==5);


//Button 2 ausgrauen/einblenden

$('#btn2').prop('disabled', true);
$('.eingabe').keyup(function()

{
  console.log($(this).val())
    if( $(this).val() ) {
          $('#btn2').prop('disabled', false);
    }
      if( !$(this).val() ) {
          $('#btn2').prop('disabled', true);
    }
});

Comments