Skip to content

Commit

Permalink
Merge pull request #3 from 1n48yg/change-matrix-size
Browse files Browse the repository at this point in the history 
Change matrix size
  • Loading branch information
@xkevin168
xkevin168 authored Feb 11, 2024
2 parents 8749d95 + 1154d10 commit a777d17
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 72 deletions.
32 changes: 11 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<html lang="en">
<head>
<meta charset="UTF-8">
Expand All @@ -7,9 +8,8 @@
<title>Matrix Multiplier</title>
</head>
<body>
<div id="inputField">
<P>The matrices are multiplied in the following order: AB</P>
<p>Matrix A</p>
<div id="MatrixASpace">
<h2>Matrix A</h2>
<div id="matrix1">
<div id="matrix1Row1">
<input type="text" id="a11" size="1">
Expand All @@ -27,11 +27,14 @@
<input type="text" id="a33" size="1">
</div>
</div>
<br>
<button id="incCol1">+ Columns</button>
<button id="decCol1">- Columns</button>
<button id="incRow1">+ Rows</button>
<button id="decRow1">- Rows</button>
<p>Matrix B</p>
</div>
<div id="MatrixBSpace">
<h2>Matrix B</h2>
<div id="matrix2">
<div id="matrix2Row1">
<input type="text" id="b11" size="1">
Expand All @@ -49,32 +52,19 @@
<input type="text" id="b33" size="1">
</div>
</div>
<br>
<button id="incCol2">+ Columns</button>
<button id="decCol2">- Columns</button>
<button id="incRow2">+ Rows</button>
<button id="decRow2">- Rows</button>
<br><br>
</div>
<div id = "outputField">
<div id = "outputSpace">
<button id="multiplyABButton">Calculate</button>
<div>Output:</div>
<h2>Output (AB):</h2>
<p id="outputMessage"></p>
<div id="outputMatrix">
<div id="outputMatrixRow1">
<input type="text" id="o11" size="1" readonly>
<input type="text" id="o12" size="1" readonly>
<input type="text" id="o13" size="1" readonly>
</div>
<div id="outputMatrixRow2">
<input type="text" id="o21" size="1" readonly>
<input type="text" id="o22" size="1" readonly>
<input type="text" id="o23" size="1" readonly>
</div>
<div id="outputMatrixRow3">
<input type="text" id="o31" size="1" readonly>
<input type="text" id="o32" size="1" readonly>
<input type="text" id="o33" size="1" readonly>
</div>

</div>
</div>
<script src="index.js"></script>
Expand Down
155 changes: 104 additions & 51 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -45,102 +68,132 @@ 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 = 'a' + i + matrix1Cols;
input.id = element_name + 1 + 1;
input.size = '1';
document.getElementById('matrix1Row' + i).appendChild(input);
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 = element_name + i + colsize;
input.size = '1';
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 <= rowNumber; i++)
{
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()
{
for (var i = 1; i <= matrix1Rows; i++)
if (matrix1Rows > 0)
{
var target = document.getElementById('a' + i + matrix1Cols);
document.getElementById('matrix1Row' + i).removeChild(target);
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--;
}


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);
}

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);
}
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--;
}
47 changes: 47 additions & 0 deletions stylesheet.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}

0 comments on commit a777d17

Please sign in to comment.