Apex Calculator

Developer
Michael Nelson
Size
2,370 Kb
Views
14,168
  1. Apex Calculator Previews
  2. Apex Calculator HTML Codes
  3. Apex Calculator CSS Codes
  4. Apex Calculator JS Codes

How do I make an apex calculator?

What is a apex calculator? How do you make a apex calculator? This script and codes were developed by Michael Nelson on 05 January 2023, Thursday.

Apex Calculator Previews
IQ Test

Apex Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Apex Calculator</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <form class="form-horizontal"> <div class="form-group"> <div class="col-xs-10 col-xs-offset-1"> <label for="oneTime" class="col-xs-4 control-label">One Time:</label> <div class="col-xs-8"> <input type="text" id="oneTime" class="form-control" /> </div> </div> </div> <div class="form-group"> <div class="col-xs-10 col-xs-offset-1"> <label for="deposit" class="col-xs-4 control-label">Deposit:</label> <div class="col-xs-8"> <input type="text" id="deposit" class="form-control" /> </div> </div> </div> <div class="form-group"> <div class="col-xs-10 col-xs-offset-1"> <label for="threeMonths" class="col-xs-4 control-label">3 Months:</label> <div class="col-xs-8"> <input type="text" id="threeMonths" class="form-control" /> </div> </div> </div> <div class="form-group"> <div class="col-xs-10 col-xs-offset-1"> <label for="sixMonths" class="col-xs-4 control-label">6 Months:</label> <div class="col-xs-8"> <input type="text" id="sixMonths" class="form-control" /> </div> </div> </div> <div class="form-group"> <div class="col-xs-10 col-xs-offset-1"> <label for="twelveMonths" class="col-xs-4 control-label">12 Months:</label> <div class="col-xs-8"> <input type="text" id="twelveMonths" class="form-control" /> </div> </div> </div> </form> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://nosir.github.io/cleave.js/dist/cleave.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Apex Calculator - Script Codes CSS Codes

[class*='form-group'] { margin-bottom: 2px;
}
label { white-space: nowrap;
}
#error { display: none; font-weight: bold;
}

Apex Calculator - Script Codes JS Codes

$(document).ready(function () { var errorMessage = ""; var cleaveConfig = { numeral: true, prefix: '$' } new Cleave('#oneTime', cleaveConfig); new Cleave('#deposit', cleaveConfig); function calculation() { // strip Cleave dollar sign and commas var oneTimeValue = $("#oneTime").val().replace(/\$|,/g, ''); var depositValue = $("#deposit").val().replace(/\$|,/g, ''); var startingValue = oneTimeValue - depositValue; // get inputs var threeMonthsInput = $("#threeMonths"); var sixMonthsInput = $("#sixMonths"); var twelveMonthsInput = $("#twelveMonths"); // get factor values var threeMonthsFactor = 1.1; var sixMonthsFactor = 1.2; var twelveMonthsFactor = 1.3; // perform value calculations var threeMonthsValue = (startingValue * threeMonthsFactor) / 3; var sixMonthsValue = (startingValue * sixMonthsFactor) / 6; var twelveMonthsValue = (startingValue * twelveMonthsFactor) / 12; // set the values threeMonthsInput.val(threeMonthsValue); sixMonthsInput.val(sixMonthsValue); twelveMonthsInput.val(twelveMonthsValue); // format with Cleave new Cleave('#threeMonths', cleaveConfig); new Cleave('#sixMonths', cleaveConfig); new Cleave('#twelveMonths', cleaveConfig); } $("#oneTime, #deposit, #threeMonthsFactor, #sixMonthsFactor, #twelveMonthsFactor").on("change keyup", function() { calculation() });
});
Apex Calculator - Script Codes
Apex Calculator - Script Codes
Home Page Home
Developer Michael Nelson
Username michaelwnelson
Uploaded January 05, 2023
Rating 3
Size 2,370 Kb
Views 14,168
Do you need developer help for Apex Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michael Nelson (michaelwnelson) Script Codes
Name
A Pen by Michael Nelson
SMOKE
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!