I want the MATRIX A and MATRIX B is in the same line and center the function i dont know what is wrong in my CSS - Html

DenZ
March 13, 2023
238 views
0 votes
2 Answers

here is the HTML CODE: I want the output to be in the same size and a line of MATRIX A and the function to be in the middle. And can I make this in a single file like HTML+CSS+JAVASCRIPT in one HTML file?

class MatrixCalculator {
    constructor() {
        this.matrixA = [];
        this.matrixB = [];
        for(var i=0; i<3; i++) {
            this.matrixA[i] = [];
            this.matrixB[i] = [];
        }
        
        this.AxDimension = 3;
        this.AyDimension = 3;
        this.BxDimension = 3;
        this.ByDimension = 3;
    }
    
    calculateRank() {
        this.rebuildMatrix();
        
        var rank = this.AxDimension;
        var row = this.AyDimension;
        var mat = this.matrixA;
        
        for (row = 0; row < rank; row++) { 
            if (mat[row][row]) { 
               for (var col = 0; col < this.AyDimension; col++) { 
                   if (col != row) { 
                     var mult = Math.round(mat[col][row] / mat[row][row]*100)/100; 
                     for (var i = 0; i < rank; i++) 
                       mat[col][i] -= mult * mat[row][i]; 
                  } 
               } 
            } 
            else
            { 
                var reduce = true; 
                for (var i = row + 1; i < this.AyDimension;  i++) 
                { 
                    if (mat[i][row]) 
                    { 
                        var aux = mat[row];
                        mat[row] = math[i];
                        math[i] = aux;
                        reduce = false; 
                        break; 
                    } 
                } 
                if (reduce) 
                { 
                    rank--; 
                    for (i = 0; i < this.AyDimension; i++) 
                        mat[i][row] = mat[i][rank]; 
                } 
                row--; 
            } 
        } 
        this.printOnConsole("Matrix rank is: "+rank);       
    }
    
