This workshop project explores the algorithmic complexities (speed and memory) of determining which two diagonals (major and minor) on a chessboard to highlight based on which tile in the board is clicked. The spirit of the workshop is to explore the tradeoffs of various optimization strategies.

In standard chessboard terminology, the "major" diagonals go from top-left to bottom-right (aka "northwest" to "southeast"), whereas the "minor diagonals" go from top-right to bottom-left (aka "northeast" to "southwest").

Every tile belongs to exactly two such diagonals. For the 4 corner tiles, one of their diagonals has only that single corner tile in it -- but that's still considered a (albeit trivial) diagonal.

1. Check out the start-here branch.

2. Consult the app.js module for the app logic already implemented:

   • Calls Chessboard.draw(..) to draw the chessboard.

   • Sets up an event listener for clicks on the board.

   • Calls Chessboard.highlight(..) to highlight diagonals for a given tile (DOM element).

3. Now consult the chessboard.js module for the algorithm logic to be implemented (look for the TODO comments):

   • The draw(..) function accepts a root DOM element for the chessboard, and creates the 8 rows and 64 tiles (8 tiles each in row) as child DOM elements (divs) inside this root element. According to the needs of your solution, this function may also perform other operations or track other information.

   • The highlight(..) function accepts a tile's DOM element (that's been clicked on) and finds all the tiles in its two diagonals (major and minor) to highlight (via a CSS class). If this function is called with no argument, it just clears the previous highlights.

4. When you're ready, or if you get stuck in your own implementation, check out the option-1, option-2, option-3, and option-4 branches and compare your solution to the ones provided.

Develop a test plan and suite of tests to verify the Chessboard module's functionality.

The app should be run in a local web server and accessed in a browser such as at http://localhost:8080 (or whatever port you prefer).

If you have any recent node/npm installed on your system, you can switch into the workshop project directory, and run a command like this:

npx http-server ./ -p 8080

That should start up a simple static file server in that current working directory and bind it to localhost on the port number as specified.

This particular problem was posed by Suni Puri and others from devKode, and brought to my attention by his Linked In post, as part of their #TheDOMChallenge event -- a series of exercises designed to prepare candidates for job interviews.

This repository is part of my "Thinking & Coding Algorithms" workshop, which has been presented at a number of public JS/web conferences, as well as for private corporate training engagements. In addition, it is included in my Frontend Masters course on algorithms and data structures.

Please note that as this material evolves/improves over time, there may be changes to the branch names (e.g., "Option-1", "Option-2b", etc) to make room for these changes while preserving (as much as possible) the repository state as presented in various different workshops. When that current state appears to have diverged, please consult the git commit history to access older versions of files/resources.

All code and documentation are (c) 2021 Kyle Simpson and released under the MIT License. A copy of the MIT License is also included.