- Shortcodes Generator
- February 12, 2019
- Public
-
Tyler Perry
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' );