    invertMatrix() {        
        this.calculateDeterminant();
        if (this.determinantA==null)
            return; //Error will already be printed out by calculateDeterminant method.
        if(this.determinantA==0) {
            this.printOnConsole("Matrix is non-invertible.");
            return;
        }
        var adjacent = [];
        var result = [];
        var aux = [];
        for(var i=0; i<3; i++) {
            adjacent[i] = [];
            result[i] = [];
            aux[i]=[];
        }
        //Calculating adjacency matrix
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                if (this.AxDimension == 1)
                    adjacent[i][j] = 1+"/"+this.matrixA[i][j];
                if (this.AxDimension==2) {
                    adjacent[j][i] = ((-1)**(i+1+j+1))*this.matrixA[i][j];
                }
                if (this.AxDimension==3) { 
                    //Reconstructing 2 dimension sub matrix
                    var count1 = 0;
                    var count2 = 0;
                    for (var k=0; k<3; k++) {
                        for (var l=0; l<3; l++) {
                            if (l!=j && k!=i) {
                                aux[count1][count2]=this.matrixA[k][l];
                                count2++;
                            }
                        }
                        count2 = 0;
                        if (k!=i)
                            count1++;
                    }
                    adjacent[i][j] = ((-1)**(i+1+j+1))*(aux[0][0]*aux[1][1]-aux[0][1]*aux[1][0]);
                }
            }
        }
        //Transposing it
        for (var i =0; i<this.AxDimension; i++) {
            for (var j=0; j<this.AyDimension; j++) {
                result[i][j]=adjacent[j][i];
            }
        }
        if (this.AxDimension==2) {
            var temp = result[0][0];
            result[0][0] = result[1][1];
            result[1][1] = temp;
        }
        
        //We divide by the determinant
        if (this.AxDimension!=1) {
            for (var i =0; i<this.AxDimension; i++) {
                for (var j=0; j<this.AyDimension; j++) {
                    result[i][j]=Math.round(result[i][j]/this.determinantA*100)/100;
                }
            }
        }
        
        var string = "Inverse matrix:r";
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                string=string+"t"+result[i][j];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
        
    }
    
    transposeMatrix() {
        this.rebuildMatrix();
        var string = "Transposition result:r";
        for (var i =0; i<this.AxDimension; i++) {
            for (var j=0; j<this.AyDimension; j++) {
                string=string+"t"+this.matrixA[j][i];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
    }
    
    subtractMatrix() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.AyDimension) {
            this.printOnConsole("Matrices have different dimmensions.");
            return;
        }
        var result = [];
        for(var i=0; i<3; i++) 
            result[i]=[];
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                result[i][j]=Math.round((parseFloat(this.matrixA[i][j])-parseFloat(this.matrixB[i][j]))*100)/100;
            }
        }
        var string = "Subtraction result:r";
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                string=string+"t"+result[i][j];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
    }
    
    addMatrix() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.AyDimension) {
            this.printOnConsole("Matrices have different dimmensions.");
            return;
        }
        var result = [];
        for(var i=0; i<3; i++) 
            result[i]=[];
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                //Parsing is necessary here since addition operator can also concatenate strings
                result[i][j]=Math.round((parseFloat(this.matrixA[i][j])+parseFloat(this.matrixB[i][j]))*100)/100;
            }
        }
        var string = "Addition result:r";
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                string=string+"t"+result[i][j];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
    }
    
    multiplyMatrix() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.ByDimension) {
            this.printOnConsole("Number of columns on A is different from number of rows on B.");
            return;
        }
        var result = [];
        for(var i=0; i<3; i++) 
            result[i]=[];
        i=0;
        var j=0;
        //x refers to columns, y refers to rows
        var rowsRes = this.AyDimension;
        var columnsRes = this.BxDimension;
        
        for (i=0; i<rowsRes; i++) {
            for (j=0; j<columnsRes; j++) {
                result[i][j] = this.matrixA[i][0]*this.matrixB[0][j]+this.matrixA[i][1]*this.matrixB[1][j]+this.matrixA[i][2]*this.matrixB[2][j];
                result[i][j] = Math.round(result[i][j]*100)/100;
            }
        }
        var string = "Multiplication result:r";
        for (i=0; i<rowsRes; i++) {
            for (j=0; j<columnsRes; j++) {
                string=string+"t"+result[i][j];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
    }
    
    calculateDeterminant() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.AyDimension) {
            this.determinantA=null;
            this.printOnConsole("Non-square matrix, determinant cannot be calculated.");
            return;
        }
        var determinant;
        if (this.AxDimension==1) {
            determinant = this.matrixA[0][0];
        }
        if (this.AxDimension==2) {
            determinant = (this.matrixA[0][0]*this.matrixA[1][1])-(this.matrixA[0][1]*this.matrixA[1][0]);
        }
        if (this.AxDimension==3) {
            var op1, op2, op3, r1, r2, r3;
            op1 = this.matrixA[0][0]*this.matrixA[1][1]*this.matrixA[2][2];
            op2 = this.matrixA[0][1]*this.matrixA[1][2]*this.matrixA[2][0];
            op3 = this.matrixA[0][2]*this.matrixA[1][0]*this.matrixA[2][1];
            r1 = this.matrixA[0][2]*this.matrixA[1][1]*this.matrixA[2][0];
            r2 = this.matrixA[0][0]*this.matrixA[1][2]*this.matrixA[2][1];
            r3 = this.matrixA[0][1]*this.matrixA[1][0]*this.matrixA[2][2];
            determinant = Math.round((op1+op2+op3-r1-r2-r3)*100)/100;
        }
        this.determinantA = determinant;
        this.printOnConsole("Determinant: "+determinant)
        return;
    }
    
    printOnConsole(val) {
        document.getElementById("console").value = val;
    }
    
    rebuildMatrix() {
        var row1 = document.getElementsByClassName("m1r1");
        var row2 = document.getElementsByClassName("m1r2");
        var row3 = document.getElementsByClassName("m1r3");
        for (var i=0; i<3; i++) {
            this.matrixA[0][i] = row1[i].value;
            this.matrixA[1][i] = row2[i].value;
            this.matrixA[2][i] = row3[i].value;
        }
        row1 = document.getElementsByClassName("m2r1");
        row2 = document.getElementsByClassName("m2r2");
        row3 = document.getElementsByClassName("m2r3");
        for (var i=0; i<3; i++) {
            this.matrixB[0][i] = row1[i].value;
            this.matrixB[1][i] = row2[i].value;
            this.matrixB[2][i] = row3[i].value;
        }
        this.calculateDimensions();
    }
    
    calculateDimensions() {
        //Calculating matrix A's dimensions
        this.AyDimension = 3;
        this.AxDimension = 3;
        
        var count = 2;
        //If there's a whole column of 0's, we'll decrease the dimension and look at the next one.
        while (count>=0 && this.matrixA[0][count]==0 && this.matrixA[1][count]==0 && this.matrixA[2][count]==0) {
            this.AxDimension--;
            count--;
        }
        count = 2;
        //If there's a whole row of 0's, we'll decrease the dimension and look at the next one.
        while (count>=0 && this.matrixA[count][0]==0 && this.matrixA[count][1]==0 && this.matrixA[count][2]==0) {
            this.AyDimension--;
            count--;
        }
        
        //Calculating matrix B's dimensions in the same way
        this.ByDimension = 3;
        this.BxDimension = 3;
        
        var count = 2;
        while (count>=0 && this.matrixB[0][count]==0 && this.matrixB[1][count]==0 && this.matrixB[2][count]==0) {
            this.BxDimension--;
            count--;
        }
        count = 2;
        while (count>=0 && this.matrixB[count][0]==0 && this.matrixB[count][1]==0 && this.matrixB[count][2]==0) {
            this.ByDimension--;
            count--;
        }       
    }
}

var mc = new MatrixCalculator();

header {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#upper {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: row wrap;
    width: 23em;
    background: #FAFAFA;
    align-items: center;
    justify-content: center;
}

#matrix1, #matrix2{
    order: 1;
    width: 9em;
    height: 40%;
}

#operations {
    order: 1;
    width: 5em;
    height: 40%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

.operation {
    width: 5em;
    height: 10%
}

.parent {
    display: flex;
    flex-flow: row wrap;
    width: 9em;
    background: #FAFAFA;
    align-items: center;
    justify-content: center;
}

.title {
    order: 1;
    font-family: "Times New Roman", serif;
    width: 9em;
    height: 10%;
    text-align: center;
}

.m1r1, .m2r1 {
    order: 2;
    width: 3em;
    height: 10%;
    text-align: center;
}

.m1r2, .m2r2 {
    order: 3;
    width: 3em;
    height: 10%;
    text-align: center;
}

.m1r3, .m2r3 {
    order: 4;
    width: 3em;
    height: 10%;
    text-align: center;
}

