Connect Four with Javascript & jQuery - Tutorial

In this programming tutorial, we'll create a basic two player connect four game using Javascript, jQuery, CSS, and HTML. This tutorial is geared towards people who understand the basics of web technologies, but maybe want to watch how another developer builds a connect four application.

--

[kevinzhang]

thank you for teaching this practical example ... I successfully duplicated it and I have learned so much ... again, jQuery is the saver ...

[SuperMoritz]

Awesome tutorial, good job! There only one thing in the checkWinFunction I'm not sure about if it is correct: checkDiagonalTLtoBL - Shouldn't it be "-1" for i of the directionB?
Like this: return checkWin ( { i: 1, j: -1 }, { i: -1, j: 1 } );
Strangely it works either way, so let me know if I am wrong!:)
Cheers

[themoon]

Great tutorial. Went kind of fast at the checkForWinner method though.

[argeelearner]

Thanks for these great small projects videos.

[matthewluna]

Wow that hour flew by this had some great info in it

[PsychoGod]

Great tutorial. The checking of the winner was a little bit to fast for me. But I think after watching this part some times I will get this, too.
I tried to replicate this project for learning purposes in vanilla js. But I have a problem rewriting the line 79:



First I think I have to listen at the board on the mouseover event instead to test, what child element I hovered over (at line 47):

board.addEvenetListener('mouseover', function(e) {
{
// find lastEmptyCell etc.
}
});

Then I think I have to trigger the mouseover event from the child element and let it bubble up to the board (line 79):

e.target.dispatchEvent(new Event('mouseover', { bubble: true });

But the event listener above does not catch this event. It is only called if i dispatch the event from the board (board.dispatchEvent(new Event('mouseover'))). But then I cannot access the actual cell, that was hovered in the event listener.

Has anyone an idea what I am making wrong?

EDIT:
If I click on a child, I would expect, that the mouseover event listener gets triggered and logs the child id.

[dylancampbell]

can someone explain the


const cells = $('.col[data-col=${col}']')


that makes no sense to me

[clusion]

When I hover over the connect4 frame the console.log doesn't work for some odd reason and the code it perfectly fine there is no errors and I debugged it ???

[prabalgupta]

Are declarations made under "const" global or local??

[DanielSilva-nrcd]

You change a LOT of stuff with keyboard shortcuts without communicating or explaining why and those oversights break the code for those who are following your steps, I counted at least three things being deleted off-camera without a single mention or warning.
A waste of time 30 minutes in.