XOR Calculator Tool

Number 1:

Number 2:

Result

body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; margin: 0; padding: 0; } .container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #FF5733; } .form-container, .result-container { margin-bottom: 20px; } .input-group { margin: 10px 0; } label { display: block; font-weight: bold; margin-bottom: 5px; } input { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 10px 20px; font-size: 16px; background-color: #FF5733; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; } button:hover { background-color: #E64A19; } .result-container h2 { margin-top: 20px; } textarea[readonly] { width: 100%; height: 150px; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; background-color: #e0e0e0; cursor: not-allowed; } function calculateXOR() { const num1 = parseInt(document.getElementById('num1').value); const num2 = parseInt(document.getElementById('num2').value); const result = num1 ^ num2; document.getElementById('resultOutput').value = result; }

Explanation

1. HTML:

   • Contains input fields for two numbers.
   • Includes a button to trigger the XOR calculation.
   • Displays the result in a textarea.

2. CSS:

   • Styles the input fields, button, and overall layout for a colorful and responsive design.

3. JavaScript:

   • The calculateXOR function retrieves the input values, performs the XOR operation, and displays the result in the output textarea.

This code provides a complete, responsive, and colorful XOR Calculator Tool. You can further customize it by adding more features or styling options as needed.