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

tlylt / path-finding-visualization

A path finding visualization mini-project for the article that I have written

You can read more about this project here

View on GitHub

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