New level in the find the number game in JavaScript

Let's now make it so that when the last cell of the playing field is activated, this field increases by one row and one column.

In the previous lesson, you had to make a function to activate cells. This is the code you should have:

let field = document.querySelector('#field');
start(2);

function start(size) {
	activate(build(field, prepare(size)));
}

function activate(cells) {
	let counter = 1;
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (this.textContent == counter) {
				this.classList.add('active');
				
				counter++;
			}
		});
	}
}

Let's modify this function so that when you click on the last cell, the game starts again but with a larger field.

How to capture the end moment? With each click, you need to check the counter for the fact that its new value is equal to the last number of the field. If equal, then we will start the game from the beginning.

What is the value of the last number of the field? We know that we have the size variable which contains the size of the field. So size * size will give us the last number.

This means that the size variable should be passed as the second parameter to the activate function:

function start(size) {
	activate(build(field, prepare(size)), size); // correction
}

function activate(cells, size) { // correction
	let last = size * size; // the last number
}

Now let's discuss how to start the game again. We already have a start function to do this. So, inside the activate function, at the end of the level, we need to call the start function, but passing it the size by 1 larger than the current one.

Implement described.