Git Product home page Git Product logo

calculator's Introduction

Calculator

Link to calculator

Technical Decisions

  • Chunking out the calculator into small components (Button, Buttons, Screen, Calculator) - keeps code more readable, more reusable, and is just a good programming practice.
  • The calculation is made by making a function to translate the equation from an infix to a postfix expression, and then evaluating the postfix expression. - allowing me to more easily account for parentheses. There may have been more efficient ways to do the actual calculation, such as using a parsing library, but it was a fun algorithm to implement, and hopefully shows more technicality.
  • Using the “button” object consisting of a “name” and “val”, this was used throughout the project. I wanted to keep this object simple and informative. I considere*d just using “val” but an edge case was that the minus sign and negative are the same, otherwise I would have used a function and/or regex to determine what button was pressed, and subsequently what the terms in the equation are.
  • As the user presses buttons, the button objects are stored in an array called “equation”. The buttons array was kept because I later used it to style different pieces of the expression.

Design Decisons

The calculator is user friendly, increasing the complexity of the code.

  • The input of the users is controlled to stop users from making mistakes - if I were to continue this project I would add error messages for the user (right now I’m just console.logging it. I thought about throwing an error, but my understanding is that error messages are not used for user errors.
  • There is a function to determine which parentheses, open or closing, should be used in different scenarios, making it so that the user can just click the “( )” button, reducing cognitive strain on the user.
  • Some smaller features are included, such as when a user hits a “(“ after a “)” the code automatically prepends a “x”.
  • Results are constantly updated for the user to create a good user experience.
  • The buttons are styled to feel like you are pushing down the button on a physical calculator.

Extending Code

I have a lot of smaller things I would work on if continuing this project, but here are some of the bigger ones:

  • Taking a lot of the code in “Calculator.js” and modify it to use two classes. A “Calculate” class and a “Parentheses” class. This would help to better encapsulate the logic that these two areas of the code entail, along with slimming down the code in “Calculator.js”. As opposed to class based React, functional React is the more common version of React that developers use, so that’s how I’ve trained myself to think in React. Because of this, I find it slightly confusing to combine functional react with classes, but through working on this project I could see just how helpful sending some of the logic to a class would have been.
  • I would chunk out the logic more, and add more helper functions.
  • Commenting th code better, along with documenting the schema for the Calculator.

calculator's People

Contributors

zlederma avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.