From 2f94665a8be5c530f66d57398c8a0f4b22ef0127 Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Mon, 6 Nov 2023 15:21:21 -0500
Subject: [PATCH] User interface / components

---
 src/App.vue                        | 18 +++++++++++++++++-
 src/components/AddTransaction.vue  | 17 +++++++++++++++++
 src/components/Balance.vue         |  4 ++++
 src/components/Header.vue          |  3 +++
 src/components/IncomeExpenses.vue  | 12 ++++++++++++
 src/components/TransactionList.vue | 11 +++++++++++
 6 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AddTransaction.vue
 create mode 100644 src/components/Balance.vue
 create mode 100644 src/components/Header.vue
 create mode 100644 src/components/IncomeExpenses.vue
 create mode 100644 src/components/TransactionList.vue

diff --git a/src/App.vue b/src/App.vue
index 8ea5fee..a6aa3d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1 +1,17 @@
-<template>My App</template>
+<template>
+  <Header />
+  <div class="container">
+    <Balance />
+    <IncomeExpenses />
+    <TransactionList />
+    <AddTransaction />
+  </div>
+</template>
+
+<script setup>
+import Header from './components/Header.vue';
+import Balance from './components/Balance.vue';
+import IncomeExpenses from './components/IncomeExpenses.vue';
+import TransactionList from './components/TransactionList.vue';
+import AddTransaction from './components/AddTransaction.vue';
+</script>
diff --git a/src/components/AddTransaction.vue b/src/components/AddTransaction.vue
new file mode 100644
index 0000000..8ffb61e
--- /dev/null
+++ b/src/components/AddTransaction.vue
@@ -0,0 +1,17 @@
+<template>
+  <h3>Add new transaction</h3>
+  <form id="form">
+    <div class="form-control">
+      <label for="text">Text</label>
+      <input type="text" id="text" placeholder="Enter text..." />
+    </div>
+    <div class="form-control">
+      <label for="amount"
+        >Amount <br />
+        (negative - expense, positive - income)</label
+      >
+      <input type="text" id="amount" placeholder="Enter amount..." />
+    </div>
+    <button class="btn">Add transaction</button>
+  </form>
+</template>
diff --git a/src/components/Balance.vue b/src/components/Balance.vue
new file mode 100644
index 0000000..26ab781
--- /dev/null
+++ b/src/components/Balance.vue
@@ -0,0 +1,4 @@
+<template>
+  <h4>Your Balance</h4>
+  <h1 id="balance">$0.00</h1>
+</template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..718cf9e
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,3 @@
+<template>
+  <h2>Expense Tracker</h2>
+</template>
diff --git a/src/components/IncomeExpenses.vue b/src/components/IncomeExpenses.vue
new file mode 100644
index 0000000..95d41b6
--- /dev/null
+++ b/src/components/IncomeExpenses.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="inc-exp-container">
+    <div>
+      <h4>Income</h4>
+      <p id="money-plus" class="money plus">+$0.00</p>
+    </div>
+    <div>
+      <h4>Expense</h4>
+      <p id="money-minus" class="money minus">-$0.00</p>
+    </div>
+  </div>
+</template>
diff --git a/src/components/TransactionList.vue b/src/components/TransactionList.vue
new file mode 100644
index 0000000..9883271
--- /dev/null
+++ b/src/components/TransactionList.vue
@@ -0,0 +1,11 @@
+<template>
+  <h3>History</h3>
+  <ul id="list" class="list">
+    <li class="minus">
+      Cash <span>-$400</span><button class="delete-btn">x</button>
+    </li>
+    <li class="plus">
+      Salary <span>+$1000</span><button class="delete-btn">x</button>
+    </li>
+  </ul>
+</template>