Simple Subtraction Calculator
About this app
A fun and colorful single-page subtraction calculator that calculates the take profit value based on two inputs.
Dual Calculator - Take Profit & C Dual Calculator Calculator 1 Calculate Clear Calculator 2 Calculate Clear
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dual Calculator - Take Profit & C</title>
<meta name="description" content="A fun and colorful dual calculator to compute take profit values based on two inputs for two different operations.">
<meta name="keywords" content="calculator, subtraction, numbers, math, profit, dual calculator, take profit">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
$('#calculate1').on('click', function() {
let A = parseFloat($('#inputA1').val()).toFixed(4);
let B = parseFloat($('#inputB1').val()).toFixed(4);
if (!isNaN(A) && !isNaN(B)) {
let C = (parseFloat(A) - parseFloat(B)).toFixed(4);
let takeProfit = (parseFloat(A) - parseFloat(C)).toFixed(4);
$('#resultC1').text(`Value C (A - B): ${C}`);
$('#resultTakeProfit1').text(`Take Profit (A - C): ${takeProfit}`);
} else {
alert('Please enter valid numbers for A and B in Calculator 1.');
}
});
$('#clear1').on('click', function() {
$('#inputA1').val('');
$('#inputB1').val('');
$('#resultC1').text('');
$('#resultTakeProfit1').text('');
});
$('#calculate2').on('click', function() {
let A = parseFloat($('#inputA2').val()).toFixed(4);
let B = parseFloat($('#inputB2').val()).toFixed(4);
if (!isNaN(A) && !isNaN(B)) {
let C = (parseFloat(A) - parseFloat(B)).toFixed(4);
let takeProfit = (parseFloat(B) - parseFloat(C)).toFixed(4);
$('#resultC2').text(`Value C (A - B): ${C}`);
$('#resultTakeProfit2').text(`Take Profit (B - C): ${takeProfit}`);
} else {
alert('Please enter valid numbers for A and B in Calculator 2.');
}
});
$('#clear2').on('click', function() {
$('#inputA2').val('');
$('#inputB2').val('');
$('#resultC2').text('');
$('#resultTakeProfit2').text('');
});
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(135deg, #00c6ff, #0072ff);
color: white;
font-family: 'Roboto', sans-serif;
}
#main-container {
margin-top: 20px;
text-align: center;
padding: 20px;
border-radius: 15px;
background-color: rgba(0, 0, 0, 0.6);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
h1, h2 {
margin-bottom: 20px;
font-size: 2em;
}
.btn {
margin: 10px;
border-radius: 20px;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.calculator {
margin: 20px;
border: 2px dashed white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Dual Calculator</h1>
<div class="calculator" id="calculator1">
<h2>Calculator 1</h2>
<input type="number" id="inputA1" class="form-control" placeholder="Enter value A" step="any" required>
<input type="number" id="inputB1" class="form-control" placeholder="Enter value B" step="any" required>
<button id="calculate1" class="btn btn-primary">Calculate</button>
<button id="clear1" class="btn btn-secondary">Clear</button>
<div class="result" id="resultC1"></div>
<div class="result" id="resultTakeProfit1"></div>
</div>
<div class="calculator" id="calculator2">
<h2>Calculator 2</h2>
<input type="number" id="inputA2" class="form-control" placeholder="Enter value A" step="any" required>
<input type="number" id="inputB2" class="form-control" placeholder="Enter value B" step="any" required>
<button id="calculate2" class="btn btn-primary">Calculate</button>
<button id="clear2" class="btn btn-secondary">Clear</button>
<div class="result" id="resultC2"></div>
<div class="result" id="resultTakeProfit2"></div>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!