+
-
Output:
+
Output (AB):
diff --git a/index.js b/index.js
index 98b393d..b70c998 100644
--- a/index.js
+++ b/index.js
@@ -8,12 +8,35 @@ var matrix2Cols = 3;
document.getElementById("multiplyABButton").onclick = function()
{
document.getElementById("outputMessage").innerHTML = "";
+ document.getElementById("outputMatrix").innerHTML = "";
+
if (matrix1Cols != matrix2Rows)
{
document.getElementById("outputMessage").innerHTML = "Incompatible Matrix Dimensions";
return;
}
+
+ addColumn('outputMatrix', 'outputMatrixRow', 'o', 0, 0);
+
+ for (var outputCols = 2; outputCols <= matrix2Cols; outputCols++)
+ {
+ addColumn('outputMatrix', 'outputMatrixRow', 'o', outputCols, 1);
+ }
+
+ for (var outputRows = 2; outputRows <= matrix1Rows; outputRows++)
+ {
+ addRow('outputMatrix', 'outputMatrixRow', 'o', matrix2Cols, outputRows);
+ }
+
+ for (var x = 1; x <= matrix2Cols; x++)
+ {
+ for (var y = 1; y <= matrix1Rows; y++)
+ {
+ document.getElementById('o' + x + y).readOnly = true;
+ }
+ }
+
var o;
//we don't use 0, for better readability
var a = new Array(matrix1Cols+1);
@@ -45,55 +68,105 @@ document.getElementById("multiplyABButton").onclick = function()
}
}
-document.getElementById("incRow1").onclick = function()
+function addRow(matrix_name, row_name, element_name, colsize, rowNumber)
{
- matrix1Rows++;
+ if (colsize == 0 && rowNumber == 0)
+ {
+ var firstElement = document.createElement('div');
+ firstElement.id = row_name + 1;
+ var input = document.createElement('input');
+ input.type = 'text';
+ input.id = element_name + 1 + 1;
+ input.size = '1';
+ firstElement.appendChild(input);
+ firstElement.insertAdjacentText('beforeend', ` `);
+ document.getElementById(matrix_name).appendChild(firstElement);
+ return;
+ }
var newRow = document.createElement('div');
- newRow.id = 'matrix1Row' + matrix1Rows;
-
- for (var i = 1; i <= matrix1Cols; i++)
+ newRow.id = row_name + rowNumber;
+
+ for (var i = 1; i <= colsize; i++)
{
var input = document.createElement('input');
input.type = 'text';
- input.id = 'a' + matrix1Rows + i;
+ input.id = element_name + rowNumber + i;
input.size = '1';
newRow.appendChild(input);
newRow.insertAdjacentText('beforeend', ` `);
}
-
- document.getElementById('matrix1').appendChild(newRow);
+
+ document.getElementById(matrix_name).appendChild(newRow);
}
-document.getElementById("decRow1").onclick = function()
+function removeRow(matrix_name, row_name, rowNumber)
{
- var targetID = 'matrix1Row' + matrix1Rows;
+ var targetID = row_name + rowNumber;
var targetChild = document.getElementById(targetID);
- document.getElementById('matrix1').removeChild(targetChild);
- matrix1Rows--;
+ document.getElementById(matrix_name).removeChild(targetChild);
}
-document.getElementById("incCol1").onclick = function()
+function addColumn(matrix_name, row_name, element_name, colsize, rowNumber)
{
- matrix1Cols++;
- for (var i = 1; i <= matrix1Rows; i++)
+ if (colsize == 0 && rowNumber == 0)
+ {
+ var firstElement = document.createElement('div');
+ firstElement.id = row_name + 1;
+ var input = document.createElement('input');
+ input.type = 'text';
+ input.id = element_name + 1 + 1;
+ input.size = '1';
+ firstElement.appendChild(input);
+ firstElement.insertAdjacentText('beforeend', ` `);
+ document.getElementById(matrix_name).appendChild(firstElement);
+ return;
+ }
+
+ for (var i = 1; i <= rowNumber; i++)
{
var input = document.createElement('input');
input.type = 'text';
- input.id = 'a' + i + matrix1Cols;
+ input.id = element_name + i + colsize;
input.size = '1';
- document.getElementById('matrix1Row' + i).appendChild(input);
- document.getElementById('matrix1Row' + i).insertAdjacentText('beforeend', ` `);
+ document.getElementById(row_name + i).appendChild(input);
+ document.getElementById(row_name + i).insertAdjacentText('beforeend', ` `);
}
}
-document.getElementById("decCol1").onclick = function()
+function removeColumn(row_name, element_name, colsize, rowNumber)
{
- for (var i = 1; i <= matrix1Rows; i++)
+ for (var i = 1; i <= rowNumber; i++)
{
- var target = document.getElementById('a' + i + matrix1Cols);
- document.getElementById('matrix1Row' + i).removeChild(target);
+ var target = document.getElementById(element_name + i + colsize);
+ document.getElementById(row_name + i).removeChild(target);
}
+}
+
+document.getElementById("incRow1").onclick = function()
+{
+ matrix1Rows++;
+ addRow('matrix1', 'matrix1Row', 'a', matrix1Cols, matrix1Rows);
+}
+
+document.getElementById("decRow1").onclick = function()
+{
+ if (matrix1Rows > 0)
+ {
+ removeRow('matrix1', 'matrix1Row', matrix1Rows);
+ matrix1Rows--;
+ }
+}
+
+document.getElementById("incCol1").onclick = function()
+{
+ matrix1Cols++;
+ addColumn('matrix1', 'matrix1Row', 'a', matrix1Cols, matrix1Rows);
+}
+
+document.getElementById("decCol1").onclick = function()
+{
+ removeColumn('matrix1Row', 'a', matrix1Cols, matrix1Rows);
matrix1Cols--;
}
@@ -101,50 +174,26 @@ document.getElementById("decCol1").onclick = function()
document.getElementById("incRow2").onclick = function()
{
matrix2Rows++;
-
- var newRow = document.createElement('div');
- newRow.id = 'matrix2Row' + matrix2Rows;
-
- for (var i = 1; i <= matrix2Cols; i++)
- {
- var input = document.createElement('input');
- input.type = 'text';
- input.id = 'b' + matrix2Rows + i;
- input.size = '1';
- newRow.appendChild(input);
- newRow.insertAdjacentText('beforeend', ` `);
- }
-
- document.getElementById('matrix2').appendChild(newRow);
+ addRow('matrix2', 'matrix2Row', 'b', matrix2Cols, matrix2Rows);
}
document.getElementById("decRow2").onclick = function()
{
- var targetID = 'matrix2Row' + matrix2Rows;
- var targetChild = document.getElementById(targetID);
- document.getElementById('matrix2').removeChild(targetChild);
- matrix2Rows--;
+ if (matrix2Rows > 0)
+ {
+ removeRow('matrix2', 'matrix2Row', matrix2Rows);
+ matrix2Rows--;
+ }
}
document.getElementById("incCol2").onclick = function()
{
matrix2Cols++;
- for (var i = 1; i <= matrix2Rows; i++)
- {
- var input = document.createElement('input');
- input.type = 'text';
- input.id = 'b' + i + matrix2Cols;
- input.size = '1';
- document.getElementById('matrix2Row' + i).appendChild(input);
- document.getElementById('matrix2Row' + i).insertAdjacentText('beforeend', ` `);
- }
+ addColumn('matrix2', 'matrix2Row', 'b', matrix2Cols, matrix2Rows);
}
document.getElementById("decCol2").onclick = function()
{
- for (var i = 1; i <= matrix2Rows; i++) {
- var target = document.getElementById('b' + i + matrix2Cols);
- document.getElementById('matrix2Row' + i).removeChild(target);
- }
+ removeColumn('matrix2Row', 'b', matrix2Cols, matrix2Rows);
matrix2Cols--;
}
\ No newline at end of file
diff --git a/stylesheet.css b/stylesheet.css
index e69de29..897f3f9 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -0,0 +1,47 @@
+#MatrixASpace {
+ margin-left: 20%;
+}
+
+#outputSpace {
+ margin-left: 20%;
+}
+
+input {
+ font-family: "Lucida Console", "Courier New", monospace;
+ width: 30px;
+ height: 20px;
+ transition: 2s;
+}
+
+input:focus {
+ background-color: rgba(255, 255, 0, 0.5);
+}
+
+body {
+ display: grid;
+ grid-template-columns: 50% 50%;
+ grid-template-rows: 350px 300px;
+}
+
+h2 {
+ font-size: 2rem;
+ font-family: "Lucida Console", "Courier New", monospace;
+}
+
+button {
+ position: relative;
+ padding: 4px 8px;
+ font-size: 0.9rem;
+ font-family: "Lucida Console", "Courier New", monospace;
+ color: rgba(0, 0, 0, 0.9);
+ border: 2px solid rgba(0, 0, 0, 0.5);
+ border-radius: 4px;
+ letter-spacing: 0.1rem;
+ transition: 0.5s;
+}
+
+button:hover {
+ color: rgb(255,255,255);
+ background-color:rgb(143, 143, 143);
+ border: 2px solid rgba(255, 255, 255, 1);
+}
\ No newline at end of file