Here’s a complete Calculator App using HTML, CSS, and JavaScript that supports:
✅ All standard functions: +, −, ×, ÷, %, C, =, decimal
✅ Button click & keyboard support
✅ Clean design and full event handling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Calculator</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="inputValue('%')">%</button>
<button onclick="inputValue('/')">÷</button>
<button onclick="deleteLast()">⌫</button>
<button onclick="inputValue('7')">7</button>
<button onclick="inputValue('8')">8</button>
<button onclick="inputValue('9')">9</button>
<button onclick="inputValue('*')">×</button>
<button onclick="inputValue('4')">4</button>
<button onclick="inputValue('5')">5</button>
<button onclick="inputValue('6')">6</button>
<button onclick="inputValue('-')">−</button>
<button onclick="inputValue('1')">1</button>
<button onclick="inputValue('2')">2</button>
<button onclick="inputValue('3')">3</button>
<button onclick="inputValue('+')">+</button>
<button onclick="inputValue('0')">0</button>
<button onclick="inputValue('.')">.</button>
<button onclick="calculate()" class="equal">=</button>
</div>
</div>
<script src="[Link]"></script>
</body>
</html>
[Link]
css
CopyEdit
body {
background: #f4f4f4;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
background: #222;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
#display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
margin-bottom: 15px;
padding: 10px;
border: none;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 70px);
gap: 10px;
}
button {
padding: 20px;
font-size: 20px;
border: none;
border-radius: 8px;
cursor: pointer;
background: #444;
color: white;
transition: background 0.3s;
}
button:hover {
background: #666;
}
.equal {
grid-column: span 2;
background-color: #28a745;
}
.equal:hover {
background-color: #218838;
}
🧠 [Link]
javascript
CopyEdit
const display = [Link]("display");
// Handle button input
function inputValue(val) {
[Link] += val;
}
// Evaluate expression
function calculate() {
try {
[Link] = eval([Link]);
} catch (error) {
[Link] = "Error";
}
}
// Clear screen
function clearDisplay() {
[Link] = "";
}
// Delete last character
function deleteLast() {
[Link] = [Link](0, -1);
}
// Optional: Keyboard support
[Link]("keydown", function (e) {
const allowed = "0123456789+-*/%.";
if ([Link]([Link])) {
inputValue([Link]);
} else if ([Link] === "Enter") {
calculate();
} else if ([Link] === "Backspace") {
deleteLast();
} else if ([Link] === "Escape") {
clearDisplay();
}
});
✅ How to Use:
1. Create 3 files in a folder:
o [Link]
o [Link]
o [Link]
2. Copy/paste the code above
3. Open [Link] in your browser
Would you like me to:
Package this as a .zip folder ready for GitHub Pages?
Help add themes, history, or scientific functions?
Let me know!
You said:
yes
ChatGPT said:
Your Calculator App project is ready! 🎉
📦 Download the Project ZIP:
👉 Click here to download [Link]
🚀 How to Deploy on GitHub Pages:
1. Extract the ZIP file on your computer.
2. Go to [Link] and create a new public repository (e.g. calculator-app).
3. Upload all files from the extracted folder ([Link], [Link], [Link], etc.).
4. Go to Settings → Pages.
5. Under Source, select:
o Branch: main
o Folder: / (root)
6. Click Save – your app will go live shortly!
You’ll find the URL as:
arduino
CopyEdit
[Link]