CleanCalculator

<html lang="en"><head><meta charset="UTF-8" /><title>Calculator</title><script src="//code.jquery.com/jquery-1.10.2.min.js"></script><script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script><script src="/calc-js/jquery-ui-slider-pips.min.js"></script><script src="/calc-js/accounting.js"></script><script src="/calc-js/jquery.qtip.js"></script><script src="/calc-js/jquery.ui.touch-punch.min.js"></script><link rel="stylesheet" type="text/css" href="/calc-js/jquery-ui-slider-pips.css" /> <link rel="stylesheet" type="text/css" href="/calc-js/jquery.qtip.css" /> <link href="" rel="stylesheet" data-mce-href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" /><script> $(document).ready(function() { function update_calc() { var c6 = parseInt($("#c6").val()); var c7 = parseInt($("#c7").val()); var c8 = parseInt($("#c8").val()); var c11 = parseInt($("#c11").val().replace('$', '')); var c12 = parseInt($("#c12").val().replace('$', '')); var c13 = parseInt($("#c13").val().replace('$', '')); var c16 = parseInt($("#c16").val()); var c17 = parseInt($("#c17").val().replace('$', '')); var c20 = parseInt($("#c20").val().replace('%', '')); var c20 = c20 / 100; //total devices update c6 + c8 updates d23 var c6c8 = c6 + c7 + c8; c6c82 = accounting.formatMoney(c6c8); // setting the value $("#d23").val(c6c8); //total replacement cost SUMPRODUCT(C6:C8,C11:C13)*C20 var sumproducts = (c6 * c11 + c7 * c12 + c8 * c13) * c20; sumproducts2 = accounting.formatMoney(sumproducts); $("#d24").val(sumproducts2); /////////////////////////////////////////// //Total Maintence Cost SUM(C6:C8)*C16*C17*C20 var totalm = (c6 + c7 + c8) * c16 * c17 * c20; totalm2 = accounting.formatMoney(totalm); // setting the value $("#d25").val(totalm2); //est total cost SUM(D24:D25) updates d26 var estcost = sumproducts + totalm; estcost2 = accounting.formatMoney(estcost); //setting the value $("#d26").val(estcost2); //est total cost D26-D23*C20*15 updates d31 // var oneyear = estcost - c6c8 * c20 * 15; // oneyear2 = accounting.formatMoney(oneyear); // //setting the value // $("#d31").val(oneyear2); // console.log(estcost); // console.log(c6c8); // //5year D31*5 updates d32 // var fiveyear = oneyear * 5; // fiveyear = accounting.formatMoney(fiveyear); // // setting the value // $("#d32").val(fiveyear); } //qtip call $('a[title]').qtip(); // first we need a slider to work with var $slider = $("#slider").slider({ min: 0 , max: 3000 , value: 0 , step: 10, slide: function( event, ui ) { $( "#c6" ).val( ui.value ); $(update_calc); } }); $( "#c6" ).val( $( "#slider" ).slider( "value" ) ); // and then we can apply pips to it! $slider.slider("pips"); var $slider1 = $("#slider1").slider({ min: 0 , max: 3000 , value: 0 , step: 10, slide: function( event, ui ) { $( "#c7" ).val( ui.value ); $(update_calc); } }); $( "#c7" ).val( $( "#slider1" ).slider( "value" ) ); // and then we can apply pips to it! $slider1.slider("pips"); var $slider2 = $("#slider2").slider({ min: 0 , max: 3000 , value: 0 , step: 10, slide: function( event, ui ) { $( "#c8" ).val( ui.value ); $(update_calc); } }); $( "#c8" ).val( $( "#slider2" ).slider( "value" ) ); // and then we can apply pips to it! $slider2.slider("pips"); var $slider3 = $("#slider3").slider({ min: 50 , max: 10000 , value: 50 , step: 50, slide: function( event, ui ) { $( "#c11" ).val( '$' + ui.value ); $(update_calc); } }); $( "#c11" ).val( '$' + $( "#slider3" ).slider( "value" ) ); // and then we can apply pips to it! $slider3.slider("pips" , { prefix: "$" }); var $slider4 = $("#slider4").slider({ min: 50 , max: 10000 , value: 50 , step: 50, slide: function( event, ui ) { $( "#c12" ).val( '$' + ui.value ); $(update_calc); } }); $( "#c12" ).val( '$' + $( "#slider4" ).slider( "value" ) ); // and then we can apply pips to it! $slider4.slider("pips" , { prefix: "$" }); var $slider5 = $("#slider5").slider({ min: 50 , max: 1000 , value: 50 , step: 50, slide: function( event, ui ) { $( "#c13" ).val( '$' + ui.value ); $(update_calc); } }); $( "#c13" ).val( '$' + $( "#slider5" ).slider( "value" ) ); // and then we can apply pips to it! $slider5.slider("pips" , { prefix: "$" }); var $slider6 = $("#slider6").slider({ min: .5 , max: 50 , value: .5 , step: .5, slide: function( event, ui ) { $( "#c16" ).val( ui.value ); $(update_calc); } }); $( "#c16" ).val( $( "#slider6" ).slider( "value" ) ); // and then we can apply pips to it! $slider6.slider("pips"); var $slider7 = $("#slider7").slider({ min: 20 , max: 300 , value: 20 , step: 10, slide: function( event, ui ) { $( "#c17" ).val( '$' + ui.value ); $(update_calc); } }); $( "#c17" ).val( '$' + $( "#slider7" ).slider( "value" ) ); // and then we can apply pips to it! $slider7.slider("pips" , { prefix: "$" }); var $slider8 = $("#slider8").slider({ min: 10 , max: 50 , value: 5, step: 5, slide: function( event, ui ) { $( "#c20" ).val( ui.value + '%' ); $(update_calc); } }); $( "#c20" ).val( $( "#slider8" ).slider( "value" ) + '%' ); // and then we can apply pips to it! $slider8.slider("pips" , { suffix: "%" }); // //calculate on form submissions // $( "#calc_form" ).submit(function( event ) { // var c6 = parseInt($("#c6").val()); // var c7 = parseInt($("#c7").val()); // var c8 = parseInt($("#c8").val()); // var c11 = parseInt($("#c11").val().replace('$', '')); // var c12 = parseInt($("#c12").val().replace('$', '')); // var c13 = parseInt($("#c13").val().replace('$', '')); // var c16 = parseInt($("#c16").val()); // var c17 = parseInt($("#c17").val().replace('$', '')); // var c20 = parseInt($("#c20").val().replace('%', '')); // var c20 = c20 / 100; // //total devices update c6 + c8 updates d23 // var c6c8 = c6 + c7 + c8; // c6c82 = accounting.formatMoney(c6c8); // // setting the value // $("#d23").val(c6c8); // //total replacement cost SUMPRODUCT(C6:C8,C11:C13)*C20 // var sumproducts = (c6 * c11 + c7 * c12 + c8 * c13) * c20; // sumproducts2 = accounting.formatMoney(sumproducts); // $("#d24").val(sumproducts2); // /////////////////////////////////////////// // //Total Maintence Cost SUM(C6:C8)*C16*C17*C20 // var totalm = (c6 + c7 + c8) * c16 * c17 * c20; // totalm2 = accounting.formatMoney(totalm); // // setting the value // $("#d25").val(totalm2); // //est total cost SUM(D24:D25) updates d26 // var estcost = sumproducts + totalm; // estcost2 = accounting.formatMoney(estcost); // //setting the value // $("#d26").val(estcost2); // //est total cost D26-D23*C20*15 updates d31 // // var oneyear = estcost - c6c8 * c20 * 15; // // oneyear2 = accounting.formatMoney(oneyear); // // //setting the value // // $("#d31").val(oneyear2); // console.log(estcost); // console.log(c6c8); // // //5year D31*5 updates d32 // // var fiveyear = oneyear * 5; // // fiveyear = accounting.formatMoney(fiveyear); // // // setting the value // // $("#d32").val(fiveyear); // event.preventDefault(); // }); //calculate on form submissions $( "#calc_form_2" ).submit(function( event ) { var d23 = parseInt($("#d23").val()); var d24 = parseInt($("#d24").val().replace('$', '')); var d25 = parseInt($("#d25").val().replace('$', '')); var d26 = parseInt(accounting.unformat($("#d26").val())); var c20 = parseInt($("#c20").val().replace('%', '')); var c17 = parseInt($("#c17").val().replace('$', '')); var c20 = c20 / 100; //est total cost D26-D23*C20*15 updates d31 //var oneyear = d26 - d23 * c20 * 15; var oneyear = d26-((d23*c20*20*0.8)+(d23*c20*c17*5/60))-(d26*0.2); console.log(oneyear); oneyear2 = accounting.formatMoney(oneyear); //setting the value $("#d31").val(oneyear2); //5year D31*5 updates d32 var fiveyear = oneyear * 5; fiveyear = accounting.formatMoney(fiveyear); // setting the value $("#d32").val(fiveyear); event.preventDefault(); }); }); </script><style> input[disabled], textarea[disabled], select[disabled='disabled']{ -webkit-text-fill-color: rgba(255, 255, 255, 1); -webkit-opacity: 1; color: rgba(255, 255, 255, 1); } .qtip-content { background-color: white; border: 1px solid #22b0e6; font-family: arial; } .small { font-size: 10px; padding: 10px; } .icon { margin-left: 5px; } .calc_wrapper { max-width: 540px; overflow: auto; margin: 0 auto; color: white; background-color: #1ca0ea; font: 14px Arial, Helvetica, sans-serif; } .calc_wrapper a { color: white; border-bottom: 1px dotted #fff; text-decoration: none; } .sliderwrapper { width:300px; float: left; position: relative; } .slider { } .ui-slider-line { background: white !important; } .ui-slider-horizontal { height: 5px !important; background: white; } .calcheader { font-size: 14px; height: 25px; background-color: #1991d4; margin-bottom: 20px; text-transform: uppercase; font-weight: bold; padding-top:10px; padding-left: 10px; } .textfield { float: right; width: 65px; font-size: 16px; text-align: center; border: 1px solid #22b0e6; background-color: #009ad6; padding: 5px 0px; color: white; margin-right: 10px; margin-top: -5px; } .fieldlabel { float: left; padding-right: 10px; width: 100px; padding-left: 10px; } .fieldstyle { height: 50px; } .calculated { float: right; width: 155px; text-align: right; font-size: 18px; border: 1px solid #22b0e6; background-color: #009ad6; padding-right: 5px; color: white; } .calculatedgood { float: right; width: 150px; text-align: right; font-size: 18px; font-weight: bold; background-color: #3dd381; padding: 5px; border: 1px solid #22b0e6; color: white; } .calclabel { float: left; font-size: 14px; padding-top: 2px; width: 280px; } .calcrow { clear: both; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; } .clearpatch { height: 175px; border-bottom: 1px; border-left: 1px; border-right: 1px; border-color: #1ca0ea; border-style: solid; margin-top:20px; } .ui-slider .ui-slider-handle { width: 15px; height: 15px; margin-left: -8px; border-radius: 8px; background: #76beba; border: 1px solid white; outline: none; } .submit-button { float: right; background-color: #FFF; color: #0ca6e0; font-size: 16px; font-weight: bold; border: 1px solid #49b0d8; width: 162px; height: 45px; cursor: pointer; outline: none; margin-right: 10px; } @media (max-width: 500px) { .sliderwrapper { width:116px; float: left; position: relative; } .calculated { float: right; width: 75px; font-size: 14px; } .calcheader { font-size: 11px; } .calclabel { float: left; font-size: 12px; padding-top: 2px; width: 160px; font-family: arial; } .textfield { float: right; width: 45px; font-size: 14px; } .calculatedgood { width: 80px; } .fieldlabel { width: 73px; font-size: 12px; } .ui-slider .ui-slider-handle { width: 20px; height: 20px; margin-left: -8px; border-radius: 8px; margin-bottom: 5px; } } </style></head><body> <div class="calc_wrapper"> <form action="/" id="calc_form"> <div class="calcheader">Number Of Devices</div> <div class="fieldstyle"><label class="fieldlabel" for="">Beds</label> <div class="sliderwrapper"> <div class="slider" id="slider"></div> </div> <input type="text" disabled="disabled" class="textfield" id="c6" /></div> <div class="fieldstyle"><label class="fieldlabel" for="">Stretchers</label> <div class="sliderwrapper"> <div class="slider" id="slider1"></div> </div> <input type="text" disabled="disabled" class="textfield" id="c7" /></div> <div class="fieldstyle"><label class="fieldlabel" for="">Other Soft Surfaces<a href="#" class="icon" title="Other soft surfaces include wheel chairs, positioning pads, gel pads, chairs, etc"><img src="/calc-js/icon.gif" alt="" /></a></label> <div class="sliderwrapper"> <div class="slider" id="slider2"></div> </div> <input type="text" disabled="disabled" class="textfield" id="c8" /></div> <div class="calcheader">Replacement Cost Per Device</div> <div class="fieldstyle"><label class="fieldlabel" for="">Bed Mattress</label> <div class="sliderwrapper"> <div class="slider" id="slider3"></div> </div> <input type="text" disabled="disabled" class="textfield" id="c11" /></div> <div class="fieldstyle"><label class="fieldlabel" for="">Stretcher Mattress</label> <div class="sliderwrapper"> <div class="slider" id="slider4"></div> </div> <input type="text" disabled="disabled" class="textfield" id="c12" /></div> <div class="fieldstyle"><label class="fieldlabel" for="">Other Soft Surfaces<a href="#" class="icon" title="Other soft surfaces include wheel chairs, positioning pads, gel pads, chairs, etc"><img src="/calc-js/icon.gif" alt="" /></a></label> <div class="sliderwrapper"> <div class="slider" id="slider5"></div> </div> <input type="text" disabled="disabled" class="textfield" id="c13" /></div> <div class="calcheader">Maintenance Cost to Replace a Device<a href="#" class="icon" title="Time lost when a bed is taken out of service for replacement or repair, and brought back into service."><img src="/calc-js/icon.gif" alt="" /></a></div> <div class="fieldstyle"><label class="fieldlabel" for="">Number of Man Hours</label> <div class="sliderwrapper"> <div class="slider" id="slider6"></div> </div> <input type="text" disabled="disabled" class="textfield" id="c16" /></div> <div class="fieldstyle"><label class="fieldlabel" for="">Cost per Man Hour</label> <div class="sliderwrapper"> <div class="slider" id="slider7"></div> </div> <input type="text" disabled="disabled" class="textfield" id="c17" /></div> <div class="calcheader">Annual Rate of Damage</div> <div class="fieldstyle"><label class="fieldlabel" for="">Rate<a href="#" class="icon" title="At any time, what percentage of your soft surfaces are damaged? Independent research suggests 25-50%."><img src="/calc-js/icon.gif" alt="" /></a></label> <div class="sliderwrapper"> <div class="slider" id="slider8"></div> </div> <input type="text" disabled="disabled" class="textfield" id="c20" /></div> <div><!-- <div class="calcheader" style="height:35px; background-color:#1ca0ea; padding-top:20px;"><input type="submit" value="Annual Costs" class="submit-button"></div> --></div> </form> <form action="/" id="calc_form_2"> <div class="calcheader">Annual Costs</div> <div class="calcrow"> <div class="calclabel">Total Devices</div> <input type="text" class="calculated" value="0" disabled="disabled" id="d23" /></div> <div class="calcrow"> <div class="calclabel">Total Replacement Cost</div> <input type="text" class="calculated" value="$0" disabled="disabled" id="d24" /></div> <div class="calcrow"> <div class="calclabel">Total Maintenance Cost</div> <input type="text" class="calculated" value="$0" disabled="disabled" id="d25" /></div> <div class="calcrow"> <div class="calclabel">Estimated Total Costs</div> <input type="text" class="calculated" value="$0" disabled="disabled" id="d26" /></div> <div class="calcheader" style="height:35px; background-color:#1ca0ea; padding-top:50px;"><input type="submit" value="Use CleanPatch" class="submit-button" /></div> </form> <div class="clearpatch"> <div class="calcheader">CleanPatch Cost Savings</div> <div class="calcrow"> <div class="calclabel currency" style="font-weight: bold;">1 year savings</div> <input type="text" class="calculatedgood" value="$0" disabled="disabled" id="d31" /></div> <div class="calcrow"> <div class="calclabel" style="font-weight: bold;">5 year savings</div> <input type="text" class="calculatedgood" value="$0" disabled="disabled" id="d32" /></div> </div> <div class="small">CleanPatch cost savings are calculated by factoring the number of devices, damage rate, cost of CleanPatch, 80:20 repair: replace strategy, and the time required to apply the product.</div> </div> </body></html>