Code Monkey home page Code Monkey logo

compoundinterest-react's Introduction

Screenshot of the Compound Interest Calculator's results bar graph.

react-compound-interest-calculator

A compound interest calculator to assist in financial decision making. Created to demonstrate my ability to develop applications in ReactJS, Typescript, and Bootstrap CSS.

Features

  • Disallows illegal inputs: Only allows numbers in fields. Each field can have a range (ie. years is from 0-30).
  • Updates results immediately: Uses an asycronous useEffect hook to update the result and graph each time the user changes something.
  • Responsive design: Works and maintains high quality appearance on all browsers, devices, and screen sizes.

Inspired by

This calculator is inpsired by the Australian Government's Compound Interest Calculator built for the Money Smart website.

compoundinterest-react's People

Contributors

hoppi164 avatar lkdm avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

compoundinterest-react's Issues

Create basic layout

Create the basic layout including form components for the interest rate calculator.

Feature 3: Protect against errors

To progress further in the application, it must protect against errors caused by user input.

Goals:

  • Sanitise user input to prevent crashing the application

  • Validate user input for each type (ie. no negative currency, no proportion over 100)

  • Show feedback to the user when something is entered wrong
    OR

  • Prevent user from entering illegal characters (alphabetic letters in a numeric field)

Code cleanup based on code review

Code reviewed by another developer.


To do list based on feedback provided:

  • Move types.tsx out of store/ and into a models/ or types/ directory
  • Don't assign default types arbitrarily (ex: Don't use Money, just number)
  • Remove all instances of redux including from package.json, if you are not using it.
  • Move useState out of App.tsx and into a StrategyContext. More information at this tutorial.
  • Write more about the project and dependencies used in README.md
  • Turn Frequency into an enum.

Abbreviate currencies in results section

The currencies are quite difficult to read with all those 0s, and also lead to overflow errors. Perhaps there is a library that will help abbreviate the displayed currencies?

Abbreviate currencies on:

  • x-axis of bar graph
  • mouseover tooltip of bar graph

Feature 2: State management

In order to progress further in the production of this compound interest calculator, the app needs to be able to save and load state.

Goals

  • Setup Redux to manage state
  • Save data from form
  • Access state and print it to console

Add testing library

It is difficult to write the compound test functionality without having some sort of unit testing to verify success or failure against. For this reason a unit testing library should be added.

  • Install Jest
  • Set up unit tests for calculating compound interest

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.