For the purpose of this year's University project for the subject called Client Web Technologies I decided to include Data structures and algorithms as well and create visualizer for Pathfinding algorithms. I was working on this project for about a week while having other duties at the same time as well, but the final result was especially nice and I enjoyed presenting the project.
Throughout this journey, I discovered not only the joy of learning and implementing complex concepts but also the gratification that comes from seeing one's vision take shape. This project has left an indelible mark on my academic journey, shaping me into a more confident and resourceful individual.
As other bigger projects out there that require working with different technologies and languages, this project is separated into 6 different directories based on files stored in them:
- HTMLs - for HTML files
- StyleSheets - for CSS files
- Scripts - for JavaScript files
- XMLs - for XML files
- GenerateXML - for Python files used to generate XML files automatically
- Images - for images used in project
Paths specified in project are all relative so, as long as the structure is kept the same way, there should not be any problem.
After loading index.html page user is asked to log in using the form and is not asked to log in again as long as the Logout button is not clicked. (In order to achieve this I used session storage)
Home page displayed after login showcasing key features that I implemented:
This was the main reason why I started this project. The visualizer itself took the most time and effort to make and is definately the most animated feature in the whole project. After choosing the algorithm to use in order to find the path the search begins and is displayed step by step to users, starting from the start square.
Option to choose from already created mazes:
This option is supported with AJAX and squares that represent walls are loaded from an XML file. However, there is also support for drawing on the board to create walls that way as well.
Finding path and showing it to the user if one exists:
As long as these images show the main concepts and key features I planned to implement, they are not everything that I actually implemented 😄 For the full look into the project feel free to download it and try yourself. It shouldn't be complicated and I believe that it is going to work just fine.
For any additional info and suggestions I am available at any time. Feel free to contact me using the tab inside the project where you can find my email and LinkedIn profile 😊
