<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#000000">
<link rel="apple-touch-icon" href="icon.png">
<title>Dynamic Calculator</title>
<style>
body { margin: 0; background-color: black; font-family: "Arial Rounded MT", sans-serif; }
.calculator-container { position: relative; width: 100vw; height: 100vh; max-width: 390px; margin: auto; }
.calculator-background { width: 100%; height: 100%; object-fit: contain; }
.history-display {
position: absolute;
top: 15%;
left: 5%;
width: 90%;
text-align: right;
font-size: 1.5em;
color: white;
padding: 5px;
}
.display {
position: absolute;
top: 25%;
left: 5%;
width: 90%;
text-align: right;
font-size: 4em;
color: white;
padding: 10px;
background-color: black;
border-radius: 10px;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: font-size 0.2s ease-in-out;
}
.scrollable {
overflow-x: auto;
direction: rtl;
}
.button-area { position: absolute; background-color: transparent; }
</style>
</head>
<body>
<div class="calculator-container">
<div class="history-display" id="history-display"></div>
<div class="display" id="display">0</div>
<img src="https://www.denverkidsmagician.com/captor.jpeg" alt="Calculator Background" class="calculator-background">
<!-- Buttons -->
<div class="button-area" style="top: 40%; left: 5%; width: 20%; height: 10%;" onclick="storeNumber()"></div>
<div class="button-area" style="top: 40%; left: 30%; width: 20%; height: 10%;" onclick="toggleSign()"></div>
<div class="button-area" style="top: 40%; left: 55%; width: 20%; height: 10%;" onclick="percentage()"></div>
<div class="button-area" style="top: 40%; left: 80%; width: 15%; height: 10%;" onclick="pressOperator('÷')"></div>
<div class="button-area" style="top: 52%; left: 5%; width: 20%; height: 10%;" onclick="pressNumber(7)"></div>
<div class="button-area" style="top: 52%; left: 30%; width: 20%; height: 10%;" onclick="pressNumber(8)"></div>
<div class="button-area" style="top: 52%; left: 55%; width: 20%; height: 10%;" onclick="pressNumber(9)"></div>
<div class="button-area" style="top: 52%; left: 80%; width: 15%; height: 10%;" onclick="pressOperator('×')"></div>
<div class="button-area" style="top: 58%; left: 5%; width: 20%; height: 10%;" onclick="pressNumber(4)"></div>
<div class="button-area" style="top: 58%; left: 30%; width: 20%; height: 10%;" onclick="pressNumber(5)"></div>
<div class="button-area" style="top: 58%; left: 55%; width: 20%; height: 10%;" onclick="pressNumber(6)"></div>
<div class="button-area" style="top: 58%; left: 80%; width: 15%; height: 10%;" onclick="pressOperator('-')"></div>
<div class="button-area" style="top: 70%; left: 5%; width: 20%; height: 10%;" onclick="pressNumber(1)"></div>
<div class="button-area" style="top: 70%; left: 30%; width: 20%; height: 10%;" onclick="pressNumber(2)"></div>
<div class="button-area" style="top: 70%; left: 55%; width: 20%; height: 10%;" onclick="pressNumber(3)"></div>
<div class="button-area" style="top: 70%; left: 80%; width: 15%; height: 10%;" onclick="pressOperator('+')"></div>
<div class="button-area" style="top: 82%; left: 30%; width: 20%; height: 10%;" onclick="pressNumber(0)"></div>
<div class="button-area" style="top: 82%; left: 55%; width: 20%; height: 10%;" onclick="pressDecimal()"></div>
<div class="button-area" style="top: 82%; left: 80%; width: 15%; height: 10%;" onclick="calculateResult()"></div>
</div>
<script>
let variables = []; // Stores each entered number
let operators = []; // Stores each operator (+, -, etc.)
let storedAC = 0; // The target number to match (e.g., 1000)
function pressNumber(num) {
if (variables.length === operators.length) {
variables.push(num); // Start a new number
} else {
variables[variables.length - 1] = variables[variables.length - 1] * 10 + num; // Append to the current number
}
updatePrimaryDisplay();
}
function pressOperator(operator) {
if (variables.length > operators.length) {
operators.push(operator); // Add the operator to the list
updatePrimaryDisplay();
}
}
function updatePrimaryDisplay() {
const display = document.getElementById("display");
let displayText = "";
for (let i = 0; i < variables.length; i++) {
displayText += variables[i];
if (i < operators.length) {
displayText += ` ${operators[i]} `;
}
}
display.innerText = displayText || "0";
const charCount = displayText.length;
if (charCount <= 8) {
display.style.fontSize = "4em"; // Default size
display.classList.remove("scrollable");
} else if (charCount === 9) {
display.style.fontSize = "3.5em"; // Slightly smaller
display.classList.remove("scrollable");
} else if (charCount === 10) {
display.style.fontSize = "3em"; // Smaller still
display.classList.add("scrollable");
}
}
function storeNumber() {
storedAC = variables.reduce((sum, num, index) => {
return sum + (index < operators.length && operators[index] === "-" ? -num : num);
}, 0); // Calculate the current sum of the entered numbers
variables = []; // Clear variables after storing
operators = [];
document.getElementById("display").innerText = "0";
}
function calculateResult() {
let currentSum = variables.reduce((sum, num, index) => {
return sum + (index < operators.length && operators[index] === "-" ? -num : num);
}, 0);
if (storedAC !== 0 && currentSum !== storedAC) {
adjustVariablesToMatchAC(currentSum);
}
const display = document.getElementById("display");
const history = document.getElementById("history-display");
let historyText = "";
for (let i = 0; i < variables.length; i++) {
historyText += variables[i];
if (i < operators.length) {
historyText += ` ${operators[i]} `;
}
}
history.innerText = historyText.trim(); // Remove any trailing operator
display.innerText = storedAC;
display.style.fontSize = "4em"; // Reset to default
display.classList.remove("scrollable");
}
function adjustVariablesToMatchAC(currentSum) {
const difference = storedAC - currentSum;
if (variables.length === 1) {
variables[0] += difference;
} else if (variables.length >= 2) {
const adjustmentPerTerm = Math.round(difference / 2);
variables[0] += adjustmentPerTerm;
variables[1] += difference - adjustmentPerTerm;
}
updatePrimaryDisplay();
}
</script>
</body>
</html>