Accessibility focused basic React calculator bootstrapped with create-react-app

Live Demo Link

• Calculator App with a strong focus on accessibility built with React.js. Practicing React Component classes, states, props, and AWS Polly.
• This project is far from perfect. I decided to practice some basic ideas about accessibility by implementing full control via keyboard/mouse.
• This project is also a practice implementation for the AWS service Amazon Polly

• You can use the calculator by clicking on the buttons or touch screen device as a standard calculator.
• You can key the numbers and operations using the keyboard.

• Enter => '='
• delete/backspace => 'AC'
• _ => '+/-'
• / => Division symbol
• * or x => Multiplication Symbol

• Touch/Click: Speech function is activated clicking/touching the button Speech.
• Keyboard: Typing the key 's' (lower case)
• On activation, you will hear a voice with an activation message en English (default language).
• A Icon will appear on display to indicate the Text to Speech activation.

• Touch/Click: on buttons En or Sp for language toggling.
• Keyboard: Typing the key 'l' (lower case) for language toggling.
• On Toggling, you will hear a voice on the selected language. The proper Icons will appear on Display.

• Touch/Click: on PTT button for PTT function activation.
• Keyboard: Typing the key 'p' (lower case) for the push to talk function.
• On activation, this function will read out loud the Display contents.
• A similar effect can be achieved by using the '=' sign.

• React.js, Webpack, Babel
• HTML5/CSS3, Javascript ES6
• ESlint, Stylelint
• VSCode
• AWS Polly

This project was bootstrapped with Create React App.

To get a local copy up and running, follow these simple example steps.

• Create a .env file in the root of the project and include your own AWS Amazon Polly credentials. YOu can use as reference the file included in the repo .env.example

REACT_APP_AWS_ACCESS_KEY_ID = ''
REACT_APP_AWS_SECRET_ACCESS_KEY = ''

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

👤 Carlos Anriquez

• Github: @canriquez
• Twitter: @cranriquez
• Linkedin: linkedin
• Portfolio: carlosanriquez.com

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Give a ⭐️ if you like this project!

• My Family
• The Beagles!

This project is MIT licensed.