.calculator-container {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
.input-section, .result-section {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #eee;
border-radius: 5px;
background-color: #fff;
}
.input-section label {
margin-right: 5px;
font-weight: bold;
}
.input-section input[type="number"] {
width: 60px;
padding: 5px;
margin-right: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}
.matrix-input-container {
display: flex;
justify-content: space-around;
margin-top: 20px;
flex-wrap: wrap;
}
.matrix-box {
flex: 1;
min-width: 300px;
margin: 10px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
}
.matrix-box h3 {
margin-top: 0;
text-align: center;
}
.matrix-grid {
display: grid;
gap: 5px;
margin-top: 10px;
}
.matrix-grid input {
width: 50px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
}
.matrix-cell {
padding: 8px;
border: 1px solid #eee;
text-align: center;
background-color: #f0f0f0;
border-radius: 4px;
}
#resultMatrix {
margin-top: 15px;
border: 1px solid #ccc;
padding: 10px;
background-color: #e9ecef;
border-radius: 5px;
}
function clearResults() {
document.getElementById("errorMessage").innerHTML = "";
document.getElementById("matrixAInputs").innerHTML = "";
document.getElementById("matrixBInputs").innerHTML = "";
document.getElementById("resultMatrix").innerHTML = "";
}
function generateMatrixInputs() {
clearResults();
var matrixARows = parseInt(document.getElementById("matrixARows").value);
var matrixACols = parseInt(document.getElementById("matrixACols").value);
var matrixBRows = parseInt(document.getElementById("matrixBRows").value);
var matrixBCols = parseInt(document.getElementById("matrixBCols").value);
var errorMessage = document.getElementById("errorMessage");
errorMessage.innerHTML = "";
if (isNaN(matrixARows) || isNaN(matrixACols) || isNaN(matrixBRows) || isNaN(matrixBCols) ||
matrixARows <= 0 || matrixACols <= 0 || matrixBRows <= 0 || matrixBCols <= 0) {
errorMessage.innerHTML = "Please enter valid positive integer dimensions for all matrices.";
return;
}
if (matrixACols !== matrixBRows) {
errorMessage.innerHTML = "Error: For matrix multiplication (A x B), the number of columns in Matrix A must equal the number of rows in Matrix B.";
return;
}
var matrixAInputsDiv = document.getElementById("matrixAInputs");
var matrixBInputsDiv = document.getElementById("matrixBInputs");
matrixAInputsDiv.innerHTML = "";
matrixBInputsDiv.innerHTML = "";
matrixAInputsDiv.style.gridTemplateColumns = "repeat(" + matrixACols + ", auto)";
matrixBInputsDiv.style.gridTemplateColumns = "repeat(" + matrixBCols + ", auto)";
for (var i = 0; i < matrixARows; i++) {
for (var j = 0; j < matrixACols; j++) {
var input = document.createElement("input");
input.type = "number";
input.id = "matrixA_" + i + "_" + j;
input.value = "0";
matrixAInputsDiv.appendChild(input);
}
}
for (var i = 0; i < matrixBRows; i++) {
for (var j = 0; j < matrixBCols; j++) {
var input = document.createElement("input");
input.type = "number";
input.id = "matrixB_" + i + "_" + j;
input.value = "0";
matrixBInputsDiv.appendChild(input);
}
}
}
function calculateMatrixMultiplication() {
var errorMessage = document.getElementById("errorMessage");
errorMessage.innerHTML = "";
document.getElementById("resultMatrix").innerHTML = "";
var matrixARows = parseInt(document.getElementById("matrixARows").value);
var matrixACols = parseInt(document.getElementById("matrixACols").value);
var matrixBRows = parseInt(document.getElementById("matrixBRows").value);
var matrixBCols = parseInt(document.getElementById("matrixBCols").value);
if (isNaN(matrixARows) || isNaN(matrixACols) || isNaN(matrixBRows) || isNaN(matrixBCols) ||
matrixARows <= 0 || matrixACols <= 0 || matrixBRows <= 0 || matrixBCols <= 0) {
errorMessage.innerHTML = "Please generate matrix input fields first with valid dimensions.";
return;
}
if (matrixACols !== matrixBRows) {
errorMessage.innerHTML = "Error: Matrix A columns must equal Matrix B rows for multiplication.";
return;
}
var matrixA = [];
var matrixB = [];
for (var i = 0; i < matrixARows; i++) {
matrixA[i] = [];
for (var j = 0; j < matrixACols; j++) {
var inputElement = document.getElementById("matrixA_" + i + "_" + j);
if (!inputElement) {
errorMessage.innerHTML = "Matrix A input fields not generated or missing. Click 'Generate Matrix Input Fields'.";
return;
}
var value = parseFloat(inputElement.value);
if (isNaN(value)) {
errorMessage.innerHTML = "Please enter valid numbers for all elements in Matrix A.";
return;
}
matrixA[i][j] = value;
}
}
for (var i = 0; i < matrixBRows; i++) {
matrixB[i] = [];
for (var j = 0; j < matrixBCols; j++) {
var inputElement = document.getElementById("matrixB_" + i + "_" + j);
if (!inputElement) {
errorMessage.innerHTML = "Matrix B input fields not generated or missing. Click 'Generate Matrix Input Fields'.";
return;
}
var value = parseFloat(inputElement.value);
if (isNaN(value)) {
errorMessage.innerHTML = "Please enter valid numbers for all elements in Matrix B.";
return;
}
matrixB[i][j] = value;
}
}
var resultMatrix = [];
for (var i = 0; i < matrixARows; i++) {
resultMatrix[i] = [];
for (var j = 0; j < matrixBCols; j++) {
var sum = 0;
for (var k = 0; k < matrixACols; k++) {
sum += matrixA[i][k] * matrixB[k][j];
}
resultMatrix[i][j] = sum;
}
}
var resultMatrixDiv = document.getElementById("resultMatrix");
resultMatrixDiv.innerHTML = "";
resultMatrixDiv.style.gridTemplateColumns = "repeat(" + matrixBCols + ", auto)";
for (var i = 0; i < matrixARows; i++) {
for (var j = 0; j < matrixBCols; j++) {
var cell = document.createElement("div");
cell.className = "matrix-cell";
cell.textContent = resultMatrix[i][j].toFixed(4);
resultMatrixDiv.appendChild(cell);
}
}
}
window.onload = function() {
generateMatrixInputs();
};
Understanding Matrix Multiplication
Matrix multiplication is a fundamental operation in linear algebra with wide-ranging applications in mathematics, physics, engineering, computer graphics, and data science. Unlike scalar multiplication (where you multiply each element by a single number), matrix multiplication involves a more complex process that combines rows from the first matrix with columns from the second matrix.
What is a Matrix?
A matrix is a rectangular array of numbers, symbols, or expressions, arranged in rows and columns. For example, a 2×3 matrix has 2 rows and 3 columns:
A = [ a₁₁ a₁₂ a₁₃ ]
[ a₂₁ a₂₂ a₂₃ ]
Rules for Matrix Multiplication
For two matrices, A and B, to be multiplied to form a product matrix C (i.e., C = A x B), a crucial condition must be met:
- The number of columns in the first matrix (A) must be equal to the number of rows in the second matrix (B).
If Matrix A has dimensions (m x n) and Matrix B has dimensions (n x p), then the resulting Matrix C will have dimensions (m x p). The 'n' must match.
If the dimensions do not match this rule, matrix multiplication is undefined.
How to Multiply Matrices
Let's say Matrix A is an (m x n) matrix and Matrix B is an (n x p) matrix. The element in the i-th row and j-th column of the product matrix C, denoted as Cij, is calculated by taking the dot product of the i-th row of A and the j-th column of B.
The formula for each element Cij is:
Cij = Σ (Aik * Bkj) for k = 0 to n-1
In simpler terms, to find Cij:
- Take the i-th row of Matrix A.
- Take the j-th column of Matrix B.
- Multiply the first element of the row by the first element of the column, the second by the second, and so on.
- Sum up all these products.
Example Calculation
Let's multiply Matrix A (2×2) by Matrix B (2×2):
A = [ 1 2 ] B = [ 5 6 ]
[ 3 4 ] [ 7 8 ]
Here, Matrix A has 2 columns, and Matrix B has 2 rows, so multiplication is possible. The resulting matrix C will be 2×2.
Calculate C11 (first row, first column of C):
- (1 * 5) + (2 * 7) = 5 + 14 = 19
Calculate C12 (first row, second column of C):
- (1 * 6) + (2 * 8) = 6 + 16 = 22
Calculate C21 (second row, first column of C):
- (3 * 5) + (4 * 7) = 15 + 28 = 43
Calculate C22 (second row, second column of C):
- (3 * 6) + (4 * 8) = 18 + 32 = 50
So, the product matrix C is:
C = [ 19 22 ]
[ 43 50 ]
Applications of Matrix Multiplication
Matrix multiplication is not just a theoretical concept; it has practical applications in many fields:
- Computer Graphics: Used for transformations like rotation, scaling, and translation of 3D objects.
- Physics and Engineering: Solving systems of linear equations, quantum mechanics, structural analysis.
- Data Science and Machine Learning: Core operation in neural networks, principal component analysis (PCA), and various algorithms.
- Economics: Modeling economic systems and input-output analysis.
- Cryptography: Encoding and decoding messages.
This calculator simplifies the process of multiplying matrices, allowing you to quickly verify results or explore different matrix combinations without manual calculation.