Dynamic Multiplication Table
This project was an early introduction to graphical user interfaces, getting me familiar with JavaScript, HTML and CSS basics while including important concepts like form validation, as well as dynamic and intractable web pages.
What?
The concept for the site is relatively simple, build a website that will create a multiplication table in real time based on the position of a slider in the range from -50 to 50, stopping users and providing a message when they go outside these bounds. Additionally, there should be a way for users to save the tables they create using tabs and a way for them to delete multiple or one tab at a time.
- Create a real-time multiplication table with a slider (-50 to 50).
- Display a message if users go outside bounds.
- Enable users to save tables using tabs.
- Allow deletion of multiple or single tabs.
Constraints:
Sliders
I used jQuery for the sliders because it has easy plugins for this application. The text boxes and sliders sync up: typing a number moves the slider, and moving the slider updates the text box. This keeps everything consistent and user-friendly.
Form Validation
I used jQuery and its plugins for form validation. Users get error messages if their number is out of range, not in the proper ratio, or if the field is left blank. The message explains the issue and how to fix it, and it appears right where the error happens.
Tabs
I used jQuery's tabs plugin to store users' previously created tables. By clicking the "Add Tab" button, users can save their current table. This is done by copying the HTML elements of the table and recreating it in the jQuery tab. The saved tables retain full functionality and are scrollable. Tabs are named with the table values, and users can delete a table with an "x" icon or select multiple tables for deletion.
Dynamic Change
The most crucial feature of this website was ensuring items update in real-time instantly when input parameters change. This was achieved using jQuery’s event handlers. When an input parameter changes, the form validation checks its validity. If valid, the old table is cleared, and a new one is created based on the updated inputs. Changes in either the text box or slider trigger this process immediately, ensuring no downtime between the user's input and the displayed result.