• Friday , 24 May 2019

Connect Four with Javascript & jQuery – Tutorial

Code Canyon

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.

💻Code: https://github.com/codyseibert/js-connect-four

Check out Cody Seibert’s main channel: https://www.youtube.com/channel/UCsrVDPJBYeXItETFHG0qzyw

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Original source

3d Ocean

Related Posts


  1. Kevin M
    October 7, 2018 at 22:19

    Help!! I cant get the background color to show up:
    body {
    text-align: center;

    connect4 {
    background-color: yellow;
    display: inline-block;

    .col {
    width: 70px;
    display: inline-block;
    background-color:rgb(255, 255, 255);
    border-radius: 50%;
    margin: 5px;

  2. Psycho God
    October 7, 2018 at 22:19

    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) {
    if(e.target.classList.contains('empty) {
    // 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?

    I made a quick demo: https://codepen.io/anon/pen/pKMzYW?editors=1111
    If I click on a child, I would expect, that the mouseover event listener gets triggered and logs the child id.

  3. kevin zhang
    October 7, 2018 at 22:19

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

  4. Matthew Luna
    October 7, 2018 at 22:19

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

  5. Abhishek Kumar
    October 7, 2018 at 22:19

    Thank u for this awesome video

  6. Argee Learner
    October 7, 2018 at 22:19

    Thanks for these great small projects videos.

Leave A Comment

You must be logged in to post a comment.