Function that creates matrix 5x5 + function that creates HTML view of the matrix

Question

I got the following task:

"Implement a function numberMatrix() (using JS) which creates HTML view of matrix 5x5 like mentioned below:

1 3 3 3 3
2 1 3 3 3
2 2 1 3 3
2 2 2 1 3
2 2 2 2 1

! Note: It is not allowed to use hardcoded arrays like

const arr = [[1,3,3,3,3], [2,1,3,3,3], [2,2,1,3,3], [2,2,2,1,3], [2,2,2,2,1]];

There can be some other numbers. Try to use square matrix terms and features: main diagonal, elements over/under main diagonal.

To generate HTML view please use only document.write() method with any needed tags.

Also it is recommended to implement separate functions to generate matrix (two dimensional array) and to generate HTML view."

I know how to create HTML view of the hardcoded matrix:

function numberMatrix() {
  let numbers = [
    [1, 3, 3, 3, 3],
    [2, 1, 3, 3, 3],
    [2, 2, 1, 3, 3],
    [2, 2, 2, 1, 3],
    [2, 2, 2, 2, 1]

  ];

  let x = 0;
  while (x < 5) {
    for (let i = 0; i < 5; i++) {
      document.write(numbers[x][i]);
    }
    document.write('<br>');
    x++;
  }
}

My main problem is to implement function that generates matrix, using square matrix terms and features: main diagonal, elements over/under main diagonal, as mentioned above.

Answer 1

Some basic thoughts:

• A diagonal is where the index of the outer array and the inner array is equal.

   | 0 1 2 3 4 ---+--------------- 0 | 1 . . . . 1 | . 1 . . . 2 | . . 1 . . 3 | . . . 1 . 4 | . . . . 1

• For getting the other diagonal, you could add the indices of outer and inner arrays and check if the sum is equal to length minus one.

   | 0 1 2 3 4 ---+--------------- 0 | . . . . 1 1 | . . . 1 . 2 | . . 1 . . 3 | . 1 . . . 4 | 1 . . . .

• By taking only the first diagonal from (0, 0) to (4, 4) and by having another look to the indices, you find out, that the outer index has to be greater than the inner index.

   | 0 1 2 3 4 ---+--------------- 0 | . . . . . 1 | 2 . . . . 2 | 2 2 . . . 3 | 2 2 2 . . 4 | 2 2 2 2 . 

   var length = 5, matrix = Array.from( { length }, (_, i) => Array.from( { length }, (__, j) => i > j ? 2 : '.' // this is the check ) ); matrix.forEach(a => console.log(...a));

The rest is to fill with 3 and up to you.

Answer 2

Here is a solution relying on function generators.

A function generator buildSquaredMatrix will take care of generating a square matrix, providing the size of it, the value desired for the diagonal, the value desired for elements below the diagonal, and the value desired for elements above the diagonal.

I'm not a Math master, hence I'm pretty sure this can be done in different ways, but I just hope this will help you discovering other ways to accomplish the goal (using a function generator, for example) or give you further clarifications about your problem.

In any case, this solution will work for any sized matrix.

 /** Builds a square matrix starting from the desired size. */ function *buildSquaredMatrix(size, diagonal, belowDiagonal, aboveDiagonal) { // Build each row from 0 to size. for (var i = 0; i < size; i++) { // Current array is composed by the "below diagonal" part, defined by the range 0 -> i, and the "above diagonal" part, defined by the range i -> size. // The concatenation will lead to an array of <size> elements. const current = Array.from({length: i}).fill(belowDiagonal).concat(Array.from({length: size - i}).fill(aboveDiagonal)); // finally, we set the diagonal item, which always is at index <i>. current[i] = diagonal; // then, we yield the current result to the iterator. yield current; } } // Below, we define a new 5x5 matrix /size 5), where the diagonal value is 1, the value below the diagonal is 2, and above is 3. for (var row of buildSquaredMatrix(5,1,2,3)) { // finally, we join the row with a blankspace, and separe the rows with a break. document.write(row.join(' ') + '<br />'); }