.functions {
    order: 5;
    width: 9em;
    height: 40%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

.function {
    width: 8em;
    height: 10%;
    border-radius: 2em;
}

#console {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    height: 50%;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>JSMatrix calculator</title>
    <script src="./MatrixCalculator.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <header><img src="./logo.png" alt="Page logo JSMatrix Calculator"/></header>
    <div id="upper">
        <div id="matrix1" class="parent">
            <h1 class="title">Matrix A</h1>
            <input class="m1r1" type="text" value="0"/>
            <input class="m1r1" type="text" value="0"/>
            <input class="m1r1" type="text" value="0"/>
            <input class="m1r2" type="text" value="0"/>
            <input class="m1r2" type="text" value="0"/>
            <input class="m1r2" type="text" value="0"/>
            <input class="m1r3" type="text" value="0"/>
            <input class="m1r3" type="text" value="0"/>
            <input class="m1r3" type="text" value="0"/>     
            <div class="functions">
                <input class="function" type="button" value="Determinant" onclick="mc.calculateDeterminant()"/>
                <input class="function" type="button" value="Transpose" onclick="mc.transposeMatrix()"/>
                <input class="function" type="button" value="Invert" onclick="mc.invertMatrix()"/>
                <input class="function" type="button" value="Rank" onclick="mc.calculateRank()"/>
            </div>
        </div>
        <div id="operations">
            <input class="operation" type="button" value="A x B" onclick="mc.multiplyMatrix()"/>
            <input class="operation" type="button" value="A + B" onclick="mc.addMatrix()"/>
            <input class="operation" type="button" value="A - B" onclick="mc.subtractMatrix()"/>
        </div>
        <div id="matrix2" class="parent">
            <h1 class="title">Matrix B</h1>
            <input class="m2r1" type="text" value="0"/>
            <input class="m2r1" type="text" value="0"/>
            <input class="m2r1" type="text" value="0"/>
            <input class="m2r2" type="text" value="0"/>
            <input class="m2r2" type="text" value="0"/>
            <input class="m2r2" type="text" value="0"/>
            <input class="m2r3" type="text" value="0"/>
            <input class="m2r3" type="text" value="0"/>
            <input class="m2r3" type="text" value="0"/>     
        </div>
    </div>
    <br>
    <div id="lower">
            <textarea wrap="soft" rows="10" cols="20" id="console" disabled></textarea>
    </div>
    
</body>
</html>

I want the output is in the same size and a line of MATRIX A and the function to be in the middle
And can I make this in a single file like HTML+CSS+JAVASCRIPT in one HTML file?

Answers

This seems like a good fit for a set of nested display:grid since that is what you are describing.

I added some ugly borders just to show where things are and wrapped some blocks to make logical groupings (grids) to work with.

I classes to style rather than id’s just because I think it is better form to do so.

Probably some room for code improvement and removing unused classes here like class="m1r2". I would NOT for example have put code in the HTML like onclick="mc.calculateDeterminant()" but that was not part of your question.

EDIT:

Swapped the middle groups
did some alignment in the matrix
Forgive my revision however on review I decided the <h1> was problematic for this use when considering the middle section so I changed it to <div class="title"> only given the reasons here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

class MatrixCalculator {
  constructor() {
    this.matrixA = [];
    this.matrixB = [];
    for (var i = 0; i < 3; i++) {
      this.matrixA[i] = [];
      this.matrixB[i] = [];
    }

    this.AxDimension = 3;
    this.AyDimension = 3;
    this.BxDimension = 3;
    this.ByDimension = 3;
  }

  calculateRank() {
    this.rebuildMatrix();

    var rank = this.AxDimension;
    var row = this.AyDimension;
    var mat = this.matrixA;

    for (row = 0; row < rank; row++) {
      if (mat[row][row]) {
        for (var col = 0; col < this.AyDimension; col++) {
          if (col != row) {
            var mult = Math.round(mat[col][row] / mat[row][row] * 100) / 100;
            for (var i = 0; i < rank; i++)
              mat[col][i] -= mult * mat[row][i];
          }
        }
      } else {
        var reduce = true;
        for (var i = row + 1; i < this.AyDimension; i++) {
          if (mat[i][row]) {
            var aux = mat[row];
            mat[row] = math[i];
            math[i] = aux;
            reduce = false;
            break;
          }
        }
        if (reduce) {
          rank--;
          for (i = 0; i < this.AyDimension; i++)
            mat[i][row] = mat[i][rank];
        }
        row--;
      }
    }
    this.printOnConsole("Matrix rank is: " + rank);
  }

  invertMatrix() {
    this.calculateDeterminant();
    if (this.determinantA == null)
      return; //Error will already be printed out by calculateDeterminant method.
    if (this.determinantA == 0) {
      this.printOnConsole("Matrix is non-invertible.");
      return;
    }
    var adjacent = [];
    var result = [];
    var aux = [];
    for (var i = 0; i < 3; i++) {
      adjacent[i] = [];
      result[i] = [];
      aux[i] = [];
    }
    //Calculating adjacency matrix
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        if (this.AxDimension == 1)
          adjacent[i][j] = 1 + "/" + this.matrixA[i][j];
        if (this.AxDimension == 2) {
          adjacent[j][i] = ((-1) ** (i + 1 + j + 1)) * this.matrixA[i][j];
        }
        if (this.AxDimension == 3) {
          //Reconstructing 2 dimension sub matrix
          var count1 = 0;
          var count2 = 0;
          for (var k = 0; k < 3; k++) {
            for (var l = 0; l < 3; l++) {
              if (l != j && k != i) {
                aux[count1][count2] = this.matrixA[k][l];
                count2++;
              }
            }
            count2 = 0;
            if (k != i)
              count1++;
          }
          adjacent[i][j] = ((-1) ** (i + 1 + j + 1)) * (aux[0][0] * aux[1][1] - aux[0][1] * aux[1][0]);
        }
      }
    }
    //Transposing it
    for (var i = 0; i < this.AxDimension; i++) {
      for (var j = 0; j < this.AyDimension; j++) {
        result[i][j] = adjacent[j][i];
      }
    }
    if (this.AxDimension == 2) {
      var temp = result[0][0];
      result[0][0] = result[1][1];
      result[1][1] = temp;
    }

    //We divide by the determinant
    if (this.AxDimension != 1) {
      for (var i = 0; i < this.AxDimension; i++) {
        for (var j = 0; j < this.AyDimension; j++) {
          result[i][j] = Math.round(result[i][j] / this.determinantA * 100) / 100;
        }
      }
    }

    var string = "Inverse matrix:r";
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        string = string + "t" + result[i][j];
      }
      string = string + "r";
    }
    this.printOnConsole(string);

  }

  transposeMatrix() {
    this.rebuildMatrix();
    var string = "Transposition result:r";
    for (var i = 0; i < this.AxDimension; i++) {
      for (var j = 0; j < this.AyDimension; j++) {
        string = string + "t" + this.matrixA[j][i];
      }
      string = string + "r";
    }
    this.printOnConsole(string);
  }

  subtractMatrix() {
    this.rebuildMatrix();
    if (this.AxDimension != this.AyDimension) {
      this.printOnConsole("Matrices have different dimmensions.");
      return;
    }
    var result = [];
    for (var i = 0; i < 3; i++)
      result[i] = [];
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        result[i][j] = Math.round((parseFloat(this.matrixA[i][j]) - parseFloat(this.matrixB[i][j])) * 100) / 100;
      }
    }
    var string = "Subtraction result:r";
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        string = string + "t" + result[i][j];
      }
      string = string + "r";
    }
    this.printOnConsole(string);
  }

  addMatrix() {
    this.rebuildMatrix();
    if (this.AxDimension != this.AyDimension) {
      this.printOnConsole("Matrices have different dimmensions.");
      return;
    }
    var result = [];
    for (var i = 0; i < 3; i++)
      result[i] = [];
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        //Parsing is necessary here since addition operator can also concatenate strings
        result[i][j] = Math.round((parseFloat(this.matrixA[i][j]) + parseFloat(this.matrixB[i][j])) * 100) / 100;
      }
    }
    var string = "Addition result:r";
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        string = string + "t" + result[i][j];
      }
      string = string + "r";
    }
    this.printOnConsole(string);
  }

  multiplyMatrix() {
    this.rebuildMatrix();
    if (this.AxDimension != this.ByDimension) {
      this.printOnConsole("Number of columns on A is different from number of rows on B.");
      return;
    }
    var result = [];
    for (var i = 0; i < 3; i++)
      result[i] = [];
    i = 0;
    var j = 0;
    //x refers to columns, y refers to rows
    var rowsRes = this.AyDimension;
    var columnsRes = this.BxDimension;

    for (i = 0; i < rowsRes; i++) {
      for (j = 0; j < columnsRes; j++) {
        result[i][j] = this.matrixA[i][0] * this.matrixB[0][j] + this.matrixA[i][1] * this.matrixB[1][j] + this.matrixA[i][2] * this.matrixB[2][j];
        result[i][j] = Math.round(result[i][j] * 100) / 100;
      }
    }
    var string = "Multiplication result:r";
    for (i = 0; i < rowsRes; i++) {
      for (j = 0; j < columnsRes; j++) {
        string = string + "t" + result[i][j];
      }
      string = string + "r";
    }
    this.printOnConsole(string);
  }

  calculateDeterminant() {
    this.rebuildMatrix();
    if (this.AxDimension != this.AyDimension) {
      this.determinantA = null;
      this.printOnConsole("Non-square matrix, determinant cannot be calculated.");
      return;
    }
    var determinant;
    if (this.AxDimension == 1) {
      determinant = this.matrixA[0][0];
    }
    if (this.AxDimension == 2) {
      determinant = (this.matrixA[0][0] * this.matrixA[1][1]) - (this.matrixA[0][1] * this.matrixA[1][0]);
    }
    if (this.AxDimension == 3) {
      var op1, op2, op3, r1, r2, r3;
      op1 = this.matrixA[0][0] * this.matrixA[1][1] * this.matrixA[2][2];
      op2 = this.matrixA[0][1] * this.matrixA[1][2] * this.matrixA[2][0];
      op3 = this.matrixA[0][2] * this.matrixA[1][0] * this.matrixA[2][1];
      r1 = this.matrixA[0][2] * this.matrixA[1][1] * this.matrixA[2][0];
      r2 = this.matrixA[0][0] * this.matrixA[1][2] * this.matrixA[2][1];
      r3 = this.matrixA[0][1] * this.matrixA[1][0] * this.matrixA[2][2];
      determinant = Math.round((op1 + op2 + op3 - r1 - r2 - r3) * 100) / 100;
    }
    this.determinantA = determinant;
    this.printOnConsole("Determinant: " + determinant)
    return;
  }

  printOnConsole(val) {
    document.getElementById("console").value = val;
  }

  rebuildMatrix() {
    var row1 = document.getElementsByClassName("m1r1");
    var row2 = document.getElementsByClassName("m1r2");
    var row3 = document.getElementsByClassName("m1r3");
    for (var i = 0; i < 3; i++) {
      this.matrixA[0][i] = row1[i].value;
      this.matrixA[1][i] = row2[i].value;
      this.matrixA[2][i] = row3[i].value;
    }
    row1 = document.getElementsByClassName("m2r1");
    row2 = document.getElementsByClassName("m2r2");
    row3 = document.getElementsByClassName("m2r3");
    for (var i = 0; i < 3; i++) {
      this.matrixB[0][i] = row1[i].value;
      this.matrixB[1][i] = row2[i].value;
      this.matrixB[2][i] = row3[i].value;
    }
    this.calculateDimensions();
  }

  calculateDimensions() {
    //Calculating matrix A's dimensions
    this.AyDimension = 3;
    this.AxDimension = 3;

    var count = 2;
    //If there's a whole column of 0's, we'll decrease the dimension and look at the next one.
    while (count >= 0 && this.matrixA[0][count] == 0 && this.matrixA[1][count] == 0 && this.matrixA[2][count] == 0) {
      this.AxDimension--;
      count--;
    }
    count = 2;
    //If there's a whole row of 0's, we'll decrease the dimension and look at the next one.
    while (count >= 0 && this.matrixA[count][0] == 0 && this.matrixA[count][1] == 0 && this.matrixA[count][2] == 0) {
      this.AyDimension--;
      count--;
    }

    //Calculating matrix B's dimensions in the same way
    this.ByDimension = 3;
    this.BxDimension = 3;

    var count = 2;
    while (count >= 0 && this.matrixB[0][count] == 0 && this.matrixB[1][count] == 0 && this.matrixB[2][count] == 0) {
      this.BxDimension--;
      count--;
    }
    count = 2;
    while (count >= 0 && this.matrixB[count][0] == 0 && this.matrixB[count][1] == 0 && this.matrixB[count][2] == 0) {
      this.ByDimension--;
      count--;
    }
  }
}

