Hướng dẫn tạo Love Compatibility Calculator bằng HTML, CSS và JavaScript

Love Compatibility Calculator là gì?

Love Compatibility Calculator là một công cụ nhỏ cho phép người dùng nhập tên của hai người, sau đó trả về một con số phần trăm thể hiện mức độ “tương hợp” giữa hai cái tên. Trong bối cảnh lập trình, đây không phải là công cụ dự đoán tình cảm mà là một ví dụ thực hành về xử lý chuỗi, xây dựng thuật toán đơn giản và cập nhật giao diện theo kết quả tính toán.

Phiên bản trong bài viết này sử dụng một công thức được thiết kế dựa trên những yếu tố dễ hiểu như:

• Độ dài tên của hai người có tương đương hay không.
• Số lượng chữ cái xuất hiện trong cả hai tên.
• Cách chuẩn hóa tên (bỏ khoảng trắng, chuyển về chữ thường) để xử lý thống nhất.

Kết quả trả về mang tính tham khảo và giải trí, không phản ánh bất kỳ yếu tố tâm linh, chiêm tinh hay khoa học nào.

Nguyên tắc tính điểm trong Love Compatibility Calculator

Để Love Compatibility Calculator hoạt động minh bạch, cần xây dựng một công thức tính điểm rõ ràng. Ví dụ dưới đây mô tả một cách tiếp cận đơn giản nhưng có logic:

1. Chuẩn hóa hai tên: loại bỏ khoảng trắng ở đầu cuối, bỏ dấu cách, chuyển toàn bộ về chữ thường.
2. Nếu một trong hai bên bỏ trống, không tiến hành tính điểm.
3. Tính độ chênh lệch độ dài tên và chuyển thành một điểm số từ 0 đến 1 (độ dài càng gần nhau, điểm càng cao).
4. Tính số lượng chữ cái xuất hiện ở cả hai tên và chuyển thành một điểm số từ 0 đến 1 (có nhiều chữ cái trùng nhau hơn thì điểm cao hơn).
5. Kết hợp hai điểm trên theo một tỉ lệ nhất định (ví dụ 40 phần trăm cho độ dài, 60 phần trăm cho số chữ cái chung) để ra điểm cuối cùng từ 0 đến 100.

Bằng cách này, người dùng có thể hiểu được vì sao công cụ trả về một con số cụ thể, thay vì phụ thuộc vào một “hộp đen” không rõ quy tắc.

Cấu trúc HTML cơ bản của Love Compatibility Calculator

Love Compatibility Calculator cần một vài thành phần giao diện nhỏ:

• Hai ô nhập tên.
• Một nút bấm để tiến hành tính toán.
• Một khu vực hiển thị kết quả phần trăm và lời bình.

Ví dụ cấu trúc HTML tối giản:

<div class="love-calculator">
    <h2>Love Compatibility Calculator</h2>

    <label for="love-name-1">Tên người thứ nhất</label>
    <input id="love-name-1" type="text" placeholder="Nhập tên thứ nhất">

    <label for="love-name-2">Tên người thứ hai</label>
    <input id="love-name-2" type="text" placeholder="Nhập tên thứ hai">

    <button id="love-calc-btn" type="button">Tính mức độ tương hợp</button>

    <div id="love-result"></div>
</div>

Những phần tử này sẽ được JavaScript truy cập để lấy dữ liệu đầu vào, tính toán và cập nhật phần hiển thị kết quả.

Thiết kế CSS cơ bản cho giao diện

Một vài dòng CSS cơ bản sẽ giúp công cụ trông gọn gàng, dễ nhìn và tập trung vào nội dung chính:

.love-calculator {
    max-width: 420px;
    margin: 16px 0;
}

.love-calculator label {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
}

.love-calculator input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    margin-top: 4px;
}

.love-calculator button {
    margin-top: 12px;
    padding: 6px 14px;
    cursor: pointer;
}

#love-result {
    margin-top: 16px;
}

Phần CSS này chỉ mang tính minh họa. Trong thực tế, giao diện có thể được điều chỉnh lại để phù hợp với phong cách thiết kế của trang web hiện tại.

Thuật toán tính điểm tương hợp giữa hai tên

Đoạn JavaScript dưới đây minh họa một cách tính điểm đơn giản nhưng có giải thích rõ ràng:

1. Chuẩn hóa tên: loại bỏ khoảng trắng dư thừa, chuyển thành chữ thường, bỏ khoảng trắng bên trong để tập trung vào chữ cái.
2. Tính điểm chênh lệch độ dài: nếu hai tên có độ dài gần bằng nhau thì điểm cao, chênh lệch càng lớn thì điểm giảm.
3. Tính điểm số lượng chữ cái chung: tạo tập các chữ cái duy nhất xuất hiện trong mỗi tên, sau đó tính số phần tử chung giữa hai tập.
4. Kết hợp hai điểm với trọng số, sau đó nhân 100 và làm tròn để ra phần trăm.

