Giter VIP home page Giter VIP logo

all-in-one-calculator's Introduction

All-in-one-calculator

Our deployed app link

About This App

This calculator contains of:

  • Basic calculator(With iphone calculater design)
  • Currency Converter
  • Loan Calculator
  • Unit Converter Each page is a seperate app and main app holds all routes by using React Routes.

App Set-up

  • yarn create-react-app calculator
  • cd calculator
  • yarn start

Home page and Menu bar

Home page contains a short video from https://www.pexels.com/search/calculator/

and Menu bar contains links to all pages and icons used from https://react-icons.github.io/react-icons/

Basic calculator

Basic calculator has an app file called Calculator and Button compenent

  • add, subtract, multiply, divide
  • support decimal values
  • calculate percentages
  • invert values
  • reset functionality
  • format larger numbers
  • output resize based on length

I used npm install react-textfit --save to fit text in Callculator screen

Currency converter

Currency converter has an app called CurrencyConverter with currencyCodes file

Get the exchange rate between two currencies and gives the given amount converted to the currency selected.

The converter uses the API https://www.currencyconverterapi.com/ which updates the values every hour.

In order to use this API you need to get an API key, and I made a proxy server https://github.com/mctagle/Proxy-server-Currency-Converter to hide the API key

from github in the development process.

  • Amount

  • From currency

  • To currency

  • Converted amount

  • used axios for Currency API

  • I used React drop down by yarn add react-dropdown

and imported to file import Dropdown from "react-dropdown"; and import 'react-dropdown/style.css';

  • Numeral takes numbers or strings that it trys to convert into a number.

I used Numeral by yarn add numeral and imported in file import numeral from 'numeral';

Syntax for Numeral => numeral(payment).format("$0,0.00")

loan calculator

Loan Calculator has an app file called LoanCalcaulator and LoanForm component

  • Purchased Price
  • Down Payment
  • Loan Term(years)
  • APR(%)

out put is calculated using this formula M = P [ I ( 1 + I )^N ] / [ ( 1 + I )^N โ€“ 1 ]

P = Principal amount (the total amount borrowed)

I = Interest rate on the mortgage

N = Number of periods (monthly mortgage payments)

  • Numeral takes numbers or strings that it trys to convert into a number.

I used Numeral by yarn add numeral and imported in file import numeral from 'numeral';

Syntax for Numeral => numeral(payment).format("$0,0.00")

Unit Converter

Unit converter has an app called UnitConverter and MeasureView component

  • Tab bar containd of Units

  • From Units

  • To Units

  • Amount input

  • Amount Out put

  • I used React native tab view yarn add react-native-tab-view and imported to file import { TabView, TabBar } from 'react-native-tab-view';

  • Also I used unit converter libarary using yarn add convert-units --save and imported to file import convert from 'convert-units';

  • used picker https://github.com/react-native-picker/picker

all-in-one-calculator's People

Contributors

mctagle avatar vidamaleki 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.