<!
DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<style>
body {
background-color: #f2ecd8;
font-family: Arial, sans-serif;
}
h1 {
color: #948b7f;
text-align: center;
}
#container {
background-color: #fff4e0;
width: 500px;
margin: 20px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
#input {
width: 250px;
height: 60px;
font-size: 24px;
border-radius: 15px;
padding: 10px;
border: 2px solid #aaa;
}
button {
background-color: #948b7f;
color: white;
padding: 15px 25px;
border-radius: 5px;
margin: 5px;
}
button:active {
background-color: #f2ecd8;
transform: translateY(4px);
}
#result {
height: 20px;
text-align: center;
border: 2px solid black;
border-radius: 5px;
margin-top: 10px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Arithmetic Expression</h1>
<div id="container">
<input type="number" id="inp1">
<input type="number" id="inp2"><br><br>
<button onclick="calcAdd()">+</button>
<button onclick="calcMin()">-</button>
<button onclick="calcMult()">x</button>
<button onclick="calcDiv()">÷</button>
<button onclick="calcMod()">%</button>
<button onclick="calcFact()">n!</button>
<button onclick="calcPerm()">P(n,r)</button>
<button onclick="calcComb()">C(n,r)</button><br><br>
<div id="result"></div>
</div>
<script>
let result = document.getElementById("result");
function factorial(n) {
let fact = 1;
for (let i = 1; i <= n; i++) {
fact *= i;
}
return fact;
}
function calcAdd() {
let inp1 = parseInt(document.getElementById("inp1").value);
let inp2 = parseInt(document.getElementById("inp2").value);
result.innerHTML = inp1 + inp2;
}
function calcMin() {
let inp1 = parseInt(document.getElementById("inp1").value);
let inp2 = parseInt(document.getElementById("inp2").value);
result.innerHTML = inp1 - inp2;
}
function calcMult() {
let inp1 = parseInt(document.getElementById("inp1").value);
let inp2 = parseInt(document.getElementById("inp2").value);
result.innerHTML = inp1 * inp2;
}
function calcDiv() {
let inp1 = parseInt(document.getElementById("inp1").value);
let inp2 = parseInt(document.getElementById("inp2").value);
result.innerHTML = inp2 !== 0 ? inp1 / inp2 : "Cannot divide by zero";
}
function calcMod() {
let inp1 = parseInt(document.getElementById("inp1").value);
let inp2 = parseInt(document.getElementById("inp2").value);
result.innerHTML = inp1 % inp2;
}
function calcFact() {
let inp1 = parseInt(document.getElementById("inp1").value);
result.innerHTML = inp1 >= 0 ? factorial(inp1) : "Invalid Input";
}
function calcPerm() {
let inp1 = parseInt(document.getElementById("inp1").value);
let inp2 = parseInt(document.getElementById("inp2").value);
if (inp1 >= inp2 && inp1 >= 0 && inp2 >= 0) {
result.innerHTML = factorial(inp1) / factorial(inp1 - inp2);
} else {
result.innerHTML = "Invalid Input";
}
}
function calcComb() {
let inp1 = parseInt(document.getElementById("inp1").value);
let inp2 = parseInt(document.getElementById("inp2").value);
if (inp1 >= inp2 && inp1 >= 0 && inp2 >= 0) {
result.innerHTML = factorial(inp1) / (factorial(inp2) * factorial(inp1 - inp2));
} else {
result.innerHTML = "Invalid Input";
}
}
document.body.onclick = function () {
const colors = ['#ada3a5', '#c6b7b2', '#d5cdca', '#7b5d41'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = randomColor;
};
</script>
</body>
</html>
