ShayanTheNerd / virtual-keyboard-PWA

An elegant virtual keyboard web app with typing animation and keypress sound effect.

Virtual Keyboard PWA

An elegant virtual keyboard web app with typing animation and keypress sound effect.

Overview

The challenge

Users should be able to:

• Receive a firendly warning if they're previweing website on a non-desktop device
• Have the theme match up with their system preference and toggle it manually
• Hear a keyboard keypress sound effect as they type, and also switch it off if they wish
• Install the website as a progressive web app (PWA) and use it offline

Links

• Project homepage
• GitHub repository
• Issues
• Pull requests
• My other projects

My process

Built with:

• Semantic HTML
• Tailwind CSS - Styling
• Vanilla JavaScript

I learned:

• How PWAs work and how to implement one
• How to detect caps lock state and react to it
• How to simulate virtual typing by manipulating the text inside a text box
• How to dynamically generate HTML fragments while also handling exceptions
• How to handle theme switching (manually/automatically) and detecting user's preference

Development setup

1. First, you need to clone the project:

git clone https://github.com/ShayanTheNerd/virtual-keyboard-PWA.git

Alternatively, you can copy the source of the project directly to your local environment using Degit:

pnpm i -g degit

degit https://github.com/ShayanTheNerd/virtual-keyboard-PWA new-project-folder

2. Then, install required packages:

pnpm i

3. Finally, run the dev script to start the dev server:

pnpm run dev

Now, you can preview the project on a local server of your choice. I recommend using the Live Server Extension.

Deployment and production

Before deploying the project or creating a new pull request, run the following commands and make sure there are no errors:

pnpm run format

pnpm run build

Style Guide

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.
• For styling, utilize Tailwind's features as much as possible, but also 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.

Contribution

Your contribution is always welcome, please follow these steps:

1. Fork the project.
2. Create your feature branch: git checkout -b feature/branch-name.
3. Make sure to follow instructions in the style guide section.
4. Stage all changes you made: git add -A.
5. Commit all staged changes with a descriptive commit message: git commit -m '✨ feat: add foo bar baz'.
6. Push everything to your feature branch: git push origin feature/branch-name.
7. Create a new Pull Request.

License

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.

back to top ⬆️