JSFiddle - React, Tailwind, and code Playground

by Felipe Franco

HTML

<input id=first></input><br />

<input id=second></input><br />

<input id=third></input><br />
Total:<span id=added></span><br />

CSS

input{
                margin: 10px; }

JavaScript

$('input').keyup(function(){ // run anytime the value changes
    
    
    var firstValue = parseFloat($('#first').val()); // get value of field
    var secondValue = parseFloat($('#second').val()); // convert it to a float
    var thirdValue = parseFloat($('#third').val());
    
    $('#added').html(firstValue + secondValue + thirdValue); // add them and output it
});