<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Máy Tính JS - 180 Phút</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calc-container">
<h2 id="title">JS Calculator</h2>
<div id="display">0</div>
<div class="grid">
<!-- Nút Clear dùng onclick trực tiếp -->
<button class="clear" onclick="clearAll()">C (Clear)</button>
<button class="nut-xoa" onclick="xoaMotSo()">CE</button>
<button class="btn operator" data-val="/">/</button>
<button class="btn operator" data-val="*">*</button>
<button class="btn number" data-val="7">7</button>
<button class="btn number" data-val="8">8</button>
<button class="btn number" data-val="9">9</button>
<button class="btn operator" data-val="-">-</button>
<button class="btn number" data-val="4">4</button>
<button class="btn number" data-val="5">5</button>
<button class="btn number" data-val="6">6</button>
<button class="btn operator" data-val="+">+</button>
<button class="btn number" data-val="1">1</button>
<button class="btn number" data-val="2">2</button>
<button class="btn number" data-val="3">3</button>
<button class="btn equal" id="result-btn">=</button>
<button class="btn number" data-val="0">0</button>
<button class="btn number" data-val="3.14159265">π</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e9ecef;
}
/* Thùng chứa máy tính */
.calc-container {
width: 320px;
background-color: #2d3436;
padding: 25px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
#title {
color: #ffffff;
text-align: center;
margin-bottom: 20px;
letter-spacing: 2px;
}
/* Màn hình hiển thị */
#display {
width: 90%;
height: 70px;
background-color: #ffffff;
border-radius: 10px;
margin-bottom: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 15px;
font-size: 2rem;
font-weight: bold;
color: #2d3436;
word-break: break-all;
}
/* Hệ thống nút bấm */
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
button {
height: 60px;
border: none;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
button:active {
transform: scale(0.95);
}
/* Phân loại màu sắc nút */
.number {
background-color: #636e72;
color: white;
}
.operator {
background-color: #fdcb6e;
color: #2d3436;
}
.clear {
background-color: #ff7675;
color: white;
grid-column: span 2;
}
.equal {
background-color: #55efc4;
color: #2d3436;
grid-column: span 2;
}
button:hover {
filter: brightness(1.2);
}
// TRUY XUẤT PHẦN TỬ (DOM)
const display = document.getElementById("display");
const resultBtn = document.getElementById("result-btn");
const allButtons = document.querySelectorAll(".btn");
let currentInput = "";
let previousInput = "";
let operator = null;
// HÀM XÓA (Clear)
function clearAll() {
currentInput = "";
previousInput = "";
operator = null;
display.innerHTML = "0";
display.style.backgroundColor = "#ffffff";
}
// LẮNG NGHE SỰ KIỆN (EventListener + Callback)
allButtons.forEach(function(button) {
button.addEventListener("click", function() {
let val = button.getAttribute("data-val");
if (button.classList.contains("operator")) {
if (currentInput !== "") {
operator = val;
previousInput = currentInput;
currentInput = "";
}
} else {
currentInput += val;
display.innerHTML = currentInput;
}
});
});
// TÍNH TOÁN KẾT QUẢ
resultBtn.addEventListener("click", function() {
if (previousInput === "" || currentInput === "") {
alert("Thiếu số rồi bạn ơi!");
return;
}
let num1 = parseFloat(previousInput);
let num2 = parseFloat(currentInput);
let result = 0;
if (operator === "+") result = num1 + num2;
else if (operator === "-") result = num1 - num2;
else if (operator === "*") result = num1 * num2;
else if (operator === "/") result = num1 / num2;
display.innerHTML = result;
display.style.backgroundColor = "#55efc4";
currentInput = result.toString();
previousInput = "";
});
//Bấm phím 'C' thì sẽ tự động xóa
window.addEventListener("keydown", function(e) {
if (e.key.toLowerCase() === "c") {
clearAll(); // Gọi hàm xóa toàn bộ đã định nghĩa ở image_9390b8.png
}
});
//Tạo nút xóa từng số
function xoaMotSo() {
if (currentInput.length > 0) {
// Cắt bỏ đi đúng 1 ký tự ở cuối cùng của chuỗi số
currentInput = currentInput.slice(0, -1);
// Nếu sau khi xóa mà không còn số nào, thì phải hiện số 0
if (currentInput === "") {
display.innerHTML = "0";
} else {
display.innerHTML = currentInput; // Nếu vẫn còn số thì hiện số còn lại ra
}
}
}