Visualize an interactive multiplication table on your device.
Users should be able to:
- Recieve a firendly warning if they're previweing website on a non-desktop device (mobile, tablet, etc.).
- Hover over a number (table cell) or click on it if on a non-desktop device and have corresponding table cells highlighted to see the numbers that make up the multiplication.
- Semantic HTML
- Vanilla CSS
- Vanilla JavaScript
- How to apply side effects on dynamic, sibling UI elements.
- How to detect the type of user agent's device (desktop/non-desktop).
- How to implement a multiplication table with dynamically generated cells.
All you need to do is to clone the project:
git clone https://github.com/ShayanTheNerd/multiplication-table.gitAlternatively, you can copy the source of the project directly to your local environment using Degit:
pnpm i -g degit
degit https://github.com/ShayanTheNerd/multiplication-table new-project-folderNow, you can preview it on a local server of your choice. My personal recommendation is the Live Server Extension.
Before deploying the project or creating a new pull request, format all files and make sure there are no errors.
If you want to develop this project, please stick to these rules:
- Follow the current architecture, coding paradigm, and project folder structure.
- Follow the current character case principals for ids, classes, variables, file and folder names, etc.
- Code based on the current libraries, frameworks, and packages included in the project.
- Make sure to use BEM methodology for naming custom CSS classes.
- In case you need to access an HTML element in JavaScript by a class name, prefix the class name with
js-. For example,js-submit-btn. - Add Git commit messages considering Conventional Commits.
Your contribution is always welcome, please follow these steps:
- Fork the project.
- Create your feature branch:
git checkout -b feature/branch-name. - Make sure to follow instructions in the style guide section.
- Stage all changes you made:
git add -A. - Commit all staged changes with a descriptive commit message:
git commit -m 'feat: add foo bar baz'. - Push everything to your feature branch:
git push origin feature/branch-name. - Create a new Pull Request.
This project is licensed under MIT license. You're free to use it, but a link to this page and mentioning the author's name is mandatory. Created by Shayan Zamani.