Fun Calculator
About this app
A fun and colorful single page calculator web app with a glossy black design.
Fun Calculator 0 √ 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
<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>Fun Calculator</title>
<meta name="description" content="A fun and colorful single page calculator web app with a glossy black design.">
<meta name="keywords" content="calculator, glossy, black, single page, web app, math, operations">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #121212;
color: white;
}
#main-container {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
background-color: #121212;
}
#output {
width: 100%;
padding: 20px;
background-color: #333;
text-align: right;
border-radius: 10px 10px 0 0;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
animation: fadeIn 0.5s ease-in-out;
}
#calculator {
width: 100%;
background-color: #333;
border-radius: 0 0 10px 10px;
}
.button-row {
display: flex;
justify-content: space-around;
}
.calc-button {
flex: 1;
padding: 20px;
text-align: center;
border: none;
background-color: #a9a9a9;
color: #d81b60;
font-size: 24px;
transition: background-color 0.3s ease;
cursor: pointer;
}
.calc-button:hover,
.calc-button:active {
background-color: #000;
}
.number {
color: white;
}
.operator {
color: #d81b60;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div id="main-container">
<div id="output">0</div>
<div id="calculator">
<div class="button-row">
<button class="calc-button operator">√</button>
<button class="calc-button operator">AC</button>
<button class="calc-button operator">❌</button>
<button class="calc-button operator">%</button>
<button class="calc-button operator">÷</button>
</div>
<div class="button-row">
<button class="calc-button operator">∛</button>
<button class="calc-button number">7</button>
<button class="calc-button number">8</button>
<button class="calc-button number">9</button>
<button class="calc-button operator">X</button>
</div>
<div class="button-row">
<button class="calc-button operator">^</button>
<button class="calc-button number">4</button>
<button class="calc-button number">5</button>
<button class="calc-button number">6</button>
<button class="calc-button operator">-</button>
</div>
<div class="button-row">
<button class="calc-button operator">( )</button>
<button class="calc-button number">1</button>
<button class="calc-button number">2</button>
<button class="calc-button number">3</button>
<button class="calc-button operator">+</button>
</div>
<div class="button-row">
<button class="calc-button operator">π</button>
<button class="calc-button number">00</button>
<button class="calc-button number">.</button>
<button class="calc-button number">0</button>
<button class="calc-button operator">=</button>
</div>
</div>
</div>
<script type="text/javascript">
try {
const output = document.getElementById('output');
let currentInput = '';
let bracketToggle = false;
function calculateResult() {
try {
output.textContent = eval(currentInput.replace(/X/g, '*').replace(/÷/g, '/').replace(/π/g, Math.PI)
.replace(/√/g, 'Math.sqrt').replace(/∛/g, 'Math.cbrt').replace(/\^/g, '**'));
} catch (error) {
output.textContent = 'Error';
}
}
function addToInput(value) {
if (/(^|[^0-9)])[-+X÷%]+$/.test(currentInput) && /[-+X÷%]/.test(value)) {
if (value === '-' && !currentInput.endsWith('-')) {
currentInput += value;
} else {
currentInput = currentInput.replace(/[-+X÷%]+$/, value);
}
} else if (!currentInput.length && /[-+X÷%]/.test(value)) {
if (value === '-') currentInput += value;
} else {
currentInput += value;
}
output.textContent = currentInput;
}
function addBracket() {
if (bracketToggle) {
currentInput += ')';
} else {
currentInput += '(';
}
bracketToggle = !bracketToggle;
output.textContent = currentInput;
}
function clearAll() {
currentInput = '';
output.textContent = '0';
}
function deleteLast() {
if (currentInput.endsWith('(') || currentInput.endsWith(')')) {
bracketToggle = !bracketToggle;
}
currentInput = currentInput.slice(0, -1);
if (currentInput === '') {
output.textContent = '0';
} else {
output.textContent = currentInput;
}
}
$('.calc-button').click(function() {
const value = $(this).text();
switch (value) {
case 'AC':
clearAll();
break;
case '√':
case '∛':
case '^':
case 'π':
case '+':
case '-':
case 'X':
case '÷':
case '%':
case '.':
case '00':
addToInput(value);
break;
case '( )':
addBracket();
break;
case '=':
calculateResult();
break;
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
addToInput(value);
break;
case '❌':
deleteLast();
break;
}
});
} catch (error) {
throw error;
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!