Fun Calculator
About this app
A fun and interactive calculator with custom functionality and a glossy black design.
Fun Calculator √ AC ✖ % ÷ ∛ 7 8 9 X ^ 4 5 6 - () 1 2 3 + π 00 . 0 =
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<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.0">
<title>Fun Calculator</title>
<meta name="description" content="A fun and interactive calculator with custom functionality and a glossy black design.">
<meta name="keywords" content="calculator, glossy black, interactive, web app">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Orbitron', sans-serif;
}
#main-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #000000; /* glossy black */
color: white;
}
#output {
width: 300px;
background: #333333; /* glossy black output section */
margin-bottom: 10px;
padding: 10px;
text-align: right;
border-radius: 10px;
overflow: hidden;
}
#output p {
margin: 0;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.button-row {
display: flex;
justify-content: space-between;
}
.calc-button {
flex: 1;
margin: 5px;
padding: 15px 0;
background: #d3d3d3; /* light grey */
color: darkred;
border: none;
border-radius: 10px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
.calc-button.number {
color: white;
}
.calc-button:hover, .calc-button:active {
background: #000000; /* black on hover and active */
}
</style>
</head>
<body>
<div id="main-container">
<div id="output">
<p id="expression"></p>
<p id="result"></p>
</div>
<div class="button-row">
<button class="calc-button" onclick="calculate('sqrt')">√</button>
<button class="calc-button" onclick="clearAll()">AC</button>
<button class="calc-button" onclick="del()">✖</button>
<button class="calc-button" onclick="calculate('%')">%</button>
<button class="calc-button" onclick="calculate('÷')">÷</button>
</div>
<div class="button-row">
<button class="calc-button" onclick="calculate('cbrt')">∛</button>
<button class="calc-button number" onclick="appendToExpression('7')">7</button>
<button class="calc-button number" onclick="appendToExpression('8')">8</button>
<button class="calc-button number" onclick="appendToExpression('9')">9</button>
<button class="calc-button" onclick="calculate('X')">X</button>
</div>
<div class="button-row">
<button class="calc-button" onclick="calculate('^')">^</button>
<button class="calc-button number" onclick="appendToExpression('4')">4</button>
<button class="calc-button number" onclick="appendToExpression('5')">5</button>
<button class="calc-button number" onclick="appendToExpression('6')">6</button>
<button class="calc-button" onclick="calculate('-')">-</button>
</div>
<div class="button-row">
<button class="calc-button" onclick="toggleBrackets()">()</button>
<button class="calc-button number" onclick="appendToExpression('1')">1</button>
<button class="calc-button number" onclick="appendToExpression('2')">2</button>
<button class="calc-button number" onclick="appendToExpression('3')">3</button>
<button class="calc-button" onclick="calculate('+')">+</button>
</div>
<div class="button-row">
<button class="calc-button" onclick="appendToExpression('π')">π</button>
<button class="calc-button number" onclick="appendToExpression('00')">00</button>
<button class="calc-button number" onclick="appendToExpression('.')">.</button>
<button class="calc-button number" onclick="appendToExpression('0')">0</button>
<button class="calc-button" onclick="equals()">=</button>
</div>
</div>
<script>
let expression = '';
let bracketOpen = false;
function appendToExpression(value) {
if (expression.length === 0 && isNaN(value)) return;
if (isNaN(expression[expression.length - 1]) && isNaN(value) && value !== '-') expression = expression.slice(0, -1);
if (value === 'π') value = Math.PI;
expression += value;
updateDisplay();
}
function updateDisplay() {
document.getElementById('expression').innerText = expression;
}
function clearAll() {
expression = '';
updateDisplay();
}
function del() {
expression = expression.slice(0, -1);
updateDisplay();
}
function calculate(operator) {
if (expression.length === 0) return;
let lastChar = expression[expression.length - 1];
if (isNaN(lastChar) && lastChar !== ')') {
expression = expression.slice(0, -1);
}
switch (operator) {
case 'sqrt':
expression += '**0.5';
break;
case 'cbrt':
expression += '**(1/3)';
break;
case '^':
expression += '**';
break;
case '÷':
expression += '/';
break;
case 'X':
expression += '*';
break;
default:
expression += operator;
}
updateDisplay();
}
function toggleBrackets() {
if (bracketOpen) {
expression += ')';
bracketOpen = false;
} else {
expression += '(';
bracketOpen = true;
}
updateDisplay();
}
function equals() {
try {
let result = eval(expression);
document.getElementById('result').innerText = '= ' + result.toFixed(2);
expression = result.toString();
} catch (e) {
document.getElementById('result').innerText = 'Error';
expression = '';
}
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!