Tracking-Personal/index.html at main · ShadBalti/Tracking-Personal · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="android-chrome-512x512.png">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

    <title>Expense Tracker</title>
</head>
<body>
    <header>
        <h1>Expense Tracker</h1>
    </header>
    <main>
        <div class="summary">
            <h2>Summary</h2>
            <p>Income: <span id="income">0</span></p>
            <p>Expenses: <span id="expenses">0</span></p>
            <p>Balance: <span id="balance">0</span></p>
        </div>
        <div class="transactions">
            <h2>Transactions</h2>
            <ul id="transaction-list"></ul>
        </div>
        <div class="add-transaction">
  <h2>Add Transaction</h2>
  <div class="row">
    <div class="col-6">
      <label for="text">Text</label>
      <input type="text" id="text" placeholder="Enter text..." />
    </div>
    <div class="col-6">
      <label for="amount">Amount</label>
      <input type="number" id="amount" placeholder="Enter amount..." />
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <label for="category">Category</label>
      <input type="text" id="category" placeholder="Enter category..." />
    </div>
  </div>
  <button id="addTransaction" class="btn btn-primary">Add Transaction <i class="bi bi-plus"></i></button>
    </div>

        <div class="data-visualization">
            <h2>Data Visualization</h2>
            <canvas id="expenseChart"></canvas>
        </div>
      <section id="budget">
    <h2>Budget</h2>
    <form id="budget-form">
        <div class="row">
            <div class="col-md-6">
                <label for="budget-income">Income</label>
                <input type="number" id="budget-income" name="income" placeholder="Enter your monthly income">
            </div>
            <div class="col-md-6">
                <label for="budget-expenses">Expenses</label>
                <input type="number" id="budget-expenses" name="expenses" placeholder="Enter your monthly expenses">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Create Budget</button>
    </form>
    <div id="budget-summary">
        <h3>Budget Summary</h3>
        <p>Income: <span id="budget-summary-income"></span></p>
        <p>Expenses: <span id="budget-summary-expenses"></span></p>
        <p>Balance: <span id="budget-summary-balance"></span></p>
    </div>
</section>

    </main>
     <footer id="owner-section" class="py-4">
  <div class="container mx-auto">
    <div class="row">
      <div class="col-md-6">
        <img src="../Simple-image-editor/image/owner-min.jpg" alt="Owner's Image" class="img-fluid rounded-circle shadow-lg">
      </div>
      <div class="col-md-6">
        <h4 class="text-center">Dilshad Hussain</h4>
        <p class="text-center">Contact Information:</p>
        <p class="text-center"><i class="bi bi-telephone"></i> Phone: 03408452974</p>
        <p class="text-center"><i class="bi bi-envelope"></i> Email: shadbalti2@gmail.com</p>
        <p class="text-center">Physical Address: Barah Khaplu, Skardu, Pakistan</p>
        <p id="clock" class="text-center"></p> <div class="social-feed mt-3">
          <a class="twitter-timeline" data-height="200" href="https://twitter.com/ShadBalti" data-tweet-limit="3">Tweets by ShadBalti</a>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row mt-4">
      <div class="col-md-6">
        <h5>About Us</h5>
        <p>I'm Dilshad Hussain, a web developer. I love coding and creating websites that work beautifully.</p>
      </div>
    </div>
  </div>
</footer>

    <script src="script.js"></script>


    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"> <script/>
</body>
</html>