var mc = new MatrixCalculator();

.page-container {
  display: grid;
  grid-gap: 1rem;
  grid-template-areas: "head" "matrix" "lower";
  font-size: 16px;
}

.page-container>* {
  /* main container */
  border: solid 1px lime;
}

header {
  grid-area: head;
  display: grid;
  /* super center */
  place-items: center;
}

.upper-container {
  grid-area: matrix;
  display: grid;
  grid-template-areas: "matrixA mid matrixB";
}

.upper-container>* {
  border: solid blue 1px;
  display: grid;
  /* super center */
  place-items: center;
}

.middle-container {
  grid-area: mid;
  display: grid;
  /* super center */
  place-items: center;
  grid-template-areas: "title" "ops" "fun";
}

.lower-container {
  grid-area: lower;
  display: grid;
  /* super center */
  place-items: center;
}


/* end of main-container blocks */

.matrix-container {
  display: grid;
  grid-template-rows: 3rem repeat(3, 1.25rem);
  grid-template-areas: "title title title" "bt bt bt" "bm bm bm" "be be be";
  background-color: #FAFAFA;
}

.title {
  grid-area: title;
  font-family: "Times New Roman", serif;
  height: 2rem;
  font-size: 2em;
  font-weight: 600;
  margin: 0;
  padding: 0.5rem 0.5rem;
  border: solid green 1px;
}

