-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.html
97 lines (89 loc) · 5.07 KB
/
search.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
<!doctype html>
<html lang="en">
<head>
<title>Food Search</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./css/search.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/JavaScript" src="./js/fetchData.js"></script>
<script type="text/JavaScript" src="./js/autocomplete.js"></script>
<script src="./js/userhandler.js"></script>
</head>
<style>
.fa-gradient {
background: linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-dark rightBar" style="background-color:none;">
<a class="navbar-brand" href="#">Diet Tracker</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li> -->
<li class="nav-item active">
<a class="nav-link" href="search.html">Search</a>
</li>
<li class="nav-item">
<a class="nav-link" href="home.html">Charts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="recipe.html">Recipe Generator</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup.html">Sign Up</a>
</li>
</ul>
</div>
</nav>
<div id="introGroup"></div>
<h1 id="greeting">Hello, User</h1>
<h3 id="subgreeting">What did you eat today?</h3>
</div>
<form id="searchForm" autocomplete="off">
<div class="autocomplete">
<input type="text" id="searchField" class="autocomplete" class="formControl" placeholder="Search" aria-label="Recipient's username"
aria-describedby="button-addon2" onKeyDown="if(event.keyCode==13) searchItem(document.getElementById('searchField').value);"
oninput="//searchItem(document.getElementById('searchField').value);">
</div>
</form>
<div id="nutritionPaper">
<h3 id="foodName" class="paperTextHeader"><b>Nutritional Data</b> </h3>
<p id="energy" class="paperText" style="margin-top: 10px">Enter an item to display nutition info!</p>
<p id="sugars" class="paperText"></p>
<p id="lipids" class="paperText"></p>
<p id="carbs" class="paperText"></p>
<span id="addFood" onclick="updateUser($(energy).html().replace( /^\D+/g, ''),$(sugars).html().replace( /^\D+/g, ''),$(lipids).html().replace( /^\D+/g, ''),$(carbs).html().replace( /^\D+/g, ''))"
class="fa fa-plus-circle fa-gradient"></span>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script>
setGreeting();
autocomplete(document.getElementById("searchField"), ['apple', 'asparagus', 'avocado', 'artichoke', 'apricot', 'banana', 'beans', 'broccoli', 'bacon', 'bread', 'carrot', 'cranberry', 'celery', 'cabbage', 'coconut', 'chicken', 'calamari', 'duck', 'durian', 'dates', 'fish', 'grapes', 'garlic', 'guava', 'ginger', 'grapefruit', 'honeydew', 'ham', 'hazelnut', 'ice cream', 'jackfruit', 'jellyfish', 'kale', 'kiwi', 'kimchi', 'lamb', 'lemon', 'lime', 'lobster', 'lychee', 'mango', 'milk', 'mushroom', 'mint', 'nectarine', 'noodles', 'octopus', 'onion', 'oyster', 'olive', 'orange', 'peach', 'pear', 'papaya', 'pasta', 'pineapple', 'potatoes', 'quinoa', 'rice', 'raisin', 'radish', 'salad', 'soba', 'soy milk', 'sweet potato', 'strawberry', 'tomato', 'tofu', 'tuna', 'turkey', 'trout', 'vermicelli', 'veal', 'watermelon', 'watercress', 'walnut', 'yoghurt', 'zucchini']);
</script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>