Fun Calculator
About this app
A simple calculator with addition, subtraction, and division functionality.
Fun Calculator 🧮 Fun Calculator Add (+) Subtract (-) Divide (/) Calculate
Related apps
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">
<title>Fun Calculator</title>
<meta name="description" content="A simple calculator with addition, subtraction, and division functionality.">
<meta name="keywords" content="calculator, add, subtract, divide, simple, fun, interactive, web app">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#calculate').click(function() {
var num1 = parseFloat($('#number1').val());
var num2 = parseFloat($('#number2').val());
var operation = $('#operation').val();
var result = 0;
switch(operation) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '/':
if(num2 === 0) {
alert("Cannot divide by zero!");
return;
}
result = num1 / num2;
break;
default:
result = "Invalid operation";
}
$('#result').val(result);
});
});
</script>
<style>
body {
font-family: 'Fredoka One', cursive;
background: linear-gradient(90deg, rgba(255,175,189,1) 0%, rgba(100,216,243,1) 100%);
color: #333;
}
#main-container {
max-width: 500px;
margin-top: 50px;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-control, .btn, select {
border-radius: 20px;
}
.btn {
font-size: 18px;
}
.result-box {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h2 class="text-center">🧮 Fun Calculator</h2>
<div class="mb-3">
<input type="text" id="number1" class="form-control" placeholder="Enter first number">
</div>
<div class="mb-3">
<select id="operation" class="form-select">
<option value="+">Add (+)</option>
<option value="-">Subtract (-)</option>
<option value="/">Divide (/)</option>
</select>
</div>
<div class="mb-3">
<input type="text" id="number2" class="form-control" placeholder="Enter second number">
</div>
<button id="calculate" class="btn btn-primary w-100"><i class="fas fa-calculator"></i> Calculate</button>
<div class="result-box">
<input type="text" id="result" class="form-control" placeholder="Result" readonly>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!