.br {
  display: grid;
  grid-template-columns: repeat(3, 3em);
  border: 1px solid red;
}

.br>* {
  text-align: center;
  height: 1rem;
}

.br-1 {
  grid-area: bt;
}

.br-2 {
  grid-area: bm;
}

.br-3 {
  grid-area: be;
}

.functions-container {
  grid-area: fun;
}

.operations-container {
  grid-area: ops;
}

.lower-container>* {
  width: 100%;
}

.operations-container,
.functions-container {
  display: grid;
  place-items: center;
}

.function {
  width: 8em;
  height: 1.5em;
  border-radius: 2em;
}

.operation {
  width: 5em;
  height: 1.5em;
}

<div class="page-container">
  <header><img src="./logo.png" alt="Page logo JSMatrix Calculator" /></header>
  <div id="upper" class="upper-container">
    <div id="matrix1" class="parent matrix-container matrix-a">
      <div class="title">Matrix A</div>
      <div class="br br-1">
        <input class="m1r1" type="text" value="0" />
        <input class="m1r1" type="text" value="0" />
        <input class="m1r1" type="text" value="0" />
      </div>
      <div class="br br-2">
        <input class="m1r2" type="text" value="0" />
        <input class="m1r2" type="text" value="0" />
        <input class="m1r2" type="text" value="0" />
      </div>
      <div class="br br-3">
        <input class="m1r3" type="text" value="0" />
        <input class="m1r3" type="text" value="0" />
        <input class="m1r3" type="text" value="0" />
      </div>
    </div>
    <div class="middle-container">
      <div class="title"></div>
      <div class="functions-container functions">
        <input class="function" type="button" value="Determinant" onclick="mc.calculateDeterminant()" />
        <input class="function" type="button" value="Transpose" onclick="mc.transposeMatrix()" />
        <input class="function" type="button" value="Invert" onclick="mc.invertMatrix()" />
        <input class="function" type="button" value="Rank" onclick="mc.calculateRank()" />
      </div>
      <div id="operations" class="operations-container">
        <input class="operation" type="button" value="A x B" onclick="mc.multiplyMatrix()" />
        <input class="operation" type="button" value="A + B" onclick="mc.addMatrix()" />
        <input class="operation" type="button" value="A - B" onclick="mc.subtractMatrix()" />
      </div>
    </div>
    <div id="matrix2" class="parent matrix-container matrix-b">
      <div class="title">Matrix B</div>
      <div class="br br-1">
        <input class="m2r1" type="text" value="0" />
        <input class="m2r1" type="text" value="0" />
        <input class="m2r1" type="text" value="0" />
      </div>
      <div class="br br-2">
        <input class="m2r2" type="text" value="0" />
        <input class="m2r2" type="text" value="0" />
        <input class="m2r2" type="text" value="0" />
      </div>
      <div class="br br-3">
        <input class="m2r3" type="text" value="0" />
        <input class="m2r3" type="text" value="0" />
        <input class="m2r3" type="text" value="0" />
      </div>
    </div>
  </div>
  <div id="lower" class="lower-container">
    <textarea wrap="soft" rows="10" cols="20" id="console" disabled></textarea>
  </div>
