Multiplication Chart

How to Use:

1. Set the Range:

   • Use the “Max Number” input to define the upper limit of the multiplication chart. For example, entering 20 will generate a 20×20 chart.

2. Choose Number System:

   • Select between Decimal, Binary, or Hexadecimal from the “Number System” dropdown to view the multiplication results in the chosen format.

3. Generate the Chart:

   • Click the “Generate Chart” button to create the multiplication table based on your selected parameters.

4. Toggle Theme:

   • Click the “Toggle Dark Mode” button to switch between light and dark themes for better visibility according to your preference.

5. Search for a Product:

   • Enter a specific number in the “Search” input and click “Find” to highlight all occurrences of that product within the chart.

6. Print the Chart:

   • Click the “Print Chart” button to print the current view of the multiplication chart.

7. Interactive Features:

   • Hovering over any cell will highlight the entire row and column, making it easier to trace the multiplication factors.
   • Keyboard Navigation: Use the Tab key to navigate through cells and press Enter to interact with them.

Customization:

• Adjusting Maximum Number:

  • The chart can handle up to 100x100 for extensive multiplication tables. Adjust the maximum number responsibly as larger tables might affect performance.

• Number Systems:

  • Extend the number systems by modifying the formatNumber function in the JavaScript section to include additional formats if needed.

• Styling:

  • Customize the appearance by modifying the CSS within the <style> tags. You can change colors, fonts, and layout to suit your preferences.

Accessibility Considerations:

• The chart is designed with accessibility in mind, including keyboard navigation and ARIA labels to assist users with disabilities.
• Ensure that color contrasts are sufficient, especially when toggling between themes, to accommodate users with visual impairments.