Блог

 import "./styles.css";
import DynamicLabel from "./DynamicLabel.js";
import {useState} from "react";
import DynamicSubmitForm from "./DynamicSubmitForm";

export default function App() {
  const[income, setIncome] = useState("0");
  const[expenses, setExpenses] = useState("0");
  const[balance, setBalance] = useState("0")
  const recentTransactions = ["0","0","0"];
  let recentTransactionsCount = 0; 
  let value = "2";
 
  function handleChange(e) {
    value = e.target.value;
  }
  
  function handleNewTransactionNumber(e) {
    if(recentTransactionsCount > 2) {
      recentTransactionsCount = 0;
    }
    else {
      recentTransactionsCount  ;
    }
    const input = e.target.value;
    if(input < 0) {
      setExpenses(expenses   input );
    }
    else{
      setIncome(income   input);
    }
    

  }

  function handleNewTransactionDetails(e) {

  }

  return (
    <div className="App">
      <h1> Expense Tracker </h1>
      
      <div id = "Balance">
        <h1 id = "Balance-Header"> Your Balance </h1>
        <DynamicLabel text = {income} color = "red" alignment = "left"> </DynamicLabel>
      </div>
      <div id = "Income-Expenses"> 
        <div id = "Income"> 
          <h2> Income </h2>
          <DynamicLabel text = {income} color = "green"> </DynamicLabel>
        </div>
        <div id = "Expenses"> 
          <h2>Expenses </h2>
          <DynamicLabel text = {expenses} color = "red"> </DynamicLabel>
        </div>
        <div id = "History"> 
        <DynamicSubmitForm />
        <h2 id= "History-Title">History</h2>
        <div id= "history-div1"> 
          <DynamicLabel text = "0" color = "green"> </DynamicLabel>
        </div>
        <div id= "history-div2"> 
        <DynamicLabel text = "0" color = "green"> </DynamicLabel>
        </div>
        <div id= "history-div3">
        <DynamicLabel text = "0" color = "green"> </DynamicLabel>
           </div>
        </div> 
      </div>
    </div>
  );
}

import React from 'react';

export default class DynamicSubmitForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}