</div>

Using your initial Flexbox Layout I simplified your code to create a responsive Flexbox version you can build upon.

Code changes:

Rearranged Flexbox element usage to enable viewport dependent resizing.
Made all .calculator div flexbox containers, including .calculator.
Removed all order assignments and kept only one where needed.
Removed all redundant and duplicate code.
Split code into ‘Mechanism’ and ‘Eye-candy’ for clarity.
‘Eye-candy’ can safely be removed or modified, while leaving the ‘Mechanism’ intact.
Made sure the calculator fits in viewport sizes from 360x640px.
Added ellipsis to button text to fit even more narrow viewports (<200px).
Commented the code where applicable.

BTW: you can put all you code in a single document using the standard structure.

snippet

class MatrixCalculator {
    constructor() {
        this.matrixA = [];
        this.matrixB = [];
        for(var i=0; i<3; i++) {
            this.matrixA[i] = [];
            this.matrixB[i] = [];
        }
        
        this.AxDimension = 3;
        this.AyDimension = 3;
        this.BxDimension = 3;
        this.ByDimension = 3;
    }
    
    calculateRank() {
        this.rebuildMatrix();
        
        var rank = this.AxDimension;
        var row = this.AyDimension;
        var mat = this.matrixA;
        
        for (row = 0; row < rank; row++) { 
            if (mat[row][row]) { 
               for (var col = 0; col < this.AyDimension; col++) { 
                   if (col != row) { 
                     var mult = Math.round(mat[col][row] / mat[row][row]*100)/100; 
                     for (var i = 0; i < rank; i++) 
                       mat[col][i] -= mult * mat[row][i]; 
                  } 
               } 
            } 
            else
            { 
                var reduce = true; 
                for (var i = row + 1; i < this.AyDimension;  i++) 
                { 
                    if (mat[i][row]) 
                    { 
                        var aux = mat[row];
                        mat[row] = math[i];
                        math[i] = aux;
                        reduce = false; 
                        break; 
                    } 
                } 
                if (reduce) 
                { 
                    rank--; 
                    for (i = 0; i < this.AyDimension; i++) 
                        mat[i][row] = mat[i][rank]; 
                } 
                row--; 
            } 
        } 
        this.printOnConsole("Matrix rank is: "+rank);       
    }
    
