Add expense category support

src/App.css

@@ -155,3 +155,12 @@ input[type='number'] {
     width: 300px;
   }
 }
+.category {
+  background-color: #6c63ff;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  margin-left: 8px;
+}
+

src/components/AddTransaction.js

@@ -1,9 +1,10 @@
-import React, {useState, useContext} from 'react'
+import React, { useState, useContext } from 'react';
 import { GlobalContext } from '../context/GlobalState';
 
 export const AddTransaction = () => {
   const [text, setText] = useState('');
   const [amount, setAmount] = useState(0);
+  const [category, setCategory] = useState('Food'); // NEW
 
   const { addTransaction } = useContext(GlobalContext);
 
@@ -13,29 +14,56 @@ export const AddTransaction = () => {
     const newTransaction = {
       id: Math.floor(Math.random() * 100000000),
       text,
-      amount: +amount
-    }
+      amount: +amount,
+      category // NEW
+    };
 
     addTransaction(newTransaction);
-  }
+
+    setText('');
+    setAmount(0);
+    setCategory('Food');
+  };
 
   return (
     <>
       <h3>Add new transaction</h3>
       <form onSubmit={onSubmit}>
         <div className="form-control">
-          <label htmlFor="text">Text</label>
-          <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Enter text..." />
+          <label>Text</label>
+          <input
+            type="text"
+            value={text}
+            onChange={e => setText(e.target.value)}
+            placeholder="Enter text..."
+            required
+          />
+        </div>
+
+        <div className="form-control">
+          <label>Amount</label>
+          <input
+            type="number"
+            value={amount}
+            onChange={e => setAmount(e.target.value)}
+            placeholder="Enter amount..."
+            required
+          />
         </div>
+
         <div className="form-control">
-          <label htmlFor="amount"
-            >Amount <br />
-            (negative - expense, positive - income)</label
-          >
-          <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="Enter amount..." />
+          <label>Category</label>
+          <select value={category} onChange={e => setCategory(e.target.value)}>
+            <option value="Food">Food</option>
+            <option value="Travel">Travel</option>
+            <option value="Rent">Rent</option>
+            <option value="Entertainment">Entertainment</option>
+            <option value="Others">Others</option>
+          </select>
         </div>
+
         <button className="btn">Add transaction</button>
       </form>
     </>
-  )
-}
+  );
+};

src/components/Transaction.js

@@ -1,30 +1,23 @@
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import { GlobalContext } from '../context/GlobalState';
 
-//Money formatter function
-function moneyFormatter(num) {
-  let p = num.toFixed(2).split('.');
-  return (
-    '$ ' +
-    p[0]
-      .split('')
-      .reverse()
-      .reduce(function (acc, num, i, orig) {
-        return num === '-' ? acc : num + (i && !(i % 3) ? ',' : '') + acc;
-      }, '') +
-    '.' +
-    p[1]
-  );
-}
-
 export const Transaction = ({ transaction }) => {
   const { deleteTransaction } = useContext(GlobalContext);
-
   const sign = transaction.amount < 0 ? '-' : '+';
 
   return (
     <li className={transaction.amount < 0 ? 'minus' : 'plus'}>
-      {transaction.text} <span>{sign}{moneyFormatter(transaction.amount)}</span><button onClick={() => deleteTransaction(transaction.id)} className="delete-btn">x</button>
+      {transaction.text}
+      <span>
+        {sign}${Math.abs(transaction.amount)}
+        <span className="category"> {transaction.category}</span>
+      </span>
+      <button
+        onClick={() => deleteTransaction(transaction.id)}
+        className="delete-btn"
+      >
+        x
+      </button>
     </li>
-  )
-}
+  );
+};