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:
Twitter:
Instagram:
Can u plz share your coding journey ???l where u start something like that….that would be great to hear …🥰
Bad code structure, you can't write tests. Shitcode.
Ok you did the visual part of the game, now please work on the AI part under the hood😁
Thank you loved this lesson
Can you make series on DJANGO web development
😘😘😘❤️❤️🙂🙂
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
the first game is pong
thanks again eres lo maximo!!!
Excellent Video. Very nice explanation. Learned a lot. Nice application design.
plus plus plus plus minus minus minus but this was great to follow ! Thanks Ania
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.
evey single time i watch your video I feel professional
Obviously, you never played chess lol.
It a nice coding journey filled with logic and conditions ! Thank you so much !
The black pawn taking the white pawn like in checkers killed me 😂😂
https://youtu.be/Qv0fvm5B0EM?t=24
Ania is so hot. I can’t really concentrate learning from this channel lol
nice code :"D if pawn eat king – win, wtf this video ;ss;;s
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.
@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 🙂
WTH 0:24
beige and brown?? That’s grey and red. Are you colorblind by chance?
Wow!
👍👍👍
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.
1:19
4:10
ChatGPT…
content zmieniles?
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}"]`)
.firstChild)
) {
return true;
}
break;
Oi será possivel você criar um App usando Ionic + Angular
Thanks a lot…. i followed along it was great… lots of conditional statements
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
hellooo, for some reason i can only drop onto other pieces, and not squares,,, how would i fix this?
Красивая и умная. Это большая редкость.
24:05
(Super simple!)
Github link ??
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.
😍 mi crush
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
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
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
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
i followed along to everything and when i finished, my pieces arent moving anymore. anyone know what the issue could be and where?
32:11 Chrome Dev Tools is on the FRITZ
Nice tutorial. What is the name of the font used?
Very nice Keep it good work with JavaScript
wooow ❤
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
Best tutorial with the most beautiful teacher!