Calculator Tools Calculator Tools
Create

Android Calculator - A Simple, Fun Calculator App

May 5, 2025

About this app

Experience the fun and colorful Android Calculator app. Perform simple calculations effortlessly with engaging visuals!

Simple CHAANGU CALCULATOR CHAANGU CALCULATOR 🎉 Select operation + - * / Calculate 🎲 Reset 🔄

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>Simple CHAANGU CALCULATOR</title>
<meta name="description" content="A simple and colorful calculator called CHAANGU CALCULATOR!">
<meta name="keywords" content="calculator, simple, chaangu, colorful, interactive">

<script type="text/javascript">
function calculate() {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
const operation = document.getElementById('operation').value;
let result;

switch(operation) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = (num2 !== 0) ? (num1 / num2) : "Cannot divide by zero 🚫";
break;
default:
result = "Please select an operation! 🌈";
}
document.getElementById('result').innerText = `Result: ${result}`;
}

function resetCalculator() {
document.getElementById('num1').value = '';
document.getElementById('num2').value = '';
document.getElementById('operation').selectedIndex = 0;
document.getElementById('result').innerText = '';
}

document.addEventListener("DOMContentLoaded", function() {
document.getElementById('calculateButton').addEventListener('click', calculate);
document.getElementById('resetButton').addEventListener('click', resetCalculator);
});
</script>

<style>
body {
background: linear-gradient(135deg, #84CFFF, #00BFFF);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Kadwa', sans-serif;
color: #333;
}
#main-container {
background-color: #ffffff;
padding: 30px;
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
width: 300px;
text-align: center;
}
h1 {
color: #FF5722;
margin-bottom: 20px;
}
#result {
font-size: 1.5em;
margin-top: 20px;
color: #303F9F;
padding: 10px;
border-radius: 5px;
background-color: #ffeb3b;
}
input[type="number"], select {
padding: 10px;
font-size: 1em;
margin: 5px 0;
border-radius: 5px;
border: 2px solid #FF5722;
width: 100%;
}
.btn {
width: 48%;
padding: 10px;
font-size: 1em;
border-radius: 5px;
border: none;
cursor: pointer;
margin: 5px 0;
transition: background-color 0.3s;
}
#calculateButton {
background-color: #4CAF50;
color: white;
}
#resetButton {
background-color: #F44336;
color: white;
}
.btn:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="main-container">
<h1>CHAANGU CALCULATOR 🎉</h1>
<input type="number" id="num1" placeholder="First number" required>
<select id="operation">
<option value="">Select operation</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" id="num2" placeholder="Second number" required>
<button id="calculateButton" class="btn">Calculate 🎲</button>
<button id="resetButton" class="btn">Reset 🔄</button>
<div id="result"></div>
</div>
</body>
</html>