FC360 Calculator
Calculator shortcode
// Add Shortcode function fc_calculator_embed() { <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> </head> <style> /* HOVER CSS */ .field-tip { position:relative; cursor:help; } .field-tip .tip-content { position:absolute; top:29px; /* - top padding */ right:9999px; width:200px; z-index:1000; margin-right:-125px; /* width + left/right padding */ padding:24px; color:#fff; background:#120078; -webkit-box-shadow:2px 2px 5px #aaa; -moz-box-shadow:2px 2px 5px #aaa; box-shadow:2px 2px 5px #aaa; opacity:0; -webkit-transition:opacity 250ms ease-out; -moz-transition:opacity 250ms ease-out; -ms-transition:opacity 250ms ease-out; -o-transition:opacity 250ms ease-out; transition:opacity 250ms ease-out; } /* <http://css-tricks.com/snippets/css/css-triangle/> */ .field-tip .tip-content:before { content:' '; /* Must have content to display */ position:absolute; top:-5%; left:115px; /* 2 x border width */ width:0; height:0; margin-top:-6px; /* - border width */ border:8px solid transparent; border-bottom-color:#120078; } .field-tip:hover .tip-content { right:-20px; opacity:1; } /* QUESTION MARK TOGGLE CSS */ img.field-tip.img { margin-left: 12px; position: absolute; height:16px; width: 16px; } body { background: #fff; } .container { background: #F8F8FC; padding: 25px; } /* SLIDER CONTAINER CSS */ .slider-container.left { width: 50%; display: inline-block; } .slider-container.right { width: 30%; display: inline; } input { width: 70px; margin-left: 20px; outline: none; border: 0px; background: none; color: #0069FF; font-size: 24px; } input.middle:focus { outline-width: 0; } label{ padding-top: 6px; display: inline-block; text-align:center; } label:first-child{ text-align:left; } label:last-child{ text-align:right; } /* SLIDER CSS */ .ui-state-default, .ui-widget-content .ui-state-default { background: #fff; border: 0px; } .ui-slider-horizontal { height: 0.5em; } .ui-slider-handle { -ms-touch-action: none; touch-action: none; outline: 0; background: #fff; border: 0; box-shadow: 0 4px 8px 0 rgba(18,0,120,0.16); border-radius: 50%; top: -.4em; } .ui-slider-handle:active { box-shadow: 0px 0px 0px 10px rgba(0, 105, 255, 0.25); } .ui-widget.ui-widget-content { background: #c6ccd4; border: 0px; } .ui-slider .ui-slider-range { background: #0069ff; } </style> <div class="container"> <h1>Equipment Loan Calculators</h1> <p><b>How much do you need?</b> <span class="field-tip"> <img src="http://67.225.129.230/~dev/calculator/question-mark_denim.svg" class="field-tip img"> <span class="tip-content">Hovering on the question icon will display a tool tip to explain to the user why we are requiring these fields and reassure them that it is necessary and safe to complete this form.</span> </span> </p> <div class="slider-container left"> <div id="amountRange" onchange="doMath();" ></div> <div id="amountLabel"></div> </div> <div class="slider-container right"> <input id="amountValue" value="2500" onchange="handleAmountChange(this); doMath();" /> $ </div> <p><b>Interest Rate:</b> <span class="field-tip"> <img src="http://67.225.129.230/~dev/calculator/question-mark_denim.svg" class="field-tip img"> <span class="tip-content">Hovering on the question icon will display a tool tip to explain to the user why we are requiring these fields and reassure them that it is necessary and safe to complete this form.</span> </span> </p> <div class="slider-container left"> <div id="interestRange"></div> <div id="interestLabel"></div> </div> <div class="slider-container right"> <input id="interestValue" value="8" maxlength="2" onchange="handleInterestChange(this); doMath();" /> % </div> <p><b>Loan Term:</b> <span class="field-tip"> <img src="http://67.225.129.230/~dev/calculator/question-mark_denim.svg" class="field-tip img"> <span class="tip-content">Hovering on the question icon will display a tool tip to explain to the user why we are requiring these fields and reassure them that it is necessary and safe to complete this form.</span> </span> </p> <div class="slider-container left"> <div id="termRange"></div> <div id="termLabel"></div> </div> <div class="slider-container right"> <input id="termValue" value="24" maxlength="2" onchange="handleTermChange(this); doMath();" /> m </div> <br><br><br><button onClick="doMath()" />Hello</button> <div id="totalPrice"></div> <div id="Result"></div> </div> <script> /* VALIDATION FUNCTIONS ONLY ALLOW NUMBERS AND PREVENT ZEROS */ $(function(){ $('input').on('keypress', function(e){ return e.metaKey || // cmd/ctrl e.which <= 0 || // arrow keys e.which == 8 || // delete key /[0-9]/.test(String.fromCharCode(e.which)); // numbers }) $("input").keyup(function(){ var value = $(this).val(); value = value.replace(/^(0*)/,""); $(this).val(value); }); }); /* AMOUNT VALUE SLIDER */ $("#amountRange").slider({ range: "min", value: 2500, step: 1, min: 1, max: 5000, change: function (event, ui){ doMath(); }, slide: function (event, ui) { $("#amountValue").val(ui.value); } }); $("#amountValue").on("keyup",function(e){ $("#amountRange").slider("value",this.value); doMath(); }); $('#amountValue').on('keyup keydown', function(e){ if ($(this).val() > 5000 && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(5000); doMath(); } if ($(this).val() == 0 ){ e.preventDefault(); $(this).val(1); doMath(); } }); var items =[ '$1','$5000']; var oneBig = 100 / (items.length - 1); $.each(items, function(key,value){ var w = oneBig; if(key === 0 || key === items.length-1) w = oneBig/2; $("#amountLabel").append("<label style='width: "+w+"%'>"+value+"</laben>"); }); /* INTEREST RATE SLIDER */ $("#interestRange").slider({ range: "min", value: 8, step: 1, min: 8, max: 24, change: function (event, ui){ doMath(); }, slide: function( event, ui ) { $("#interestValue").val(ui.value); } }); $("#interestValue").on("keyup",function(e){ $("#interestRange").slider("value",this.value); }); $('#interestValue').on('keyup keydown', function(e){ if ($(this).val() > 24 && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(24); doMath(); } if ($(this).val() == 0 ){ e.preventDefault(); $(this).val(8); doMath(); } if ($(this).val() < 8 && $(this).val() > 2 && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(8); doMath(); } }); function handleInterestChange(input) { if (input.value < 0) input.value = 0; if (input.value > 24) input.value = 24; } var items =[ '8%','24%']; var oneBig = 100 / (items.length - 1); $.each(items, function(key,value){ var w = oneBig; if(key === 0 || key === items.length-1) w = oneBig/2; $("#interestLabel").append("<label style='width: "+w+"%'>"+value+"</laben>"); }); /* LOAN TERM SLIDER */ $("#termRange").slider({ range: "min", value: 24, step: 1, min: 12, max: 60, change: function (event, ui){ doMath(); }, slide: function (event, ui) { $("#termValue").val(ui.value); } }); $("#termValue").on("keyup",function(e){ $("#termRange").slider("value",this.value); }); $('#termValue').on('keyup keydown', function(e){ if ($(this).val() > 60 && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(60); doMath(); } if ($(this).val() == 0 ){ e.preventDefault(); $(this).val(12); doMath(); } if ($(this).val() < 12 && $(this).val() > 7 && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(12); doMath(); } }); $('#termValue').on('change', function(e){ e.preventDefault(); var val = Number($(this).val()); // ensure you're not accidentally comparing strings if (val > 60) { $(this).val(60); doMath(); } else if (val < 12) { $(this).val(12); doMath(); } }); function handleTermChange(input) { if (input.value < 0) input.value = 0; if (input.value > 60) input.value = 60; } var items =[ '12 mo','60 mo']; var oneBig = 100 / (items.length - 1); $.each(items, function(key,value){ var w = oneBig; if(key === 0 || key === items.length-1) w = oneBig/2; $("#termLabel").append("<label style='width: "+w+"%'>"+value+"</laben>"); }); /*GET VALUES AND DO CALCULATION */ var amountSlider = document.getElementById("amountRange"); var amountOutput = document.getElementById("amountValue"); amountOutput.innerHTML = amountSlider.value; amountSlider.step = 1000; amountSlider.oninput = function() { amountOutput.innerHTML = this.value; } var interestSlider = document.getElementById("interestRange"); var interestOutput = document.getElementById("interestValue"); interestOutput.innerHTML = interestSlider.value; interestSlider.step = 1; interestSlider.oninput = function() { interestOutput.innerHTML = this.value; } var termSlider = document.getElementById("termRange"); var termOutput = document.getElementById("termValue"); termOutput.innerHTML = termSlider.value; termSlider.step = 1; termSlider.oninput = function() { termOutput.innerHTML = this.value; } function doMath(){ var monthly = 12; var weekly = 52; var amount = $('#amountRange').slider("option", "value"); var interest = (interestOutput.value/100)/monthly; var term = termOutput.value; var exp = Math.pow((1+interest), -term); var payback = interest / (1-exp) * amount; payback = payback.toFixed(2); console.log(payback); document.getElementById("Result").innerHTML = payback; } } add_shortcode( 'calculator', 'fc_calculator_embed' );