<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Tách Họ & Tên</h2>
<input type="text" id="fullName" placeholder="Nhập họ và tên (VD: Trần Công Tuấn)" onkeyup="if(event.keyCode === 13) handleSplit()">
<button onclick="handleSplit()">Tách ngay</button>
<div id="resultBox" class="result">
<p><span class="label">Họ:</span> <span id="displayHo" class="value"></span></p>
<p><span class="label">Tên:</span> <span id="displayTen" class="value"></span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
padding-top: 50px;
background-color: #f4f7f6;
}
.container {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
}
h2 { text-align: center; color: #333; }
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover { background-color: #218838; }
.result {
margin-top: 20px;
padding: 15px;
background-color: #e9ecef;
border-radius: 4px;
display: none; /* Ẩn khi chưa có kết quả */
}
.result p { margin: 5px 0; font-size: 1.1rem; }
.label { font-weight: bold; color: #555; }
.value { color: #d9534f; font-weight: bold; }
function handleSplit() {
const fullName = document.getElementById('fullName').value.trim();
const resultBox = document.getElementById('resultBox');
const displayHo = document.getElementById('displayHo');
const displayTen = document.getElementById('displayTen');
if (!fullName) {
alert("Vui lòng nhập tên!");
return;
}
// Logic tách tên
const parts = fullName.split(/\s+/);
let ho = "";
let ten = "";
if (parts.length <= 1) {
ten = fullName;
ho = "(Không có)";
} else {
ten = parts.pop(); // Lấy từ cuối cùng làm Tên
ho = parts.join(" "); // Các từ còn lại là Họ
}
// Hiển thị kết quả lên giao diện
displayHo.innerText = ho;
displayTen.innerText = ten;
resultBox.style.display = "block";
}