AND Calculator Tool
/* Reset some default browser styles */
body, html {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #ff6b6b, #f8e8a1);
}
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.title {
color: #333;
font-size: 2rem;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
font-size: 1rem;
color: #333;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
transition: border-color 0.3s;
}
input:focus {
border-color: #007BFF;
}
.submit-button {
width: 100%;
padding: 10px;
font-size: 1rem;
color: #fff;
background: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
padding: 15px;
border-radius: 5px;
background: rgba(0, 123, 255, 0.1);
color: #007BFF;
text-align: center;
}
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('and-form');
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const resultDiv = document.getElementById('result');
form.addEventListener('submit', function (e) {
e.preventDefault();
const value1 = parseInt(input1.value, 10);
const value2 = parseInt(input2.value, 10);
if (!isNaN(value1) && !isNaN(value2)) {
const andResult = value1 & value2; // AND operation
resultDiv.innerText = `Result: ${andResult}`;
} else {
resultDiv.innerText = 'Please enter valid numbers.';
}
});
});
