Fun Calculator App
About this app
A colorful and interactive calculator app to perform operations with two 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!