User interface / components

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>

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>

src/components/Balance.vue

@@ -0,0 +1,4 @@
+<template>
+  <h4>Your Balance</h4>
+  <h1 id="balance">$0.00</h1>
+</template>

src/components/Header.vue

@@ -0,0 +1,3 @@
+<template>
+  <h2>Expense Tracker</h2>
+</template>

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>

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>