I created a little calculator tool in JS that a user can input their cost, and gains and get the ROI calculated back. I also created an additional form that will take the cost plus the percentage return and calculate the amount of gains you would have to get in order to satisfy the ROI. The tool is really simple, but I wanted to try out building some JS tools that were self contained and could work on their own. You can checkout the tool here ROI Calculation Tool
Building it was straightforward and helped me to learn more about executing math with JS. The biggest problem I encountered didn't even have to do with the function - it was preventing the form from submitting and refreshing the page. I've had to do this before - but it was still a pain point that requires stopping the form's default execution with an event.preventDefault() function.
Other issues were getting passing the values in JS objects and updating the dom elements. Once I cracked the default refresh and got the elements to update the rest was straight forward. Here's the code
<div class="tool"> <h1>ROI Tool</h1> <form id="calForm"> If I buy something at <input id="cost_input" type="text" name="cost_input" value="100"> <br> And Sell it at <input id="gains_input" type="text" name="gains_input" value="105"><br> <br> <button id="roiClick" name="submit">Submit</button> </form> <h1>My ROI IS <span id="roi"></span></h1> <i>ROI = (Gains – Cost)/Cost</i><BR><BR> COST: <span id="cost"></span><BR> Gains: <span id="gains"></span><BR> <script> var cost, returnVal; function calRoi() { var cost = document.getElementById("cost_input").value; var gains = document.getElementById("gains_input").value; var roiVal = roi(cost, gains); var calc = { 'cost' : '$' + cost, 'gains' : '$' + gains, 'roi' : roiVal }; updateThis(calc); } function roi(cost, gains) { cost = parseFloat(cost); gains = parseFloat(gains); var top, bottom; top = gains - cost; bottom = top / cost; var roiVal = bottom; roiVal = roiVal * 100; return roiVal + '%'; } function updateThis(stuff) { document.getElementById('roi').innerHTML = stuff.roi; document.getElementById('cost').innerHTML = stuff.cost; document.getElementById('gains').innerHTML = stuff.gains; } document.getElementById('calForm').addEventListener('submit', function(e){ e.preventDefault(); calRoi(); }); </script> </div>