Day 1: Making Pathfinder Visualizer

Introduction

• Overview of Pathfinder Visualizer project
• Brief demo of the functionality: drawing balls, visualizing search algorithms, finding the shortest path
• Algorithms included: BFS, A*, Maze Generation, among others
• Goal: Create a simple web app interface today*

Setting Up Project

• Created a folder named PathFinder on desktop
• Opened the folder in VS Code
• Files created: index.html, app.js, CSS folder with main.css and utility.css

HTML Structure

• Boilerplate HTML with title 'Path Finder'
• Reference project for layout
• Main components: Header and Board
  • Header contains Navbar and Guidebar
  • Navbar includes Logo, Button (Visualize), and Nav Menu
• Grid layout with two elements: header and board
• Navbar components: Logo (Path Finding Visualizer), Button (Visualize), Nav Menu with anchors (Clear Path, Algorithms)
• Dropdown structure for algorithms
• Linking CSS and JavaScript files

Basic CSS Styling

• General reset for elements: margin 0, padding 0, box-sizing border-box, etc.
• Body dimensions: width 100%, height 100% with a grid layout
• Styling for header and board: grid-template-rows and grid-gap
• Navbar flex styling: display flex, align items center, justify-content space between
• Color variables defined in :root
• Specific styling for Logo, Button, and Nav Menu
• Styling for dropdowns and ensuring dropdowns are hidden by default, visible on hover
• Responsive design considerations using media queries for screens smaller than 1000px

JavaScript and Dynamic Board Rendering

• JavaScript setup for dynamically rendering the board
• Board contains rows and columns, initially set to 20x20
• Render function: uses nested loops to create row and column elements
• Adds columns to rows and finally appends rows to the board
• Cell dimensions managed to maintain aspect ratio

Final Adjustments

• Added CSS for maintaining cell width and height, borders, and hover effects
• Ensured flex display for rows so cells align properly
• Dynamically adjusting row and column count based on container size using clientHeight and clientWidth
• Media query for responsive layout adjustments
• Adjustments to button styling, alignment, font weight, etc.
• Future work hinted: Active class handling, responsive dropdowns, etc.
• Next steps preview: Active class addition, dropdown management on clicks, finalizing design elements in upcoming sessions