Path-finding Visualization With Just HTML, CSS & JavaScript

Motivation

Although I did go through a lot of tutorials and courses on the fundamentals of HTML, CSS & JavaScript when I started learning web development last year, my familiarity with the front end essentials is not at the level that I wish to be. I would like to think that with practice it will only get better. And what better to do than building projects that I think is cool.

I have always wanted to build a pathfinding visualizer that animates algorithms (I made a sorting visualizer some time ago). Recently, I have just started my Data structure & Algorithm class as a computer science student. So today, after watching this YouTube video on Dijkstra's algorithm, I decided to wait no longer and just start building a simple version of the pathfinding visualization.

Process

In the process I was able to revisit the following concepts:

1. CSS & HTML

   • CSS flexbox (for centering stuff)
   • CSS grid (to create the 10x10 grid)

2. JavaScript

   • querySelector & querySelectorAll (for selecting DOM elements)
   • setTimeout (to create animation effect)
   • createElement, getAttribute, setAttribute, appendChild (for modifying the DOM)

3. Algo

   • I wrote the code based on the video explanation of Dijkstra's algorithm, I am not 100% sure it is doing the right thing.

End Product

After some polishing to make it look better (in fact it took me quite some time 😂 to add in relevant CSS for this to be mobile friendly), you can see it in action on Codepen.

Feel free to check out the codebase in my Github Repo

Further Improvements

There are many things to be done for this. Just to name a few:

• Allow users to pick start/end points.
• Better visuals to convey the weight/difficulty between two nodes.
• Add in more algorithms (DFS, BFS, etc). I might do a part two for this when I am done with some of the above.

If you like reading this, please give it a like so that more people can see it.😄