JS Pascal's Triangle

by Gustavo

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Pascal's triangle</title>
</head>
<body>
  <main>
  </main>
</body>
</html>

CSS

.line {
  width: 100%;
  display: flex;
  justify-content: center;
}

.square {
  border: 1px solid #eee;
  padding: 20px;
}

JavaScript

/* My solution */

function myInit() {
	console.log('init');
  const triangle = pascalTriangle(8);
  console.log(triangle);
  drawTriangle(triangle);
}

document.addEventListener("DOMContentLoaded", myInit);

const pascalTriangle = function(n) {

	if (n <= 0) return null;

	let row = 1;
  let arr = [[1]];

	while (row <= n - 1) {
  	arr.push([]);
    for (let i = 0; i <= row; i++) {
    	arr[row].push(0);
    	if (arr[row-1]) {
      	arr[row][i] += arr[row-1][i] ? arr[row-1][i] : 0;
        arr[row][i] += arr[row-1][i-1] ? arr[row-1][i-1] : 0;
      }
    }
  	row++;
  }
  
  return arr;
}

const drawTriangle = function(triangle) {
  const main = document.querySelector('main');

	triangle.forEach(row => {
  	const line = newLine(row);
    line.classList.add('line');
  	main.appendChild(line);
  });
}

const newLine = function(row) {

	const line = document.createElement('div');
  
  row.forEach(item => {
  	const square = document.createElement('div');
    square.textContent = item;
    square.classList.add('square');
  	line.appendChild(square);
  });
  return line;
}