Chess Game Using Html CSS And JavaScript - Part 12: Adding Move Navigation and Highlighting
In part 12 of the chess series, learn how to add navigation arrows that allow players to move back and forth between moves in a chess game. This video covers implementing functionality to navigate through the game's move history, as well as syncing these actions with the PGN (Portable Game Notation) display. When players click on a move in the PGN, the board will automatically update to show the position corresponding to that move.
Code:https://tinyurl.com/javascript-chess-...
Chess Pieces PNG Files:
White Pawn:By en:User:Cburnett - File:Chess plt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
Black Pawn:By en:User:Cburnett - File:Chess pdt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
White Knight:By en:User:Cburnett - File:Chess nlt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
Black Knight:By en:User:Cburnett - File:Chess ndt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
White Bishop:By en:User:Cburnett - File:Chess blt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
Black Bishop:By en:User:Cburnett - File:Chess bdt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
White Rook: By en:User:Cburnett - File:Chess rlt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
Black Rook: By en:User:Cburnett - File:Chess rdt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
White Queen:By en:User:Cburnett - File:Chess qlt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
Black Queen:By en:User:Cburnett - File:Chess qdt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
White King:By en:User:Cburnett - File:Chess klt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
Black King:By en:User:Cburnett - File:Chess kdt45.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index...
0:00 Introduction to Chess Game Using Html CSS And JavaScript - Part 12
1:31 Adding navigation buttons to the game interface
2:23 Assign IDs to moves for enabling navigation
3.14 Attach event listeners to the navigation buttons
5:07 Adding move highlighting
5:57 Applying styles to the newly added elements
