chavi362 / virtual-keyboard Goto Github PK
View Code? Open in Web Editor NEWvirtual keyboard built with React
License: Other
virtual keyboard built with React
License: Other
Add a description for each emoji in the imojies arrays, and add a saearch input that when change the fitting imujie will display
Holding shift does not let you use capitals on the keyboard.
Now the code is very bigger.
If you can update some function to be generic. Or you find repeated code, you can submit a PR on this!
Note that the code should work the same as before and be readable and efficient !
The current implementation relies heavily on alert popups for user interaction, which might disrupt the user flow and provide a less-than-optimal experience. To enhance the user experience and maintain a smooth workflow, I propose implementing modals in place of these alert popups.
Hello, @chavi362 .
Today, when I updated the local project with the remote repository, it didn't work.
I found an error in the browser console.:
Now all language has a array and placeholder[x] when we have many languages, it becomes really messy.
Another problem is that there many languages that have symbols that seen only when shift pressed.
Also, I feel that the useState for placeholder is unnecessary.
So, I would like to have another file that have Map that its key will be the language's name and the data for each item will be array of object that will keep for each char the regualr char and the shift char and also the placeholder.
And each component that need it(screen and keyboard) will get the language as a prop and import the Map for taking the fit data.
When change all style active the under score button should add under score to all the text on the screen but it doesn' work as excepted
Current now we have tab but it's not do anything
As you can see, the readme is not so arranged.
Not all the links above work, the contributing in in the bash, the npm install isn't into a bash, and I want also to tell user to run npm run dev after it.
Also, I want to have link to the code of conduct and the license.
I want also to add in project structure explanation for all the components and not only for 3
Adding in specialbuttons.jsx a button of copy and a button of paste
When clicking copy it will copy all the text so you can paste or in the screen or in another place in the computer.
When clicking paste it will paste the text you copy or a text you copy from another place.
Good Luck!!!
In the font sie selector the user can change the text box and delete the px.
Mabey you can change it to nummary up down or select so the user can't change the px.
I want that it will be like the option to choose font size in Microsoft Word.
Hello @chavi362 .
I would like to add the Spanish language.
This task is both straightforward and enjoyable! Follow these simple steps to add your language to the Virtual Keyboard:
Navigate to langugeData.js and find the langugeData array.
Add all the necessary data for your language, including its name, translated name, placeholder, etc.
(The shift array should be the characters the user have when he clicks shift/capslock /contro+shift,= and other kinds of buttons that give the special characters)
Please note to add the characters array in the order they are in the real keyboard)
Run the application and verify that everything works seamlessly with the new language.
Don't forget to update the README file to include information about the newly added language.
Note that for this issue you don't have to write in the description solution for #.. because we don't want to close the issue
Good luck, and thank you for contributing to the Virtual Keyboard project! If you encounter any issues or have questions, feel free to reach out. Happy coding!
Now we have only two option to change the style: one is to change all text style which is like control-a and another one is to change the text from now. I want to have an option to highlight part of the text and thus change only it
Hello team,
I hope this message finds you well. I am writing to propose a transition from using Redux Toolkit to utilizing the useReducer hook in our virtual-keyboard component.
Current Setup:
As of now, we have integrated Redux Toolkit to manage a single action, which is to add color to one of the keyboard buttons when it is clicked, either in the virtual keyboard or on the physical keyboard. The majority of the state is handled by UseReducer within the virtual keyboard component.
Proposal:
I suggest we transition also the add color to use the useReducer hook instead of relying on Redux Toolkit. The virtual-keyboard component is relatively small, and for components with straightforward state management needs, useReducer can offer a more direct and concise solution. This change would involve refactoring our current implementation to utilize the useReducer hook, and the state data would be delivered to the components as props.
So, if you want to pick this issue, please change also the add-color function to the useReducer in the virtual keyboard component
If there are concerns or if anyone believes that Redux Toolkit is a more suitable choice for our specific use case, I am open to discussion. Please share your thoughts, and we can collectively decide whether to proceed with transitioning everything to useReducer or to maintain the current Redux Toolkit implementation.
I appreciate your time and consideration on this matter.
Chavi
Currently, we have two unnecessary useState, Also the redoStuck is not inside the function virtualKeyboard and i's not profession.
I want to arrange the code and remove this unnecessary useState. My goal that the code will be the most clean and effecient.
Maybe we can use seprate stuck for all the operations and the text will be in an string.
Please think how to implement this.
Good Luck!
Please update the snapshot in the Demo to the current version of the keyboard
When you click delete all you will be asked if you sure you want to delete all in a pop up window, but as you can see it's a little bit wide.
This task is both straightforward and enjoyable! Follow these simple steps to add your language to the Virtual Keyboard:
Navigate to langugeData.js and find the langugeData array.
Add all the necessary data for your language, including its name, translated name, placeholder, etc.
(The shift array should be the characters the user have when he clicks shift)
Please note to add the characters array in the order they are in the real keyboard)
Run the application and verify that everything works seamlessly with the new language.
Don't forget to update the README file to include information about the newly added language.
Good luck, and thank you for contributing to the Virtual Keyboard project! If you encounter any issues or have questions, feel free to reach out. Happy coding!
Hello @chavi362 .
I would like to add the Brazilian Portuguese language.
hey, I'm new to open source projects so I apologise if I'm doing anything wrong. I noticed all buttons are using default styling, in some places they blend in making it harder for people with sight problems to see. the "upper" all button also has a bug that makes the button and colour selector bigger. also if possible could I also modify hover effects and active effects.
Description:
Improving the accessibility features of the Virtual Keyboard. The proposed enhancements include:
Accessibility Button:
Add a dedicated button for accessibility options.
Options can include settings to enhance usability for individuals with different accessibility needs.
Screen Reader Compatibility:
Implement features to ensure compatibility with screen readers.
Make necessary adjustments so that the Virtual Keyboard is fully accessible and readable by screen reader software.
Tasks:
Design and implement an accessibility button.
Incorporate options within the accessibility menu for various accessibility needs.
Ensure that the Virtual Keyboard is compatible with screen readers.
Steps to Reproduce:
Enable accessibility mode using the dedicated button.
Test the various accessibility options provided.
Verify that the Virtual Keyboard is fully compatible with popular screen reader software.
Additional Information:
Feel free to reach out for any clarification or guidance during the development process.
Note to Contributors:
Thank you for contributing to our project! Let's work together to make the Virtual Keyboard accessible to a wider audience. If you have any questions or need assistance, don't hesitate to ask.
Currently, the Style Selector component provides a great set of options for customizing text style. However, an additional enhancement can be made to include text alignment options such as left, right, and center.
Add something like that
that when hovering will intraduct also the two other options and when clicking on this the text-aligment will change.
You also will have to update the letterStyle class.
Good Luck
When hovering redo appear redo and paste- paste, etc.
Hello.
The list of supported languages for the project needs to be updated.
Add also the redux files and explain in one sentence what they do.
Changing the existing Redux code to use Redux Toolkit is not particularly difficult and can often result in cleaner and more concise code. Redux Toolkit is designed to simplify common Redux patterns and reduce boilerplate.
When you click shift you get an error
All the images should be in assets/ the assets shouldn't exist
remove the react icon it's needed.
Please make sure you're updating all the file paths in the project and update the project structure in readme
adding to the emojis keyboard more emojis and dividing them to categories such us: people, food,activities, symboles, whatever.
Then adding the option to chose which category to use and adding an option for search.
I want that it would be the same idea to windows emojis(when you type windows+;)
If you have more questions, please let me know.
Good Luck ๐ค
When you click the enter button it add space to the text in the screen instead of enter.
despite the fact that the enter button send to the handleButtonClick function /n.
In order to solve this you have to understand the components: VirtualKeyboard, Keybourd, and screen.
I want that also if the user type in its regular keyboard in his computer the screen in the virtual keyboard will display what he types.
I want that also the user can see in the buttons of the virtual keyboard when he types a button in the regular. For example when he types 'a' the button of 'a' in the virtual colored like it colored when it's hoverd.
Hello @chavi362 , how are you?
What do you think if I make a Rest API to connect to the keyboard and store the characters and emojis in the database?
In the future we may also store custom user configurations(colors, fonts) and data.
Hi, I found problem in the code!
Change language by the button doesnt change the key's language
please fix it up...
Note that the lower all and upper all aren't in the same size . Also the underline button is alone without anything button and all of that don't look good
Hi, @chavi362 .
What do you think about creating hooks to encapsulate the logic of the components, leaving them free to just render the information?
I created two example hooks for you to analyze.
Before delete all the virtual keyboard asks the user to confirm that he want to delete all the text.
provide suitable text and you may style it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.