Skip to main content

Path-finding Visualization With Just HTML, CSS & JavaScript

· 2 min read

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)
  1. JavaScript
  • querySelector & querySelectorAll (for selecting DOM elements)
  • setTimeout (to create animation effect)
  • createElement, getAttribute, setAttribute, appendChild (for modifying the DOM)
  1. 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. Screenshot

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.😄