Post main image

Accessible React Calculator

Calculator App with a strong accessibility focus

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, adding text-to-speech functionality using Amazon Polly # How to use it. ## Normal operation 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. Special Keys: Enter => '=' delete/backspace => 'AC' _ => '+/-' / => Division symbol * or x => Multiplication Symbol ## Activate Text to Speech functionality: 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. ## Change text to speech-language : Spanish / English 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. Push To Talk functionality: PTT 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. demo link: https://anriquez-calculator.netlify.app/

Video demo
Screenshots
Project screenshot 1
Comment post

Skip straight to final coding interviews with
Remote Companies!

Top Makers

Most active posts

Top projects