<!DOCTYPE html>
<html lang="lv">
<head>
<meta charset="UTF-8">
<title>Matricu kalkulators</title>

<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  input {
    width: 40px;
    margin: 3px;
    text-align: center;
  }
  .matrix {
    display: inline-block;
    margin: 20px;
  }
  .explain {
    width: 60%;
    margin: auto;
    text-align: center;
  }
</style>
</head>

<body>

<h2>Matricu aprēķinu programma</h2>

<div class="matrix">
  <h3>Matrica A</h3>
  <input id="a11"><input id="a12"><br>
  <input id="a21"><input id="a22">
</div>

<div class="matrix">
  <h3>Matrica B</h3>
  <input id="b11"><input id="b12"><br>
  <input id="b21"><input id="b22">
</div>

<br>
<button onclick="sum()">A + B</button>
<button onclick="mul()">A × B</button>

<h3>Rezultāts</h3>
<div id="out"></div>

<h3>Paskaidrojums</h3>
<div id="explain" class="explain"></div>

<script>
const g = id => Number(document.getElementById(id).value);

// ================= SASKAITĪŠANA =================
function sum() {
  let a11=g('a11'), a12=g('a12'), a21=g('a21'), a22=g('a22');
  let b11=g('b11'), b12=g('b12'), b21=g('b21'), b22=g('b22');

  let r11 = a11 + b11;
  let r12 = a12 + b12;l
  let r21 = a21 + b21;
  let r22 = a22 + b22;

  out.innerHTML = `
  ${r11} ${r12}<br>
  ${r21} ${r22}
  `;

  explain.innerHTML = `
  <b>1. elements (1. rinda, 1. kolonna)</b><br>
  ${a11} + ${b11} = ${r11}<br><br>

  <b>2. elements (1. rinda, 2. kolonna)</b><br>
  ${a12} + ${b12} = ${r12}<br><br>

  <b>3. elements (2. rinda, 1. kolonna)</b><br>
  ${a21} + ${b21} = ${r21}<br><br>

  <b>4. elements (2. rinda, 2. kolonna)</b><br>
  ${a22} + ${b22} = ${r22}
  `;
}

// ================= REIZINĀŠANA =================
function mul() {
  let a11=g('a11'), a12=g('a12'), a21=g('a21'), a22=g('a22');
  let b11=g('b11'), b12=g('b12'), b21=g('b21'), b22=g('b22');

  let r11 = a11*b11 + a12*b21;
  let r12 = a11*b12 + a12*b22;
  let r21 = a21*b11 + a22*b21;
  let r22 = a21*b12 + a22*b22;

  out.innerHTML = `
  ${r11} ${r12}<br>
  ${r21} ${r22}
  `;

  explain.innerHTML = `
  <b>1. elements (1. rinda, 1. kolonna)</b><br>
  ${a11}·${b11} + ${a12}·${b21} = ${a11*b11} + ${a12*b21} = ${r11}<br><br>

  <b>2. elements (1. rinda, 2. kolonna)</b><br>
  ${a11}·${b12} + ${a12}·${b22} = ${a11*b12} + ${a12*b22} = ${r12}<br><br>

  <b>3. elements (2. rinda, 1. kolonna)</b><br>
  ${a21}·${b11} + ${a22}·${b21} = ${a21*b11} + ${a22*b21} = ${r21}<br><br>

  <b>4. elements (2. rinda, 2. kolonna)</b><br>
  ${a21}·${b12} + ${a22}·${b22} = ${a21*b12} + ${a22*b22} = ${r22}
  `;
}
</script>

</body>
</html>
