Amortization

Tecnologies:

• ReactJS + Vite
• TailwindCSS
• Netify

About:

Amortization table built in javascript using ReactJS framework

This project was built at Universidad Nacional Mayor de San Marcos in Peru, as a homework for the Economy course. The idea was to recreate an amortization table with some parameters
Owner: Luis La Torre - Software Engineering Student

How to use:

1. Clone this repository using this link: https://github.com/LTprograms/Amortizacion.git
2. Make sure you have Node already installed typing this comand on a terminal: npm --version
   • If you do not have Node installed, download it using this link
   • Once you have installed, add the npm variable to the PATH
   • Make sure again you added the variable to the PATH typing the npm --version command again
3. Go to your project directory and download all dependencies typing this command on the terminal: npm install
4. Run your project with: npm run dev

How it works

If you have followed the previus steps correctly and your project runs successfully, you are going to find this interface.

In the left section, we can se some input text fields, they must be filled with the correct data to make it work, here is an example:

Documentation:

In the src folder, we can find some files and some other folders (components & helpers). The explanation is bellow:

1. Components folder
   • Error.jsx: This file contains the Error component which is shown when an error occurs. It receives a message as a parameter
   • Input.jsx: This file contains the Input component, they represent the input fields on the left side of the interface. Tehy receive some parameters:
     • type: input type (ex. text, date, number, etc)
     • id: id HTML attribute
     • lb: Label text displayed in label tag
     • placeholder: Placeholder text inside input
     • setter: Setter function to manipulate state of the value
     • val: State variable for value
   • LastRow.jsx: In the table, the last row has a different format from the other ones. It receives the object with all data set in the state. This object contains all total final data
   • Row.jsx: Every row have different data from the others. It receives an object containing all data for that row
2. Helpers folder
   • calc.js: It contains some functions to calculate Effective Daily Rate (EDR) and Effective Mounthly Rate (EMR) from Effective Anual Rate (EAR)
   • dates.js: It contains some functions to manipulate dates, such as get the days difference from 2 given dates (getDaysDifference()) or get a future date from a number of months given (getFutureDate())