-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (108 loc) · 3.61 KB
/
index.html
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
<!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>
<!--Import Google Icon Font-->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- Compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<style>
h2,
p {
margin: 16px 0;
}
header {
margin-bottom: 40px;
}
.tip {
padding: 10px;
background: #333;
color: #fff;
}
.tip .cost {
color: grey;
font-size: 0.9em;
}
.tip .delete {
color: lightblue;
font-size: 0.6em;
}
</style>
</head>
<body class="teal lighten-5">
<header class="teal darken-5 section">
<h2 class="center white-text">Budget Planner</h2>
<p class="grey-text text-lighten-2 center flow-text">
Graphical expenses tracker for noobs...
</p>
</header>
<div class="container section">
<div class="row">
<div class="col s12 m6">
<form class="card z-depth-4">
<div class="card-content">
<span class="card-title teal-text">Add here: </span>
<div class="input-field">
<input type="text" id="name" />
<label for="name">Item Name</label>
</div>
<div class="input-field">
<input type="text" id="cost" />
<label for="name">Cost (₹)</label>
</div>
<div class="input-field center">
<button
class="btn amber darken-2 white-text waves-effect waves-light"
type="submit"
name="action"
>
Add
<i class="material-icons right">send</i>
</button>
</div>
<div class="input-field center">
<p class="red-text" id="error"></p>
</div>
</div>
</form>
</div>
<div class="col s12 m5 push-m1">
<div class="canvas"></div>
</div>
</div>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBJSwXTsyYDyKNwWohI7V3ndRGWk2TUG3o",
authDomain: "d3-expense.firebaseapp.com",
databaseURL: "https://d3-expense.firebaseio.com",
projectId: "d3-expense",
storageBucket: "d3-expense.appspot.com",
messagingSenderId: "1098269718831",
appId: "1:1098269718831:web:8c71ab4d0688dd59f249da",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
</script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"></script>
<script src="app.js"></script>
<script src="graph.js"></script>
</body>
</html>