JSFiddle - React, Tailwind, and code Playground

by fresheyeball

HTML

<input type="text" class="input creditsPerClass" placeholder="Number of credits per class" style="width: 50%;"><br>
<input type="text" class="input classesTransferred" placeholder="Number of classes to transfer" style="width: 50%;"><br>
    
<input type="text" disabled="disabled" id="result"> Potentially transferrable credits<br>
<input type="text" disabled="disabled" id="moneySaved"> Saved on the cost of your degree program<br>
<input type="text" disabled="disabled" id="timeSaved">  Weeks saved in your degree program

CSS

body {
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 18px;
}

input {
    width: 10%;
    height: 25px;
    border-radius: 10px;
    margin: 0 0 15px 0;
    font-family: Tahoma, Geneva, sans-serif; 
    text-align: center;
}

JavaScript

var MAGIC_NUMBER_OF_NO_MEANING = 402;
var result = Math.floor(Math.random() * 100000000);

$(document).ready(function(){
    $(".input").keyup(function(){
          var val1 = +$(".creditsPerClass").val();
          var val2 = +$(".classesTransferred").val();
        
          $("#result").val(val1*val2);
          $("#moneySaved").val(result*MAGIC_NUMBER_OF_NO_MEANING);
          $("#timeSaved").val(val2*5);
   });
});