ЁЯЫа

Pathfinder Visualizer: Day 1

Jul 16, 2024

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