Multiplication.html

---
layout: default
title: Multiplication of two matrices
---

<style media="screen">

</style>


<!--java script code for creating interactive grids-->
<script type="text/javascript">
  var t="";
  function func() {
  var str="";
    var n=document.getElementById('n').value;
    n=parseInt(n);
     //defining the string str  to set auto for grid container according to the order of matrix
    document.getElementById("matrix1").innerHTML="";
    for(let i=0;i<n;i++)
    {
      str=str+"auto ";

    }
    const dStyle = document.querySelector('style');//changing the contents of style tag to chnage the css of grid that is for input matrix1
    dStyle.innerHTML = `.grid-container{display:grid;align:center;grid-template-columns: ${str};padding: 5px;width: 10px;}`;

t=str;

    for(let i=0;i<n*n;i++)
    {
      var div = document.createElement('div'); // creating a new  tag
      div.setAttribute('class', 'grid-item');//setting the div attribute to grid item

      div.innerHTML=`<input id="${i}"  type="text" size=1px  value="">`;//creating a new input tag inside div item to take input values inside the grid

  document.getElementById("matrix1").appendChild(div);//appending the div to grid cntainer
  document.getElementById("y").innerHTML="Enter the First Matrix A" ;

document.getElementById("yy").innerHTML="Enter the Second Matrix B";


    }

    document.getElementById("matrix2").innerHTML="";
    for(let i=0;i<n*n;i++)
    {
      var div = document.createElement('div'); // is a node
      div.setAttribute('class', 'grid-item');

      div.innerHTML=`<input id="${1000+i}"  type="text" size=1px  value="">`;//creating a new input tag inside div item to take input values inside the grid

  document.getElementById("matrix2").appendChild(div);//appending the div to grid cntainer




    }



  }


</script>



<script type="text/javascript">
//java script code for taking the input from grids and applying logic.
function fun() {
  const dtm = document.querySelector('style');//changing the contents of style tag to chnage the css of grid that is for input matrix1
  dtm.innerHTML = `.matrix:before { left: -6px;border-right: 0;display: block;} .grid-container{display:grid;align:center;grid-template-columns: ${t};padding: 5px;width: 10px;} .matrix:after { right: -6px;border-left: 0;display: block;}.paragraphout{background-color: lightgrey;margin-top:25px;font-size: 18px;line-height: 28.5px;color:black;padding-left: 15px;padding-right: 30px;margin-right:40px;text-align:left;display: block;} #out{display:block}`;



    document.getElementById("mul").innerHTML="";
    document.getElementById("mat1").innerHTML="";
      document.getElementById("mat2").innerHTML="";
  var n=document.getElementById('n').value;
  n=parseInt(n);
  let str1=[];

  //below two for loops gets the value from input grids and stores in str1 and str2
  for (let i=0;i<n;i++)
  {
    let a=[]
    for(let j=0;j<n;j++)
    {
  a.push(parseInt(document.getElementById(`${n*i+j}`).value));
    }
   str1.push(a);

  }

  let str2=[];
  for (let i=0;i<n;i++)
  {
    let a=[]
    for(let j=0;j<n;j++)
    {
  a.push(parseInt(document.getElementById(`${n*i+j+1000}`).value));
    }
   str2.push(a);

  }


document.getElementById('show_matrix1').innerHTML="<span style='margin-left:10em;color:black;font-style: bold'>"+"First matrix A=";
document.getElementById('show_matrix2').innerHTML="<span style='margin-left:10em;color:black;font-style: bold'>"+"Second matrix B=";
//now creating four matrix type  table formats for matrix1,matrix2,add and mul matrices to display in output
for (let i=0;i<n;i++)
{
  var tr = document.createElement('tr');
var string="";
  for(let j=0;j<n;j++)
  {
    string=string+`<td class="mmm">${str1[i][j]}</td>`;



  }
    tr.innerHTML=string;
  document.getElementById("mat1").appendChild(tr);

}
for (let i=0;i<n;i++)
{
  var tr = document.createElement('tr');
var string="";
  for(let j=0;j<n;j++)
  {
    string=string+`<td class="mmm">${str2[i][j]}</td>`;



  }
    tr.innerHTML=string;
  document.getElementById("mat2").appendChild(tr);

}



  var res_mul=math.multiply(str1,str2);//using math.multiply for multiplying two matrices.
  for (let i=0;i<n;i++)
  {
    var tr = document.createElement('tr');
  var string="";
    for(let j=0;j<n;j++)
    {
      string=string+`<td class="mmm">${res_mul[i][j]}</td>`;



    }
      tr.innerHTML=string;
    document.getElementById("mul").appendChild(tr);

  }
  document.getElementById("yyy").innerHTML="<span style='margin-left:5em;color:black;font-style': bold>Multiplication of two matrices A*B=</span>";





}


</script>



     <div class="right">

         <div class="main-heading">


          <h2 style="color:white;" ><strong>Multiplication of two Matrices</strong></h2>
         </div>

         <div class="paragraph">
           <br>

           <p> Matrix multiplication, also known as matrix product and the multiplication of two matrices, produces a single matrix.<br><br>
           If A is an m × n matrix and B is an n × p matrix,
           the matrix product C = AB (denoted without multiplication signs or dots) is defined to be the m × p matrix. </p>


         </div>
         <br>
         <p> &nbsp;&nbsp;  &nbsp;&nbsp;For i = 1, ..., m and j = 1, ..., p.

            That is, the entry Cij of the product is obtained by multiplying term-by-term the entries of the ith row of A and the jth column of B, and summing these n products. In other words,Cij is the dot product of the ith row of A and the jth column of B.

            Therefore, AB can also be written as

            </p>
         <br>

         <img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/9196c0c24ad20c3b18582bc78785fa405d91c7c3" alt="">
      <br><br>
         <img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/7d3ce5d06e84e1a8575ce6f1d47a90d006baf628" alt="">
<br><br>
         <img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/ee372c649dea0a05bf1ace77c9d6faf051d9cc8d" alt="">
<br><br>
         <img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/17584944fc26dc38354b452ffcc64aa158cf8349" alt="">
         <br>
         <br>
         <p >Now, Let's jump in to have fun, <strong>Practically trying them...</strong></p>



<h3><strong>Enter the Order of Matrix</strong></h3>
<br>
<div class="input">
  <input id="n" type="text" oninput="func()" placeholder="Enter the order of matrix"><!--on changing the input the function is called everytime-->


</div>
<h3 id="y"></h3>
<div id="matrix1"  class="grid-container">
</div>
<h3 id="yy"></h3>
<div id="matrix2"  class="grid-container">


</div>


<a class="submit"onclick="fun()" href="#footer" class="btn btn-light">Submit</a>
<br>
<br>
<h3 id="out" style="font-weight: bold;" >OUTPUT SECTION:</h3>
<br>

<div class="paragraphout">

  <br>
  <br>
  <h3 id="show_matrix1"></h3>
  <br>
  <!--for  matrix 1-->
  <table align="center" id="mat1" class="matrix">

  </table>
  <br>
  <h3 id="show_matrix2"></h3>
  <br>
  <table align="center" id="mat2" class="matrix">

  </table>
  <br>
  <h3 id="yyy"></h3>

  <br>
  <br>

  <table align="center" id="mul" class="matrix">

  </table>
  <br>

</div>