Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import Navbar from "./components/navbar";
- import Income from "./components/income";
- import Expenses from "./components/expenses";
- import Target from "./components/target";
- import Summary from "./components/summary";
- import failureLogo from "./img/failure.png";
- import successLogo from "./img/success.png";
- class App extends Component {
- state = {
- // User input
- income: 12000,
- // Expenses
- foodExpenses: 50,
- transportationExpenses: 50,
- houseExpenses: 50,
- leisureExpenses: 50,
- beautyExpenses: 50,
- // Targets
- currentAge: 18,
- targetAge: 50,
- currentNet: 5000,
- targetNet: 1000000,
- // Post-calculation values
- isTargetMet: undefined
- };
- // Fetch the user input for the yearly income and set the state
- handleIncomeInput = event => {
- console.log("fetchIncomeInput()");
- this.setState({ income: event.target.value });
- };
- /* Fetch & handle the values of the EXPENSES */
- // Fetch the value of expenses dynamically upon change
- handleExpensesInput = event => {
- console.log("handleExpenseInput()");
- console.log(event.target.value);
- if (event.target.id === "foodExpenses") {
- this.setState({ foodExpenses: event.target.value });
- }
- if (event.target.id === "transportationExpenses") {
- this.setState({ transportationExpenses: event.target.value });
- }
- if (event.target.id === "houseExpenses") {
- this.setState({ houseExpenses: event.target.value });
- }
- if (event.target.id === "leisureExpenses") {
- this.setState({ leisureExpenses: event.target.value });
- }
- if (event.target.id === "beautyExpenses") {
- this.setState({ beautyExpenses: event.target.value });
- }
- };
- // Handler functions to update the UI with the new values of the various expenses
- handleFoodExpensesText = () => {
- return this.state.foodExpenses;
- };
- handleTransportationExpensesText = () => {
- return this.state.transportationExpenses;
- };
- handleHouseExpensesText = () => {
- return this.state.houseExpenses;
- };
- handleLeisureExpensesText = () => {
- return this.state.leisureExpenses;
- };
- handleBeautyExpensesText = () => {
- return this.state.beautyExpenses;
- };
- /* Fetch & handle the values of the TARGETS */
- // Fetch the value of targets dynamically upon change
- handleTargetInput = event => {
- console.log("handleTargetInput()");
- console.log(event.target.value);
- if (event.target.id === "currentAgeInput") {
- this.setState({ currentAge: event.target.value });
- }
- if (event.target.id === "targetAgeInput") {
- this.setState({ targetAge: event.target.value });
- }
- if (event.target.id === "currentNetInput") {
- this.setState({ currentNet: event.target.value });
- }
- if (event.target.id === "targetNetInput") {
- this.setState({ targetNet: event.target.value });
- }
- };
- // Handler functions to update the UI with the new values of the various targets
- handleTargetAgeText = () => {
- return this.state.targetAge;
- };
- handleTargetNetText = () => {
- return this.state.targetNet;
- };
- // All the expenses summed (YEARLY)
- calculateYearlyExpenses = () => {
- console.log("calculateYearlyExpenses()");
- let totalExpenses =
- (this.state.foodExpenses +
- this.state.transportationExpenses +
- this.state.houseExpenses +
- this.state.leisureExpenses +
- this.state.beautyExpenses) *
- 12;
- console.log(totalExpenses);
- return totalExpenses;
- };
- // Calculate the real yearly income, Salary (IN) - Expenses (OUT)
- calculateYearlyOverallIncome = () => {
- console.log("calculateYearlyOverallIncome()");
- let overallIncome = this.state.income - this.calculateYearlyExpenses();
- return overallIncome;
- };
- // The money required to reach the target net worth, divided by the years left until target age
- calculateMinimumRequiredIncome = () => {
- console.log("calculateMinimumRequiredIncome()");
- let moneyToTarget = this.state.currentNet - this.state.targetNet;
- let yearsToTarget = this.state.targetAge - this.state.currentAge;
- // Return the yearly money necessary to reach the target
- return moneyToTarget / yearsToTarget;
- };
- // If the money made in a year is more than the minimum required to meet target, returns true
- checkTargetMet = () => {
- console.log("checkTargetMet()");
- // Yearly money IN > yearly target
- if (
- this.calculateYearlyOverallIncome() <
- this.calculateMinimumRequiredIncome()
- ) {
- console.log("Target missed");
- this.setState({ isTargetMet: false });
- return false;
- // Yearly target > yearly money IN
- } else if (
- this.calculateYearlyOverallIncome() >=
- this.calculateMinimumRequiredIncome()
- ) {
- console.log("Target met");
- this.setState({ isTargetMet: true });
- return true;
- }
- };
- calculateNetByTargetAge = () => {
- let yearsToTarget = this.state.targetAge - this.state.currentAge;
- return this.calculateYearlyOverallIncome() * yearsToTarget;
- };
- renderSummary = () => {
- // Render the summary div based on the TARGET NOT being MET
- if (!this.state.isTargetMet && this.state.isTargetMet !== undefined) {
- return (
- <React.Fragment>
- <img src={failureLogo} alt="failure logo" className="resultImage" />
- {/* Fail or success paragraph */}
- <p>
- In your current situation, it will not be possible to reach your
- target net worth by your target age.
- </p>
- {/* Net worth by target age */}
- <p>
- However, by your target age you will be worth
- <strong> {this.calculateNetByTargetAge()}</strong>.
- </p>
- {/* Years to reach target net worth */}
- <p>
- To earn £1.320.140 it would take you <strong>52</strong> years,
- which means you will be
- <strong> 75</strong>.
- </p>
- {/* Total of expenses */}
- <p>
- Every month, the total of your expenses is <strong>£2324</strong>.
- </p>
- <small className="text-muted">
- Try playing around with the expenses to see how can they effect your
- future net worth.
- </small>
- </React.Fragment>
- );
- }
- // Render the summary div based on the TARGET being MET
- if (this.state.isTargetMet) {
- return (
- <React.Fragment>
- <img src={successLogo} alt="success logo" className="resultImage" />
- <p>
- In your current situation, you will be able to reach your target net
- worth by your target age!
- </p>
- <p>
- By then, you will be worth
- <strong>{this.calculateNetByTargetAge()}</strong>.
- </p>
- <p>
- To earn £1.320.140 it would take you <strong>52</strong> years,
- which means you will be
- <strong> 75</strong>.
- </p>
- <p>
- Every month, the total of your expenses is <strong>£2324</strong>.
- </p>
- <small className="text-muted">
- Try playing around with the expenses to see how can they effect your
- future net worth.
- </small>
- </React.Fragment>
- );
- }
- };
- render() {
- return (
- <div className="App">
- <Navbar />
- <Expenses
- handleExpensesInput={this.handleExpensesInput}
- handleFoodExpensesText={this.handleFoodExpensesText}
- handleTransportationExpensesText={
- this.handleTransportationExpensesText
- }
- handleHouseExpensesText={this.handleHouseExpensesText}
- handleLeisureExpensesText={this.handleLeisureExpensesText}
- handleBeautyExpensesText={this.handleBeautyExpensesText}
- />
- <Income
- handleIncomeInput={this.handleIncomeInput}
- checkTargetMet={this.checkTargetMet}
- />
- <Summary renderSummary={this.renderSummary} />
- <Target
- handleTargetInput={this.handleTargetInput}
- handleTargetAgeText={this.handleTargetAgeText}
- handleTargetNetText={this.handleTargetNetText}
- />
- </div>
- );
- }
- }
- export default App;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement