Skip to content

A calculator built with React, Styled to look like a Pocket Operator

Notifications You must be signed in to change notification settings

john-farina/react-calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React JavaScript SASS


Pocket Calculator

A React made calculator styed to emulate the look of a Pocket Operator a handheld music maker.
View Live Demo

Table of Contents
  1. About The Project
  2. React
  3. Design
  4. Usage
  5. Contact
  6. Acknowledgments

About The Project

This is a React built calculator using state for updating, Run simple commands like a real non graphing calculator

Built With

  • JavaScript, React
  • SCSS

React

State

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

Math Equations

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.

Design

Inspiration

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

Screen & Top

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

Body

Buttons

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)

Category Lines

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

Dials

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.

Usage

To use the Pocket Calculator type in your equations like you would on a real calculator and press equals to see the result.

Contact

John Farina - [email protected]

My Website: johnfarina.co

Project Link: github.com/john-farina/react-calculator

(back to top)

About

A calculator built with React, Styled to look like a Pocket Operator

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published