Pathfinding Visualizer

• Welcome to my pathfinding visualizer project! Access the live demo here.

• This project was inspired by Clement Mihailescu's project of the same name (see his YouTube channel here) and CS50's Introduction to Artificial Intelligence with Python.

Features

• Search Algorithms:

  • Depth-First Search
  • Breadth-First Search
  • Greedy Best-First Search
  • A* Search
  • Dijkstra's algorithm

• Draw own path by clicking and dragging

• Speed Adjustment:

  • Slow
  • Medium
  • Fast

Some Helpful Things I Learned:

• How to provide each div (in this case, each cell in the grid) with an id containing its respective coordinate.
• How to use querySelectorAll to retrieve direct children
• Javascript arrays are objects and you can't simply use the equality operator == to understand if the content of those objects is the same. The equality operator will only test if two OBJECTS are exactly the same instance (e.g., myObjVariable==myObjVariable, works for null and undefined too).
• To check if an element contains a class, you use the contains() method of the classList property of the element. (e.g., element.classList.contains(className))
• How to convert a set into an array (Helpful link)
• Figured out how to "click then drag" on a grid to fill in the background color of the target cells. This just involves using 'mousedown' and 'mouseover'.
• How to use ternary operators
• How to use classes to keep track of a node's parents. (Learning this lesson proved to be a crucial part of finding the shortest path using the DFS algorithm.)
• The basics of Webpack (Helpful link)
• How to load CSS with Webpack (Helpful Link)
• How to deploy a bundled JavaScript project to GitHub pages (Helpful link)