A React made calculator styed to emulate the look of a Pocket Operator a handheld music maker.
View Live Demo
Table of Contents
This is a React built calculator using state for updating, Run simple commands like a real non graphing calculator
- JavaScript, React
- SCSS
I used 3 Main States in this project the first state is a string that is inputted by the user, I used a string because the ease of use for adding a number directly after.
The Second would be the total which is a number and this is where all numbers are saved and where the equations get saved into, and then changed back into a string to display.
The Third is a string that keeps track of which Sign user has clicked so when equal is pressed the math can be done properly.
After user has typed in their number I Parse it and which converts it to a number and waits to complete the Operation when the user to press Equals
All equations are solved using JavaScript by taking the parsed state string, and checking what user wants. When the user presses an equation the First string gets parsed and sent into the total, waiting for the second string. After the second string is typed it Parses that number and adds it to the total state, which then converts the total state into a string for the User to view.
this project was inspired by the look of Pocket Operators by Teenage Engineering, which look like this
I really like this look because it already almost looks like a calculator. And I tried to get as close as I could to re-creating the look and feel
For the top of the Pocket calculator it has a very distinct look that I had to nail on the browser, so I created a rectangle div and added a border radius, and then put a smaller rectangle inside that is the same color as the background, To create a hole. I then put the Logo on the top.
The screen was made by putting a screen texture over a div. The result on doing this I found is very good and adds a lot to the project, For the background 8's I made these to try to recreate the look of an old calculator how u can see the 8's when they aren't on. This was done by changing the opacity and putting it in the background behind the main state String.
The little knobs at the top and bottom of the screen was created using divs and was made to look like open circuitry like the Pocket Operator
The Buttons on a Pocket Operator have a very specific look, So I again tried to recreate it as well as possible. The Dashed lines behind some buttons are created with a CSS gradient that goes for 1px at a degree to create a dash line inside a circle div.
Red lights will flash when u click each button trying to emulate the Pocket Operator even more so. (The icons around some buttons are SVGs and positioned with CSS)
The Category Lines where made with 3 divs inside of one, with the lines going up and down only had a top border, and a right or left depending on what side with text in between. I then rotated it 90 degrees and positioned it in the corresponding place
The spinning dials on the body are purely aesthetic and are only there because it is a important part on a pocket operator. Each dial will revert to a random position when opening, setting a random degree every time. When you click it, it adds a CSS animation style to it and spins.
To use the Pocket Calculator type in your equations like you would on a real calculator and press equals to see the result.
John Farina - [email protected]
My Website: johnfarina.co
Project Link: github.com/john-farina/react-calculator