Calculator Tool
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator-container {
width: 90%;
max-width: 400px;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #333;
}
.calculator {
width: 100%;
}
#display {
width: 100%;
height: 50px;
margin-bottom: 10px;
padding: 10px;
font-size: 24px;
text-align: right;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
width: 100%;
padding: 20px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:active {
transform: scale(0.98);
}
button:nth-child(4n+1) {
background-color: #ff4d4d;
color: white;
}
button:nth-child(4n+2) {
background-color: #ffcc00;
color: white;
}
button:nth-child(4n+3) {
background-color: #00b3b3;
color: white;
}
button:nth-child(4n+4), .equals {
background-color: #4CAF50;
color: white;
}
button:hover {
opacity: 0.9;
}
function clearDisplay() {
document.getElementById("display").value = "";
}
function deleteLast() {
let display = document.getElementById("display");
display.value = display.value.slice(0, -1);
}
function appendValue(value) {
let display = document.getElementById("display");
display.value += value;
}
function calculateResult() {
let display = document.getElementById("display");
try {
display.value = eval(display.value);
} catch (error) {
alert("Invalid expression");
clearDisplay();
}
}
No comments:
Post a Comment