expense-tracker/chart.html at main · swapnasahoo/expense-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Expense Tracker</title>

    <link rel="stylesheet" href="styles/style.css" />
    <link rel="stylesheet" href="styles/chart.css" />
  </head>
  <body>
    <main>
      <header>
        <nav>
          <ul>
            <li>
              <h1 title="Open Sidebar CTRL + B" class="js-open-sidebar">
                ExpenseMate
              </h1>
            </li>
            <li><a href="#" class="nav-tabs">About Us</a></li>
            <li><a href="#" class="nav-tabs">Contact</a></li>
          </ul>
        </nav>
      </header>

      <div class="sidebar">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="32px"
          viewBox="0 -960 960 960"
          width="32px"
          fill="#ffffff"
          class="js-close-sidebar"
        >
          <title>Close Sidebar CTRL + B</title>
          <path
            d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z"
          />
        </svg>

        <h1>ExpenseMate</h1>
        <h3>Dashboard</h3>
        <a class="total-income">Total Income: 0</a>
        <a class="total-expense">Total Expense: 0</a>
        <a class="remaining-bal">Remaining Balance: 0</a>

        <h3>Add Transaction</h3>
        <a>Income</a>
        <a>Expense</a>

        <h3>Filters</h3>
        <a>Income</a>
        <a>Expense</a>

        <h3>Setting</h3>
        <a>Change Theme</a>
        <a>Currency: INR</a>
        <a class="user-id"></a>
        <a class="show-reset-data">Reset Data</a>
      </div>
    </main>

    <div class="filter-div">
      <button class="chart-reset-btn">Reset</button>
      <button class="income-category-btn">Income category chart</button>
      <button class="expense-category-btn">Expense category chart</button>
    </div>
    <section class="summary">
      <canvas class="pie-chart"></canvas>
      <canvas class="income-pie-chart"></canvas>
      <canvas class="expense-pie-chart"></canvas>
      <a href="index.html" class="back-btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="24px"
          viewBox="0 -960 960 960"
          width="24px"
          fill="#e3e3e3"
        >
          <path
            d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"
          />
        </svg>
        Back
      </a>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="scripts/common.js"></script>
    <script src="scripts/chart.js"></script>
  </body>
</html>