# 🧭 Pathfinding Visualizer

An interactive **Pathfinding Visualizer** built using **HTML, CSS, and JavaScript** to understand how different pathfinding and graph traversal algorithms work on a grid.

This project helped me learn how algorithms behave visually rather than just memorizing theory.

---

## 🚀 Features

- Interactive grid with start and end nodes
- Create walls/obstacles by clicking on the grid
- Visualize different pathfinding algorithms step-by-step
- Clear grid and reset anytime
- Simple and clean UI for easy understanding

---

## 🧠 Algorithms Implemented

- **Breadth First Search (BFS)**  
  Finds the shortest path in an unweighted grid.

- **Depth First Search (DFS)**  
  Explores deeply first and does not always guarantee the shortest path.

- **Dijkstra’s Algorithm**  
  Guarantees the shortest path using distance calculation.

- **A\* Algorithm**  
  Optimized version of Dijkstra using heuristics for faster performance.

---

## 📸 Screenshots

### 🔹 User Interface
![UI](images/ui.png)

### 🔹 Breadth First Search (BFS)
![BFS](images/bfs.png)

### 🔹 Depth First Search (DFS)
![DFS](images/dfs.png)

### 🔹 Dijkstra’s Algorithm
![Dijkstra](images/dijkstra.png)

### 🔹 A* Algorithm
![A*](images/astar.png)

### 🔹 Wall Creation
![Walls](images/walls.png)

---

## 🛠 Tech Stack

- **HTML** – Structure of the application  
- **CSS** – Styling and animations  
- **JavaScript** – Algorithm logic and visualization  

No external libraries were used.

---

## 💡 What I Learned

- How different pathfinding algorithms actually work internally
- Difference between traversal and shortest-path algorithms
- Importance of visualization in understanding algorithms
- Managing UI state using JavaScript
- Writing cleaner and modular code

---

## ▶️ How to Run Locally

1. Clone the repository:
   ```bash
   git clone https://github.com/Geetika2006/pathFindingVisualizerPract.git