<div class="calc">
<input type="text" class="calc-display" id="display" readonly>
<div class="calc-keys">
<button onclick="clearDisplay()" class="btn-gray">AC</button>
<button onclick="deleteLast()" class="btn-gray">DEL</button>
<button onclick="append('/')" class="btn-gray">÷</button>
<button onclick="append('*')" class="btn-orange">×</button>
<button onclick="append('7')">7</button>
<button onclick="append('8')">8</button>
<button onclick="append('9')">9</button>
<button onclick="append('-')" class="btn-orange">-</button>
<button onclick="append('4')">4</button>
<button onclick="append('5')">5</button>
<button onclick="append('6')">6</button>
<button onclick="append('+')" class="btn-orange">+</button>
<button onclick="append('1')">1</button>
<button onclick="append('2')">2</button>
<button onclick="append('3')">3</button>
<button onclick="calculate()" class="btn-orange span-2">=</button>
<button onclick="append('0')" class="span-2">0</button>
<button onclick="append('.')">.</button>
</div>
</div>
.calc {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
width: 300px;
background: #000;
border-radius: 20px;
padding: 20px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.calc-display {
width: 100%;
background: none;
border: none;
color: white;
font-size: 3rem;
text-align: right;
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
}
.calc-keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
button {
height: 60px;
border-radius: 50%;
border: none;
font-size: 1.5rem;
font-weight: 500;
cursor: pointer;
background: #333;
color: white;
transition: filter 0.2s;
}
button:active {
filter: brightness(1.2);
}
.btn-orange {
background: #f97316;
}
.btn-gray {
background: #a3a3a3;
color: black;
}
.span-2 {
grid-row: span 2;
height: 100%;
border-radius: 30px;
}
let display = document.getElementById("display");
function append(input) {
display.value += input;
}
function clearDisplay() {
display.value = "";
}
function deleteLast() {
display.value = display.value.slice(0, -1);
}
function calculate() {
try {
// Note: eval() is used here for simplicity in a client-side snippet.
// In production apps, consider a safer parser.
display.value = eval(display.value);
} catch (error) {
display.value = "Error";
}
}