Ví dụ đoạn JavaScript thực hiện các bước trên:

(function() {
    function normalizeName(name) {
        return name
            .trim()
            .toLowerCase()
            .replace(/\s+/g, "");
    }

    function getLengthScore(len1, len2) {
        var maxLen = Math.max(len1, len2);
        if (maxLen === 0) {
            return 0;
        }
        var diff = Math.abs(len1 - len2);
        var score = 1 - diff / maxLen;
        return Math.max(0, Math.min(score, 1));
    }

    function getCommonLetterScore(str1, str2) {
        var set1 = new Set(str1.split(""));
        var set2 = new Set(str2.split(""));

        var common = 0;
        set1.forEach(function(ch) {
            if (set2.has(ch)) {
                common++;
            }
        });

        var score = common / 10;
        return Math.max(0, Math.min(score, 1));
    }

    function calculateCompatibility(name1, name2) {
        var n1 = normalizeName(name1);
        var n2 = normalizeName(name2);

        if (!n1 || !n2) {
            return {
                score: null,
                message: "Vui lòng nhập đầy đủ cả hai tên để tính mức độ tương hợp."
            };
        }

        var lengthScore = getLengthScore(n1.length, n2.length);
        var commonScore = getCommonLetterScore(n1, n2);

        var finalScore = (lengthScore * 0.4 + commonScore * 0.6) * 100;
        var rounded = Math.round(finalScore);

        if (rounded < 0) rounded = 0;
        if (rounded > 100) rounded = 100;

        var message;
        if (rounded >= 80) {
            message = "Hai cái tên này có mức độ tương hợp rất cao theo mô hình tính điểm giả lập.";
        } else if (rounded >= 50) {
            message = "Hai cái tên này có mức độ tương hợp khá tốt theo mô hình tính điểm giả lập.";
        } else if (rounded >= 30) {
            message = "Hai cái tên này có mức độ tương hợp ở mức trung bình theo mô hình tính điểm giả lập.";
        } else {
            message = "Hai cái tên này có mức độ tương hợp thấp theo mô hình tính điểm giả lập.";
        }

        message += " Kết quả chỉ mang tính chất giải trí và không phản ánh thực tế.";

        return {
            score: rounded,
            message: message
        };
    }

    window.calculateLoveCompatibility = calculateCompatibility;
})();

Đoạn mã trên đóng gói hàm calculateLoveCompatibility vào phạm vi toàn cục để có thể gọi từ các phần khác trong trang. Toàn bộ logic được mô tả rõ ràng, dễ kiểm tra và có chú ý đến việc giới hạn điểm trong khoảng từ 0 đến 100.

Demo Love Compatibility Calculator

Ví dụ dưới đây là một demo hoạt động trực tiếp của Love Compatibility Calculator. Người đọc có thể nhập tên của hai người, nhấn nút Tính mức độ tương hợp và nhận được kết quả phần trăm kèm theo lời giải thích.

Kết quả được tính toán dựa trên mô hình đã nêu ở các phần trước, chỉ mang tính chất tham khảo và giải trí.

Mở rộng Love Compatibility Calculator

Sau khi hoàn thiện phiên bản cơ bản, Love Compatibility Calculator có thể được mở rộng theo nhiều hướng:

• Thêm phần giải thích chi tiết hơn về từng thành phần điểm số (độ dài, số chữ cái chung và các tham số khác).
• Hiển thị lịch sử các lần tính gần đây để người dùng so sánh kết quả.
• Thêm tùy chọn nhập ngày sinh hoặc các dữ liệu khác và mở rộng mô hình tính điểm theo hướng tham khảo.
• Tùy chỉnh giao diện với màu sắc, font chữ và hiệu ứng động để tăng trải nghiệm người dùng.

Kết luận

Love Compatibility Calculator là một ví dụ thú vị để kết hợp xử lý chuỗi, thuật toán đơn giản và cập nhật giao diện trong JavaScript.

Bằng một mô hình tính điểm minh bạch, dễ giải thích, công cụ vẫn giữ được tính giải trí mà không tạo cảm giác mơ hồ cho người dùng.

Từ ví dụ này, người học có thể tiếp tục mở rộng ý tưởng sang các công cụ tương tác khác, vừa mang tính vui vẻ, vừa là cơ hội rèn luyện kỹ năng lập trình web.