-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
133 lines (104 loc) · 3.73 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Materialize Css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Font Awesome Icons-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!-- Custom Style -->
<style>
.input-field label {
color: #212121;
font-size: 1.2em;
}
.input-field input[type=text]:focus+label {
color: #8e24aa !important;
}
.input-field input[type=text]:focus {
border-bottom: 1px solid #8e24aa !important;
box-shadow: 0 1px 0 0 #8e24aa !important;
}
.input-field input[type=number]:focus+label {
color: #8e24aa !important;
}
.input-field input[type=number]:focus {
border-bottom: 1px solid #8e24aa !important;
box-shadow: 0 1px 0 0 #8e24aa !important;
}
.input-field input[type=text],input[type=number] {
border-bottom: 1px solid #000 !important;
}
.collection {
border: 0;
}
.collection-item {
background-color: #8e24aa !important;
color: #fff;
}
@media only screen and (max-width: 600px){
.brand-logo {
text-align: left !important;
left: 5% !important;
transform: translateX(0) !important;
}
#update-btn {
margin-bottom: 10px;
}
}
</style>
</head>
<body class="grey darken-4">
<!-- Navbar-->
<nav>
<div class="nav-wrapper purple darken-1">
<a href="#" class="brand-logo center">Calorie Tracker</a>
<ul class="right">
<li><a class="waves-effect waves-purple purple lighten-2 btn" id="clear-btn"><strong>Clear All</strong></a></li>
</ul>
</div>
</nav>
<!-- Main -->
<div class="container">
<!-- Form Card-->
<div class="card purple lighten-2 z-depth-2">
<div class="card-content">
<div class="card-title"><b>Add Meal / Food Item</b></div>
<form class="col">
<div class="row">
<div class="input-field col s6">
<input type="text" placeholder="Add Meal" id="add-meal" class="white-text">
<label for="add-meal">Meal</label>
</div>
<div class="input-field col s6 ">
<input type="number" placeholder="Approx. Calories" id="add-calories" class="white-text" min="0">
<label for="add-calories">Calories</label>
</div>
</div>
</form>
<button class="btn waves-effect waves-deep-purple purple darken-1" id="add-btn"><i class="fas fa-plus"></i> Add
Meal</button>
<!-- update Button -->
<button class="btn waves-effect waves-deep-purple purple darken-1" id="update-btn"><i class="fas fa-edit"></i> Update Meal</button>
<button class="btn waves-effect waves-deep-purple purple darken-1" id="delete-btn"><i class="fas fa-trash"></i> Delete Meal</button>
<button class="btn waves-effect waves-deep-purple purple lighten-3 right" id="back-btn"><i
class="fas fa-chevron-left"></i> Back</button>
</div>
</div>
<!-- list Card -->
<div class="card purple lighten-4 z-depth-2">
<div class="card-content">
<h5 class="center">Total Calories : <span id="total-calories">0</span></h5>
<ul class="collection" id="item-list">
</ul>
</div>
</div>
</div>
<!-- Materialize JavaScript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- My Script -->
<script src="app.js"></script>
</body>
</html>