ionic-angular/index.html at master · shirantha97/ionic-angular · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"
    ></script>
    <script
      nomodule
      src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
    />
    <title>Budget Planner</title>
  </head>
  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Budget Planner</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-grid>
          <ion-row>
            <ion-col size-lg="6" offset-md="3">
              <ion-card>
                <ion-card-header>Expenses</ion-card-header>
                <ion-card-content>
                  <ion-item>
                    <ion-label position="floating">Expense Reason</ion-label>
                    <ion-input type="text" id="input-reason"></ion-input>
                  </ion-item>
                  <ion-item>
                    <ion-label position="floating">Expense Amount</ion-label>
                    <ion-input type="number" id="input-amount"></ion-input>
                  </ion-item>
                  <div margin-vertical text-right>
                    <ion-button color="primary" id="btn-add">
                      <ion-icon name="add" slot="start"></ion-icon>
                      Add Expense
                    </ion-button>
                    <ion-button fill="outline" color="danger" id="btn-cancel">
                      <ion-icon slot="start" name="close"></ion-icon>
                      Clear
                    </ion-button>
                  </div>
                </ion-card-content>
              </ion-card>
            </ion-col>
          </ion-row>
          <ion-row>
              <ion-col size-lg="6" offset-md="3">
                  <ion-list id="expense-list"></ion-list>
              </ion-col>
          </ion-row>
          <ion-row>
              <ion-col size-lg="6" offset-md="3">
                  <ion-item margin>Total Expenses <span id="total-expenses"></span></ion-item>
              </ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
      <ion-alert-controller></ion-alert-controller>
    </ion-app>
    <script src="app.js"></script>
  </body>
</html>