Colorful Calculator
0
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Arial', sans-serif;
}
.calculator-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.calculator {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 260px;
}
.display {
background-color: #222;
color: #fff;
text-align: right;
font-size: 2rem;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
height: 50px;
line-height: 50px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.button {
background-color: #f7f7f7;
border: none;
font-size: 1.5rem;
padding: 20px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #e3e3e3;
}
.button:active {
background-color: #ccc;
}
.operator {
background-color: #ff6347;
color: #fff;
}
.operator:hover {
background-color: #ff4500;
}
.equal {
background-color: #4caf50;
color: #fff;
grid-column: span 2;
}
.equal:hover {
background-color: #45a049;
}
.zero {
grid-column: span 2;
}
.zero:hover {
background-color: #e3e3e3;
}
@media (max-width: 360px) {
.calculator {
width: 220px;
padding: 15px;
}
.display {
font-size: 1.8rem;
}
.button {
padding: 15px;
font-size: 1.2rem;
}
}
const display = document.getElementById("display");
const buttons = document.querySelectorAll(".button");
let currentInput = "0";
let operator = null;
let prevInput = "";
function updateDisplay() {
display.textContent = currentInput;
}
buttons.forEach((button) => {
button.addEventListener("click", (e) => {
const value = e.target.textContent;
if (value === "C") {
currentInput = "0";
prevInput = "";
operator = null;
} else if (value === "⌫") {
if (currentInput.length > 1) {
currentInput = currentInput.slice(0, -1);
} else {
currentInput = "0";
}
} else if (value === "=") {
if (operator && prevInput) {
currentInput = eval(prevInput + operator + currentInput).toString();
prevInput = "";
operator = null;
}
} else if (["+", "-", "*", "/"].includes(value)) {
if (prevInput && operator) {
currentInput = eval(prevInput + operator + currentInput).toString();
}
prevInput = currentInput;
operator = value;
currentInput = "0";
} else {
if (currentInput === "0") {
currentInput = value;
} else {
currentInput += value;
}
}
updateDisplay();
});
});
updateDisplay();