    invertMatrix() {        
        this.calculateDeterminant();
        if (this.determinantA==null)
            return; //Error will already be printed out by calculateDeterminant method.
        if(this.determinantA==0) {
            this.printOnConsole("Matrix is non-invertible.");
            return;
        }
        var adjacent = [];
        var result = [];
        var aux = [];
        for(var i=0; i<3; i++) {
            adjacent[i] = [];
            result[i] = [];
            aux[i]=[];
        }
        //Calculating adjacency matrix
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                if (this.AxDimension == 1)
                    adjacent[i][j] = 1+"/"+this.matrixA[i][j];
                if (this.AxDimension==2) {
                    adjacent[j][i] = ((-1)**(i+1+j+1))*this.matrixA[i][j];
                }
                if (this.AxDimension==3) { 
                    //Reconstructing 2 dimension sub matrix
                    var count1 = 0;
                    var count2 = 0;
                    for (var k=0; k<3; k++) {
                        for (var l=0; l<3; l++) {
                            if (l!=j && k!=i) {
                                aux[count1][count2]=this.matrixA[k][l];
                                count2++;
                            }
                        }
                        count2 = 0;
                        if (k!=i)
                            count1++;
                    }
                    adjacent[i][j] = ((-1)**(i+1+j+1))*(aux[0][0]*aux[1][1]-aux[0][1]*aux[1][0]);
                }
            }
        }
        //Transposing it
        for (var i =0; i<this.AxDimension; i++) {
            for (var j=0; j<this.AyDimension; j++) {
                result[i][j]=adjacent[j][i];
            }
        }
        if (this.AxDimension==2) {
            var temp = result[0][0];
            result[0][0] = result[1][1];
            result[1][1] = temp;
        }
        
        //We divide by the determinant
        if (this.AxDimension!=1) {
            for (var i =0; i<this.AxDimension; i++) {
                for (var j=0; j<this.AyDimension; j++) {
                    result[i][j]=Math.round(result[i][j]/this.determinantA*100)/100;
                }
            }
        }
        
        var string = "Inverse matrix:r";
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                string=string+"t"+result[i][j];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
        
    }
    
    transposeMatrix() {
        this.rebuildMatrix();
        var string = "Transposition result:r";
        for (var i =0; i<this.AxDimension; i++) {
            for (var j=0; j<this.AyDimension; j++) {
                string=string+"t"+this.matrixA[j][i];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
    }
    
    subtractMatrix() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.AyDimension) {
            this.printOnConsole("Matrices have different dimmensions.");
            return;
        }
        var result = [];
        for(var i=0; i<3; i++) 
            result[i]=[];
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                result[i][j]=Math.round((parseFloat(this.matrixA[i][j])-parseFloat(this.matrixB[i][j]))*100)/100;
            }
        }
        var string = "Subtraction result:r";
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                string=string+"t"+result[i][j];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
    }
    
    addMatrix() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.AyDimension) {
            this.printOnConsole("Matrices have different dimmensions.");
            return;
        }
        var result = [];
        for(var i=0; i<3; i++) 
            result[i]=[];
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                //Parsing is necessary here since addition operator can also concatenate strings
                result[i][j]=Math.round((parseFloat(this.matrixA[i][j])+parseFloat(this.matrixB[i][j]))*100)/100;
            }
        }
        var string = "Addition result:r";
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                string=string+"t"+result[i][j];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
    }
    
    multiplyMatrix() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.ByDimension) {
            this.printOnConsole("Number of columns on A is different from number of rows on B.");
            return;
        }
        var result = [];
        for(var i=0; i<3; i++) 
            result[i]=[];
        i=0;
        var j=0;
        //x refers to columns, y refers to rows
        var rowsRes = this.AyDimension;
        var columnsRes = this.BxDimension;
        
        for (i=0; i<rowsRes; i++) {
            for (j=0; j<columnsRes; j++) {
                result[i][j] = this.matrixA[i][0]*this.matrixB[0][j]+this.matrixA[i][1]*this.matrixB[1][j]+this.matrixA[i][2]*this.matrixB[2][j];
                result[i][j] = Math.round(result[i][j]*100)/100;
            }
        }
        var string = "Multiplication result:r";
        for (i=0; i<rowsRes; i++) {
            for (j=0; j<columnsRes; j++) {
                string=string+"t"+result[i][j];
            }
            string=string+"r";
        }
        this.printOnConsole(string);
    }
    
    calculateDeterminant() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.AyDimension) {
            this.determinantA=null;
            this.printOnConsole("Non-square matrix, determinant cannot be calculated.");
            return;
        }
        var determinant;
        if (this.AxDimension==1) {
            determinant = this.matrixA[0][0];
        }
        if (this.AxDimension==2) {
            determinant = (this.matrixA[0][0]*this.matrixA[1][1])-(this.matrixA[0][1]*this.matrixA[1][0]);
        }
        if (this.AxDimension==3) {
            var op1, op2, op3, r1, r2, r3;
            op1 = this.matrixA[0][0]*this.matrixA[1][1]*this.matrixA[2][2];
            op2 = this.matrixA[0][1]*this.matrixA[1][2]*this.matrixA[2][0];
            op3 = this.matrixA[0][2]*this.matrixA[1][0]*this.matrixA[2][1];
            r1 = this.matrixA[0][2]*this.matrixA[1][1]*this.matrixA[2][0];
            r2 = this.matrixA[0][0]*this.matrixA[1][2]*this.matrixA[2][1];
            r3 = this.matrixA[0][1]*this.matrixA[1][0]*this.matrixA[2][2];
            determinant = Math.round((op1+op2+op3-r1-r2-r3)*100)/100;
        }
        this.determinantA = determinant;
        this.printOnConsole("Determinant: "+determinant)
        return;
    }
    
    printOnConsole(val) {
        document.getElementById("console").value = val;
    }
    
    rebuildMatrix() {
        var row1 = document.getElementsByClassName("m1r1");
        var row2 = document.getElementsByClassName("m1r2");
        var row3 = document.getElementsByClassName("m1r3");
        for (var i=0; i<3; i++) {
            this.matrixA[0][i] = row1[i].value;
            this.matrixA[1][i] = row2[i].value;
            this.matrixA[2][i] = row3[i].value;
        }
        row1 = document.getElementsByClassName("m2r1");
        row2 = document.getElementsByClassName("m2r2");
        row3 = document.getElementsByClassName("m2r3");
        for (var i=0; i<3; i++) {
            this.matrixB[0][i] = row1[i].value;
            this.matrixB[1][i] = row2[i].value;
            this.matrixB[2][i] = row3[i].value;
        }
        this.calculateDimensions();
    }
    
    calculateDimensions() {
        //Calculating matrix A's dimensions
        this.AyDimension = 3;
        this.AxDimension = 3;
        
        var count = 2;
        //If there's a whole column of 0's, we'll decrease the dimension and look at the next one.
        while (count>=0 && this.matrixA[0][count]==0 && this.matrixA[1][count]==0 && this.matrixA[2][count]==0) {
            this.AxDimension--;
            count--;
        }
        count = 2;
        //If there's a whole row of 0's, we'll decrease the dimension and look at the next one.
        while (count>=0 && this.matrixA[count][0]==0 && this.matrixA[count][1]==0 && this.matrixA[count][2]==0) {
            this.AyDimension--;
            count--;
        }
        
        //Calculating matrix B's dimensions in the same way
        this.ByDimension = 3;
        this.BxDimension = 3;
        
        var count = 2;
        while (count>=0 && this.matrixB[0][count]==0 && this.matrixB[1][count]==0 && this.matrixB[2][count]==0) {
            this.BxDimension--;
            count--;
        }
        count = 2;
        while (count>=0 && this.matrixB[count][0]==0 && this.matrixB[count][1]==0 && this.matrixB[count][2]==0) {
            this.ByDimension--;
            count--;
        }       
    }
}

