index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Algorithm Visualizer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Algorithm Visualizer</h1>
  <div id="speedControl">
    <label for="speedSlider">Speed:</label>
    <input type="range" id="speedSlider" min="1" max="100" value="50">
  </div>
  <canvas id="sortCanvas" width="800" height="400"></canvas>
  <div id="controls">
<select id="algoSelect">
  <option value="bubble">Bubble Sort</option>
  <option value="insertion">Insertion Sort</option>
  <option value="merge">Merge Sort</option>
  <option value="quick">Quick Sort</option>
</select>
  <button onclick="startSort()">Start</button>
  <button id="pauseBtn" onclick="togglePause()">Pause</button>
  <button onclick="generateArray()">New Array</button>
  <p id="sortComplexity"></p>
  <p id="stats">Comparisons: 0 | Swaps: 0</p>
</div>
  <h1>Pathfinding</h1>
<canvas id="gridCanvas" width="800" height="400"></canvas>

<div id="pathControls">
  <select id="pathAlgoSelect">
    <option value="bfs">BFS</option>
    <option value="dfs">DFS</option>
    <option value="dijkstra">Dijkstra</option>
    <option value="astar">A*</option>
  </select>
  <button onclick="startPathfinding()">Start</button>
  <button onclick="clearWalls()">Clear Walls</button>
  <button onclick="generateMaze()">Generate Random Maze</button>
  <button onclick="resetGrid()">Reset Grid</button>
  <p id="pathComplexity"></p>
  <p id="pathStats">Visited: 0 | Time: 0.00s</p>
</div>
  <script src="sorting.js"></script>
  <script src="pathfinding.js"></script>
</body>
</html>