First Project: Calculator App
Here's the code without comment. If you are following along with the method, I really recommend typing it all out, at least the javascript file.
📁 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="btn" data-action="clear">C</button>
<button class="btn" data-action="delete">⌫</button>
<button class="btn" data-value="/">÷</button>
<button class="btn" data-value="*">×</button>
<button class="btn" data-value="7">7</button>
<button class="btn" data-value="8">8</button>
<button class="btn" data-value="9">9</button>
<button class="btn" data-value="-">−</button>
<button class="btn" data-value="4">4</button>
<button class="btn" data-value="5">5</button>
<button class="btn" data-value="6">6</button>
<button class="btn" data-value="+">+</button>
<button class="btn" data-value="1">1</button>
<button class="btn" data-value="2">2</button>
<button class="btn" data-value="3">3</button>
<button class="btn equal" data-action="calculate">=</button>
<button class="btn zero" data-value="0">0</button>
<button class="btn" data-value=".">.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 style.css
body {
background: #222;
color: white;
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.calculator {
background: #333;
border-radius: 12px;
box-shadow: 0 0 10px #000;
width: 260px;
padding: 15px;
}
.display {
background: #111;
padding: 15px;
font-size: 2em;
text-align: right;
border-radius: 8px;
margin-bottom: 10px;
min-height: 50px;
overflow-x: auto;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.btn {
background: #555;
border: none;
border-radius: 8px;
padding: 15px;
font-size: 1.2em;
color: white;
cursor: pointer;
transition: background 0.2s;
}
.btn:hover {
background: #777;
}
.equal {
background: #1e88e5;
}
.zero {
grid-column: span 2;
}
⚙️ script.js
const display = document.getElementById("display");
let currentInput = "";
let lastResult = "";
document.querySelectorAll(".btn").forEach((button) => {
button.addEventListener("click", () => {
const value = button.dataset.value;
const action = button.dataset.action;
if (value) {
handleValue(value);
} else if (action) {
handleAction(action);
}
});
});
function handleValue(value) {
if (display.textContent === "0" || currentInput === lastResult) {
currentInput = value;
} else {
currentInput += value;
}
updateDisplay();
}
function handleAction(action) {
switch (action) {
case "clear":
currentInput = "";
break;
case "delete":
currentInput = currentInput.slice(0, -1);
break;
case "calculate":
try {
const result = eval(currentInput);
lastResult = result;
lastResult = String(result);
currentInput = String(result);
} catch {
currentInput = "Error";
}
break;
}
updateDisplay();
}
function updateDisplay() {
display.textContent = currentInput || "0";
}