.matrix-calculator-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 700px;
margin: 20px auto;
padding: 25px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.matrix-calculator-container h2, .matrix-calculator-container h3 {
color: #333;
text-align: center;
margin-bottom: 15px;
}
.matrix-calculator-container p {
text-align: justify;
line-height: 1.6;
margin-bottom: 20px;
color: #555;
}
.matrix-input-group {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
margin-bottom: 25px;
}
.matrix-input-block, .scalar-input-block {
background-color: #fff;
padding: 15px;
border: 1px solid #eee;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
flex: 1;
min-width: 180px;
text-align: center;
}
.matrix-input-block h3, .scalar-input-block h3 {
margin-top: 0;
font-size: 1.1em;
color: #444;
}
.matrix-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 10px;
justify-items: center;
}
.matrix-grid input[type="number"] {
width: 60px;
padding: 8px 5px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
font-size: 1em;
-moz-appearance: textfield; /* Firefox */
}
.matrix-grid input[type="number"]::-webkit-outer-spin-button,
.matrix-grid input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.scalar-input-block input[type="number"] {
width: 80px;
padding: 8px 5px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
font-size: 1em;
margin-top: 10px;
-moz-appearance: textfield; /* Firefox */
}
.matrix-buttons {
text-align: center;
margin-bottom: 30px;
}
.matrix-buttons button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s ease;
}
.matrix-buttons button:hover {
background-color: #0056b3;
}
.matrix-result-section {
background-color: #e9f7ef;
padding: 20px;
border-radius: 8px;
border: 1px solid #d4edda;
text-align: center;
}
.matrix-result-section h3 {
color: #28a745;
margin-bottom: 15px;
}
.result-grid {
background-color: #fff;
border: 1px solid #c3e6cb;
padding: 15px;
border-radius: 5px;
max-width: 180px;
margin: 0 auto;
}
.matrix-cell {
padding: 8px;
font-size: 1.1em;
font-weight: bold;
color: #333;
border: 1px solid #eee;
background-color: #f8f9fa;
border-radius: 3px;
}
#errorMessage {
margin-top: 15px;
font-weight: bold;
}
@media (max-width: 600px) {
.matrix-input-group {
flex-direction: column;
align-items: center;
}
.matrix-input-block, .scalar-input-block {
width: 90%;
min-width: unset;
}
.matrix-buttons button {
width: 90%;
margin: 5px auto;
display: block;
}
}
function getMatrixValues(prefix) {
var r1c1 = parseFloat(document.getElementById(prefix + '_r1c1').value);
var r1c2 = parseFloat(document.getElementById(prefix + '_r1c2').value);
var r2c1 = parseFloat(document.getElementById(prefix + '_r2c1').value);
var r2c2 = parseFloat(document.getElementById(prefix + '_r2c2').value);
// Handle NaN values by treating them as 0
r1c1 = isNaN(r1c1) ? 0 : r1c1;
r1c2 = isNaN(r1c2) ? 0 : r1c2;
r2c1 = isNaN(r2c1) ? 0 : r2c1;
r2c2 = isNaN(r2c2) ? 0 : r2c2;
return [[r1c1, r1c2], [r2c1, r2c2]];
}
function displayMatrix(matrix) {
document.getElementById('result_r1c1').innerText = matrix[0][0].toFixed(2);
document.getElementById('result_r1c2').innerText = matrix[0][1].toFixed(2);
document.getElementById('result_r2c1').innerText = matrix[1][0].toFixed(2);
document.getElementById('result_r2c2').innerText = matrix[1][1].toFixed(2);
}
function addMatrices(matrixA, matrixB) {
var result = [];
for (var i = 0; i < 2; i++) {
result[i] = [];
for (var j = 0; j < 2; j++) {
result[i][j] = matrixA[i][j] + matrixB[i][j];
}
}
return result;
}
function subtractMatrices(matrixA, matrixB) {
var result = [];
for (var i = 0; i < 2; i++) {
result[i] = [];
for (var j = 0; j < 2; j++) {
result[i][j] = matrixA[i][j] – matrixB[i][j];
}
}
return result;
}
function scalarMultiply(matrix, scalar) {
var result = [];
for (var i = 0; i < 2; i++) {
result[i] = [];
for (var j = 0; j < 2; j++) {
result[i][j] = matrix[i][j] * scalar;
}
}
return result;
}
function calculateMatrixOperation(operationType) {
document.getElementById('errorMessage').innerText = ''; // Clear previous errors
var matrixA = getMatrixValues('matrixA');
var matrixB = getMatrixValues('matrixB');
var scalar = parseFloat(document.getElementById('scalarValue').value);
if (isNaN(scalar)) {
scalar = 0; // Default scalar to 0 if invalid
document.getElementById('errorMessage').innerText = 'Warning: Scalar value was invalid and treated as 0.';
}
var resultMatrix;
switch (operationType) {
case 'add':
resultMatrix = addMatrices(matrixA, matrixB);
break;
case 'subtract':
resultMatrix = subtractMatrices(matrixA, matrixB);
break;
case 'scalarA':
resultMatrix = scalarMultiply(matrixA, scalar);
break;
case 'scalarB':
resultMatrix = scalarMultiply(matrixB, scalar);
break;
default:
document.getElementById('errorMessage').innerText = 'Invalid operation selected.';
return;
}
displayMatrix(resultMatrix);
}
// Initialize with a default calculation on load
document.addEventListener('DOMContentLoaded', function() {
calculateMatrixOperation('add');
});
Understanding 2×2 Matrix Operations
Matrices are fundamental mathematical objects used across various fields, including physics, engineering, computer graphics, and economics. They are essentially rectangular arrays of numbers, symbols, or expressions arranged in rows and columns. A 2×2 matrix, as the name suggests, is a matrix with two rows and two columns.
What is a 2×2 Matrix?
A 2×2 matrix typically looks like this:
[ a b ]
[ c d ]
Where 'a', 'b', 'c', and 'd' are the elements of the matrix. Each element has a specific position defined by its row and column number.
Matrix Addition
Adding two matrices is a straightforward operation, but it can only be performed if both matrices have the same dimensions (e.g., both are 2×2). To add two matrices, you simply add their corresponding elements. If you have Matrix A and Matrix B:
A = [ a b ] B = [ e f ]
[ c d ] [ g h ]
Then, their sum A + B is:
A + B = [ a+e b+f ]
[ c+g d+h ]
Example: If Matrix A = [[1, 2], [3, 4]] and Matrix B = [[5, 6], [7, 8]], then A + B = [[1+5, 2+6], [3+7, 4+8]] = [[6, 8], [10, 12]].
Matrix Subtraction
Similar to addition, matrix subtraction also requires matrices of the same dimensions. To subtract one matrix from another, you subtract their corresponding elements. For Matrix A and Matrix B as defined above:
A – B = [ a-e b-f ]
[ c-g d-h ]
Example: If Matrix A = [[1, 2], [3, 4]] and Matrix B = [[5, 6], [7, 8]], then A – B = [[1-5, 2-6], [3-7, 4-8]] = [[-4, -4], [-4, -4]].
Scalar Multiplication
Scalar multiplication involves multiplying a matrix by a single number (a scalar). This operation is performed by multiplying every element of the matrix by that scalar value. If 'k' is a scalar and A is a matrix:
k * A = [ k*a k*b ]
[ k*c k*d ]
Example: If Matrix A = [[1, 2], [3, 4]] and the scalar k = 2, then 2 * A = [[2*1, 2*2], [2*3, 2*4]] = [[2, 4], [6, 8]].
How to Use the Calculator
- Enter Matrix A Values: Input the four numerical values for the elements of your first 2×2 matrix.
- Enter Matrix B Values: Input the four numerical values for the elements of your second 2×2 matrix.
- Enter Scalar Value: Input a single numerical value for scalar multiplication.
- Select Operation: Click one of the buttons to perform addition (A + B), subtraction (A – B), scalar multiplication of Matrix A, or scalar multiplication of Matrix B.
- View Result: The resulting 2×2 matrix will be displayed in the "Resulting Matrix" section.
This calculator simplifies common matrix operations, making it easier to understand and verify calculations for 2×2 matrices.