OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter DenZ
  • Start date Start date
D

DenZ

Guest
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?


Code:
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 dimensions.");
            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 dimensions.");
            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();

Code:
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%;
}

Code:
<!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>

OUTPUT IMAGE

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?

<p>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?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class MatrixCalculator {
constructor() {
this.matrixA = [];
this.matrixB = [];
for(var i=0; i<3; i++) {
this.matrixA = [];
this.matrixB = [];
}

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] -= mult * mat[row];
}
}
}
else
{
var reduce = true;
for (var i = row + 1; i < this.AyDimension; i++)
{
if (mat[row])
{
var aux = mat[row];
mat[row] = math;
math = aux;
reduce = false;
break;
}
}
if (reduce)
{
rank--;
for (i = 0; i < this.AyDimension; i++)
mat[row] = mat[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 = [];
result = [];
aux=[];
}
//Calculating adjacency matrix
for (i =0; i<this.AyDimension; i++) {
for (var j=0; j<this.AxDimension; j++) {
if (this.AxDimension == 1)
adjacent[j] = 1+"/"+this.matrixA[j];
if (this.AxDimension==2) {
adjacent[j] = ((-1)**(i+1+j+1))*this.matrixA[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[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[j]=adjacent[j];
}
}
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[j]=Math.round(result[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[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];
}
string=string+"\r";
}
this.printOnConsole(string);
}

subtractMatrix() {
this.rebuildMatrix();
if (this.AxDimension!=this.AyDimension) {
this.printOnConsole("Matrices have different dimensions.");
return;
}
var result = [];
for(var i=0; i<3; i++)
result=[];
for (i =0; i<this.AyDimension; i++) {
for (var j=0; j<this.AxDimension; j++) {
result[j]=Math.round((parseFloat(this.matrixA[j])-parseFloat(this.matrixB[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[j];
}
string=string+"\r";
}
this.printOnConsole(string);
}

addMatrix() {
this.rebuildMatrix();
if (this.AxDimension!=this.AyDimension) {
this.printOnConsole("Matrices have different dimensions.");
return;
}
var result = [];
for(var i=0; i<3; i++)
result=[];
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[j]=Math.round((parseFloat(this.matrixA[j])+parseFloat(this.matrixB[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[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=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[j] = this.matrixA[0]*this.matrixB[0][j]+this.matrixA[1]*this.matrixB[1][j]+this.matrixA[2]*this.matrixB[2][j];
result[j] = Math.round(result[j]*100)/100;
}
}
var string = "Multiplication result:\r";
for (i=0; i<rowsRes; i++) {
for (j=0; j<columnsRes; j++) {
string=string+"\t"+result[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] = row1.value;
this.matrixA[1] = row2.value;
this.matrixA[2] = row3.value;
}
row1 = document.getElementsByClassName("m2r1");
row2 = document.getElementsByClassName("m2r2");
row3 = document.getElementsByClassName("m2r3");
for (var i=0; i<3; i++) {
this.matrixB[0] = row1.value;
this.matrixB[1] = row2.value;
this.matrixB[2] = row3.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();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!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></code></pre>
</div>
</div>
</p>
<p><a href="https://i.sstatic.net/qGpja.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/qGpja.png" alt="OUTPUT IMAGE" /></a></p>
<p>I want the output is in the same size and a line of MATRIX A and the function to be in the middle<br />
And can I make this in a single file like HTML+CSS+JAVASCRIPT in one HTML file?</p>
 

Latest posts

Online statistics

Members online
0
Guests online
2
Total visitors
2
Top