Explore • Learn • Compute • Visualize algorithms in real-time
Click to expand
|
|
|
|
Get AlgoLabs running locally in seconds:
# Clone the repository
git clone https://github.com/ManjunathDharappanavar/AlgoLabs.git
# Navigate to project directory
cd AlgoLabs
# Open in your browser
# Simply open index.html in any modern web browser
# Or use a local server:
python -m http.server 8000
# Then visit: http://localhost:8000
The application currently supports four fundamental algorithms:
Reverses the digits of any integer input
Input: 12345
Output: 54321
Computes the factorial of a given number
Input: 5
Output: 120 (5! = 5 × 4 × 3 × 2 × 1)
Generates the Fibonacci sequence up to n terms
Input: 7
Output: 0, 1, 1, 2, 3, 5, 8
Determines whether a number is prime or composite
Input: 17
Output: Prime
- Launch the application by opening
index.htmlin your web browser - Navigate to the Algorithms section using the "Start Exploring" button or menu
- Select an algorithm by clicking on any algorithm card
- Enter your input in the modal dialog that appears
- Click "Run" to execute the algorithm and view results
🎛️ User Interface Components
Hero Section:
- Welcome message and project description
- Call-to-action button for quick navigation
- Responsive hamburger menu for mobile devices
Algorithm Grid:
- Four algorithm cards with clear labeling
- Hover effects and interactive elements
- Modal-based input system for clean user experience
Modal Dialog:
- Input field with number validation
- Run button for algorithm execution
- Results display area with clear formatting
- Close button for easy navigation
The application includes robust input validation to ensure reliable algorithm execution. All inputs are validated as numeric values, and appropriate error messages are displayed for invalid entries.
AlgoLabs/
├── index.html # Main HTML structure
├── styles.css # Complete CSS styling
├── script.js # JavaScript functionality
└── README.md # Project documentation
Color Scheme:
- Primary: Slateblue (#6A5ACD) for headers and interactive elements
- Secondary: Alice Blue for text and contrasts
- Accent: Pink for call-to-action buttons
Typography:
- Font Family: Libertinus Mono for a clean, technical appearance
- Google Material Symbols for consistent iconography
- Responsive font sizing for optimal readability
Modal System:
- Overlay-based dialog boxes for algorithm interaction
- Smooth transitions and professional styling
- Accessible close mechanisms
Responsive Navigation:
- Hover-activated menu system
- Mobile-optimized hamburger menu
- Smooth scrolling between sections
The application is fully responsive and optimized for various screen sizes:
Desktop Experience:
- Full-width hero section with large typography
- Grid-based algorithm layout with adequate spacing
- Hover effects and smooth transitions
Mobile Experience:
- Stacked algorithm cards for easy touch interaction
- Scaled navigation elements for finger-friendly use
- Optimized modal sizing for smaller screens
Media Query Breakpoints:
- Mobile devices: 480px and below
- Automatic layout adjustments for optimal usability
We welcome contributions to enhance AlgoLabs with additional algorithms and features. Here's how you can contribute:
- Fork the repository to your GitHub account
- Clone your fork locally:
git clone https://github.com/yourusername/AlgoLabs.git - Create a feature branch:
git checkout -b feature/new-algorithm - Implement your changes following the existing code structure
- Test thoroughly across different browsers and devices
- Commit with descriptive messages:
git commit -m 'Add bubble sort algorithm' - Push your changes:
git push origin feature/new-algorithm - Submit a pull request with detailed description
To add a new algorithm to AlgoLabs:
- Update HTML: Add a new algorithm card in the
.algo-containersection - Update JavaScript: Add the algorithm case in the
runAlgorithm()switch statement - Test Implementation: Ensure proper input validation and result formatting
- Update Documentation: Add algorithm description to this README
HTML Structure:
- Use semantic HTML5 elements
- Maintain consistent indentation
- Include appropriate accessibility attributes
CSS Styling:
- Follow existing naming conventions
- Maintain responsive design principles
- Use consistent spacing and color schemes
JavaScript Functionality:
- Implement proper error handling
- Use clear variable and function names
- Include input validation for all algorithms
Potential improvements and additions for AlgoLabs:
Algorithm Expansion:
- Sorting algorithms (Bubble Sort, Quick Sort, Merge Sort)
- Search algorithms (Binary Search, Linear Search)
- Graph algorithms (BFS, DFS)
- String manipulation algorithms
Feature Additions:
- Step-by-step algorithm visualization
- Performance timing measurements
- Algorithm complexity information
- Code snippet display for educational purposes
Technical Improvements:
- Local storage for input history
- Keyboard shortcuts for power users
- Enhanced accessibility features
- Progressive Web App capabilities
This project is open source
Built with passion for computer science education
Fonts and Icons:
- Google Fonts for the Libertinus Mono typeface
- Google Material Symbols for consistent iconography
Educational Value:
- Classic computer science algorithms implementation
- Interactive learning approach for algorithm understanding
Design Philosophy:
- Clean, minimal interface design
- Focus on functionality and user experience
- Educational accessibility for learners at all levels
