JSFiddle - React, Tailwind, and code Playground

by MariusNastasa

HTML

<script src="https://pbs.twimg.com/profile_images/870748901174910978/mh3S-VRD_400x400.jpg"></script>
<h1>Suma a 2 matrici</h1>
<h2>Matricea A</h2>
Linii:
<input type="number" id="rowA"> Coloane:
<input type="number" id="colA"><br>
<button onclick="initMatrixA()">Initializare</button>
<br>
<hr>
<input type="number" id="numberA">
<button onclick="readNumber('A')">Add number</button>
<hr> Afisare Matrice
<div id="display_matrixA"></div>
<br>
<hr>
<h2>Matricea B</h2>
Linii:
<input type="number" id="rowB"> Coloane:
<input type="number" id="colB"><br>
<button onclick="initMatrixB()">Initializare</button>
<br>
<hr>
<input type="number" id="numberB">
<button onclick="readNumber('B')">Add number</button>
<hr> Afisare Matrice
<div id="display_matrixB"></div>
<h2>Suma A + B</h2>
<button onclick="matrixSum(matrixA, matrixB)">
Calculeaza
</button>
<div id="display_matrixC"></div>

CSS

body{background-color:Moccasin;}

JavaScript

var matrixA = [];
var matrixB = [];
var mrowsA;
var mcolsA;
var mrowsB;
var mcolsB;
var rowPos;
var colPos;

function initMatrixA() {
  rowPos = 0;
  colPos = 0;

  mcolsA = Number(document.getElementById("colA").value);
  mrowsA = Number(document.getElementById("rowA").value);

  for (var i = 0; i < mrowsA; i++) {
    for (var j = 0; j < mcolsA; j++) {
      if (j == 0) {
        matrixA[i] = [];
      }
      matrixA[i].push("- ");
    }
  }
  document.getElementById("display_matrixA").innerHTML = displayMatrix(matrixA);
}

function initMatrixB() {
  rowPos = 0;
  colPos = 0;

  mcolsB = Number(document.getElementById("colB").value);
  mrowsB = Number(document.getElementById("rowB").value);

  for (var i = 0; i < mrowsB; i++) {
    for (var j = 0; j < mcolsB; j++) {
      if (j == 0) {
        matrixB[i] = [];
      }
      matrixB[i].push("- ");
    }
  }
  document.getElementById("display_matrixB").innerHTML = displayMatrix(matrixB);
}


function displayMatrix(matrix) {
  var formatMatrix = "";

  for (var i = 0; i < matrix.length; i++) {
    for (var j = 0; j < matrix[0].length; j++) {
      if (j == 0) {
        formatMatrix += "<br>";
      }
      formatMatrix += matrix[i][j];
    }
  }
  return formatMatrix;
}

function readNumber(whichMatrix) {
  var number;
  if (whichMatrix == "A") {
    number = Number(document.getElementById("numberA").value);
    matrixA[rowPos][colPos++] = number;

    if (colPos == mcolsA) {
      colPos = 0;
      rowPos++;
    }
    document.getElementById("display_matrixA").innerHTML = displayMatrix(matrixA);
  } else {
    number = Number(document.getElementById("numberB").value);

    matrixB[rowPos][colPos++] = number;

    if (colPos == mcolsB) {
      colPos = 0;
      rowPos++;
    }
    document.getElementById("display_matrixB").innerHTML = displayMatrix(matrixB);
  }
}

function matrixSum(matrixA, matrixB) {
  var matrixC = [];
  for (var i = 0; i < matrixA.length; i++) {
    for (var j = 0; j < matrixA[0].length; j++)...