Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

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' );