Calculator Tools Calculator Tools
Create

Profit Calculator App

Aug 12, 2026

About this app

An interactive calculator app to calculate profit and returns using two input numbers.

Profit Calculator App Profit Calculator Calculate

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>Profit Calculator App</title>
<meta name="description" content="An interactive calculator app to calculate profit and returns using two input numbers.">
<meta name="keywords" content="profit calculator, financial app, math, web app, interactive">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calculate-btn").addEventListener("click", function() {
const A = parseFloat(document.getElementById("valueA").value);
const B = parseFloat(document.getElementById("valueB").value);
if (!isNaN(A) && !isNaN(B)) {
const C = parseFloat((A - B).toFixed(4));
const takeProfit = parseFloat((C - A).toFixed(4));
document.getElementById("result").innerHTML = `C = ${C}<br>Take Profit = ${takeProfit}`;
} else {
document.getElementById("result").innerHTML = "Please enter valid numbers!";
}
});
});
} catch (error) {
throw error;
}

function saveLocal() {
const valueA = document.getElementById("valueA").value;
const valueB = document.getElementById("valueB").value;
localStorage.setItem("valueA", valueA);
localStorage.setItem("valueB", valueB);
}

function loadLocal() {
const valueA = localStorage.getItem("valueA");
const valueB = localStorage.getItem("valueB");
if (valueA) {
document.getElementById("valueA").value = valueA;
}
if (valueB) {
document.getElementById("valueB").value = valueB;
}
}

window.onload = () => {
loadLocal();
document.querySelectorAll('input').forEach(input => {
input.addEventListener('input', saveLocal);
});
}
</script>

<style>
body {
background: linear-gradient(135deg, #6a11cb, #2575fc);
font-family: 'Roboto', sans-serif;
color: #ffffff;
}
#main-container {
margin-top: 50px;
text-align: center;
padding: 30px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
input {
margin: 15px 0;
width: 220px;
padding: 10px;
border-radius: 5px;
border: 1px solid #e0e0e0;
transition: border 0.3s;
}
input:focus {
border: 2px solid #6a11cb;
outline: none;
}
button {
margin-top: 20px;
padding: 10px 25px;
background-color: #6a11cb;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #5a10b8;
}
#result {
margin-top: 20px;
font-size: 1.5em;
color: #2c3e50;
font-weight: bold;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Profit Calculator</h1>
<div>
<input type="number" id="valueA" placeholder="Enter value A" step="0.0001" required>
<input type="number" id="valueB" placeholder="Enter value B" step="0.0001" required>
<br>
<button id="calculate-btn">Calculate</button>
</div>
<div id="result"></div>
</div>
</body>
</html>