var mc = new MatrixCalculator();

 * { outline: 1px dashed } /* for debugging */

/***********/
/* Globals */
/***********/
* { box-sizing: border-box }

body { margin: 0 }
img  { display: block; width: 100%; object-fit: cover }

/************************/
/* Calculator Mechanism */
/************************/
/* Flexbox Layout: BEWARE!!! All 'div' */
.calculator, .calculator div {
    display: flex;
    justify-content: center;
}

[C] { flex-direction: column } /* easy overrides */
[R] { flex-direction: row }
[W] { flex-wrap: wrap }

/* Makes .title top aligned as per OP request */
.calculator :is(.matrix, .tools) { justify-content: start }

/* Responsive flexbox positioning */
@media all and (max-width: 512px) {
    .tools { order: 1 } /* move below matrices */
}

/* container ratios */
/* vertical alignment main containers */
.header { flex: 0 } /* don't grow */
.upper  { flex: 6 } /* 60% */
.lower  { flex: 4 } /* 40% */

/* horizontal alignment 'upper' container elements */
.tools  { flex: 0 } /* or some ratio */
.matrix { flex: 1 } /* like above... */

/* Sizing */
.calculator { width: 100% }
.upper > *  { min-width: min(10rem, 100%) } /* toy with this */

.cells > * { /* matrix input cells */
    flex-basis: 33.3333%; /* 3 in a row */
    min-width: 0; /* overrides input default */
}
/* Tools buttons */
[type="button"] { width: 100%; max-width: 8rem; margin: 0 auto }
#console        { min-width: calc(100vw - 1rem); max-width: calc(100vw - 1rem) }

/*************************/
/* Calculator Eye-candy, */
/* can all be removed... */
/*************************/
.calculator     { --pad: 0.5rem; background-color: hsl(0,0%,98%) }
.calculator > * { padding: var(--pad) }

.header         { padding: var(--pad) }
.cells          { padding: var(--pad) 0 }
.tools > *      { padding: var(--pad) }

@media all and (max-width: 512px) {
    .upper { gap: var(--pad) } /* gap between matrices */
}

.calculator *   { text-align: center } /* everything */
#console        { text-align: left }

.title {
    font-family: "Times New Roman", serif;
    font-size: 2rem; line-height: 2rem; font-weight: 700;

    padding: var(--pad);
}
.tools .title   { font-size: 1.25rem }
[type="button"] { border-radius: 1em; overflow: hidden; text-overflow: ellipsis; }

<div class="calculator" C>
    <div class="header">
        <img src="https://picsum.photos/id/0/800/100" alt="Page logo JSMatrix Calculator" />
    </div>

    <div class="upper" R W>
        <div class="matrix" C>
            <div class="title">Matrix A</div>

            <div class="cells" R W>
                <input class="m1r1" type="text" value="0" />
                <input class="m1r1" type="text" value="0" />
                <input class="m1r1" type="text" value="0" />
                <input class="m1r2" type="text" value="0" />
                <input class="m1r2" type="text" value="0" />
                <input class="m1r2" type="text" value="0" />
                <input class="m1r3" type="text" value="0" />
                <input class="m1r3" type="text" value="0" />
                <input class="m1r3" type="text" value="0" />
            </div>
         </div>

        <div class="tools" C>
            <div class="title">operations</div>
            <div class="operations" C>
                <input class="operation" type="button" value="A x B" onclick="mc.multiplyMatrix()" />
                <input class="operation" type="button" value="A + B" onclick="mc.addMatrix()" />
                <input class="operation" type="button" value="A - B" onclick="mc.subtractMatrix()" />
            </div>

            <div class="title">functions</div>
            <div class="functions" C>
                <input class="function" type="button" value="Determinant" onclick="mc.calculateDeterminant()" />
                <input class="function" type="button" value="Transpose" onclick="mc.transposeMatrix()" />
                <input class="function" type="button" value="Invert" onclick="mc.invertMatrix()" />
                <input class="function" type="button" value="Rank" onclick="mc.calculateRank()" />
            </div>
        </div>

        <div class="matrix" C>
            <div class="title">Matrix B</div>

            <div class="cells" R W>
                <input class="m2r1" type="text" value="0" />
                <input class="m2r1" type="text" value="0" />
                <input class="m2r1" type="text" value="0" />
                <input class="m2r2" type="text" value="0" />
                <input class="m2r2" type="text" value="0" />
                <input class="m2r2" type="text" value="0" />
                <input class="m2r3" type="text" value="0" />
                <input class="m2r3" type="text" value="0" />
                <input class="m2r3" type="text" value="0" />
            </div>
        </div>
    </div>

    <div class="lower" R>
        <textarea id="console" rows="10" wrap="soft" disabled></textarea>
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

I want the MATRIX A and MATRIX B is in the same line and center the function i dont know what is wrong in my CSS – Html

Answers