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="style.css">
</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="script.js"></script>
</body>
</html>
style.css
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;
}
🧠 script.js
javascript
CopyEdit
const display = document.getElementById("display");
// Handle button input
function inputValue(val) {
display.value += val;
}
// Evaluate expression
function calculate() {
try {
display.value = eval(display.value);
} catch (error) {
display.value = "Error";
}
}
// Clear screen
function clearDisplay() {
display.value = "";
}
// Delete last character
function deleteLast() {
display.value = display.value.slice(0, -1);
}
// Optional: Keyboard support
document.addEventListener("keydown", function (e) {
const allowed = "0123456789+-*/%.";
if (allowed.includes(e.key)) {
inputValue(e.key);
} else if (e.key === "Enter") {
calculate();
} else if (e.key === "Backspace") {
deleteLast();
} else if (e.key === "Escape") {
clearDisplay();
}
});
✅ How to Use:
1. Create 3 files in a folder:
o index.html
o style.css
o script.js
2. Copy/paste the code above
3. Open index.html 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 calculator-app.zip
🚀 How to Deploy on GitHub Pages:
1. Extract the ZIP file on your computer.
2. Go to GitHub.com and create a new public repository (e.g. calculator-app).
3. Upload all files from the extracted folder (index.html, style.css, script.js, 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
https://yourusername.github.io/calculator-app/
