Profit Calculator App
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>
NEW APPS
These are apps made by the community!