♟️ Code CHESS in JavaScript (Super simple!)

Found this hard? Learn the fundamentals of JavaScript here:

🚀 Sign up to to receive access for the final code.

⭐ Check out my IDE here and get 1 month free:

⭐ New to code and none of this is making sense? Watch my ’12hr+ YouTube Coding Bootcamp’ in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It’s on my channel and its 100% free.

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here (I get no commission from this link, but am in a partnership):

⭐ You can get a blockchain domain with my affiliate link here:

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! :

⭐ Sign up for weekly coding tips from my newsletter partnership:

You can also find me on:


  1. Can u plz share your coding journey ???l where u start something like that….that would be great to hear …🥰

  2. Bad code structure, you can't write tests. Shitcode.

  3. Ok you did the visual part of the game, now please work on the AI part under the hood😁

  4. Can you make series on DJANGO web development

  5. Fantastic tutorial! i only had one issue with pawn taking an opponent piece by moving forward which can easily be rectified by adding "&& !document.querySelector(`[square-id="${startId + width}"]`).firstChild" on line 106 before the or statement

  6. Excellent Video. Very nice explanation. Learned a lot. Nice application design.

  7. plus plus plus plus minus minus minus but this was great to follow ! Thanks Ania

  8. Mmm why Drag? that is the problem the part if you move, i thinks it's better click and show how the piece can move, for example part
    Peon, show 2 move start and 1 second row, PERDON POR MI INGLES [ SORRY FOR MY ENGLISH]
    . well and css, before click mark area the part can move.

  9. evey single time i watch your video I feel professional

  10. It a nice coding journey filled with logic and conditions ! Thank you so much !

  11. Ania is so hot. I can’t really concentrate learning from this channel lol

  12. nice code :"D if pawn eat king – win, wtf this video ;ss;;s

  13. Nice video, very nice mastery of the languages but the logic could be really improved.
    For example, I'd have used way more OOP, define classes for the Game/Player/Piece.
    Having the ids reverted through some logic hidden in the functional part of the code is a very bad habit and makes code hardly maintainable if you do this 20x-50x-100x in a more complex project, instead we could have defined the direction pieces move depending on the color of the player or such directly in a class.

  14. @Code with Ania Kubów

    Hello! Before I get into this I want to ask, can I use VS Code for this project? Or do I have to download webstorm? Also is there any preperation that I need to do before that? Like donwloading the languages and what not?

    Thanks in advance 🙂

  15. beige and brown?? That’s grey and red. Are you colorblind by chance?

  16. Suggestion for future video: booking calendar with stripe integration. Haven’t found any videos on making a booking/appointment website for like a yoga studio with their classes or even a hair salon with available appointments.

  17. I don't know if you read the comment section, but as you recommended finding any bug in the code, I found out that when you move a pawn vertically into a square where there already is an opponent piece, it rakes it out! to debug it you need to add a " !document.querySelector().firstChild " part to the first two lines of "pawn condition" snippet, to make sure the square is empty and you can move your pawn into it. I changed it up that way and worked fine for me.
    here is how i changed the code :

    case "pawn":

    const starterRow = [8, 9, 10, 11, 12, 13, 14, 15];

    if (

    (starterRow.includes(startId) &&

    startId + width * 2 === targetId &&

    !document.querySelector(`[square-id="${startId + width * 2}"]`)

    .firstChild) ||

    (startId + width === targetId &&

    !document.querySelector(`[square-id="${startId + width}"]`)

    .firstChild) ||

    (startId + width – 1 === targetId &&

    document.querySelector(`[square-id="${startId + width – 1}"]`)

    .firstChild) ||

    (startId + width + 1 === targetId &&

    document.querySelector(`[square-id="${startId + width + 1}"]`)


    ) {

    return true;



  18. Oi será possivel você criar um App usando Ionic + Angular

  19. Thanks a lot…. i followed along it was great… lots of conditional statements

  20. Sorry just wanted to add some rules there the game does not end when the king is eaten….. the king never gets eaten… it ends when the king closed every where when you about to eat the black king you must say check….. white is the one that starts in the game not black…… ya and another condition is the one for castling where by you can move both king and the queen at the same time😁…. but other wise i really followed along the entire video my app is working thanks a lot

  21. hellooo, for some reason i can only drop onto other pieces, and not squares,,, how would i fix this?

  22. Красивая и умная. Это большая редкость.

  23. 42:23 a suggestion for reversing id's with just one function. Grab Id value and parse it to integer then subtract from 63 which gives you new ID, set the ID. It's gonna work for both the players.

  24. Need help.
    For some reason the firstchild function doesn’t work on mine, even though my container contains a child element. Whenever I use firstchild function it shows an error ( “firstchild is not defined” ). Does anyone have a solution for that

  25. I add a way to check the move of the knight is valid in two rows const movesKnight = [-15, -6, 10, 17, 15, 6, -10,-17] return movesKnight.includes(startId-targetId) I calculate the difference between startId and targetId

  26. I add a way to check the move of the rook with two rows const movesRook = [1, 2, 3, 4, 5, 6, 7, 8, 16, 24,32, 40, 48, 56, 64] return movesRook.includes(Math.abs(startId-targetId)) I subtract startId and targetId and I take the Math.abs

  27. I kinda hard time to push tru my code at draggable function and I can't figure it out why console.log(e) is isn't working.
    using webpack js

  28. i followed along to everything and when i finished, my pieces arent moving anymore. anyone know what the issue could be and where?

  29. Nice tutorial. What is the name of the font used?

  30. Very nice Keep it good work with JavaScript

  31. i see more assholes are jelous on her ! she is doing great work lets appreciate her hardwork behalf of criticizing or acting like too smart assholes

Leave a Reply

Your email address will not be published. Required fields are marked *