-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (92 loc) · 3.46 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pantry Remover : Clear your cupboards!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- HEADER AND TOP NAV -->
<header>
<div id="header-logo">
<img src='./assets/images/logo1.png'>
</div>
<nav>
<span class='nav-item' id='ingredient-nav'>
Search
</span>
<span class='nav-item' id='randoBtn'>
Random
</span>
<span class='nav-item' id='fav-nav'>
Favourite
</span>
<span class='nav-item' id='grocery-nav'>
Grocery List
</span>
</nav>
</header>
<!-- END OF HEADER AND TOP NAV -->
<!-- SEARCH RESULTS / MAIN CONTENT -->
<main id='main'>
<!-- DATA GOES HERE -->
<!-- REAL DATA WILL BE GENERATED DYNAMICALLY THROUGH API CALLS-->
<div id='searchBar' class="container">
<div class="flex-container">
<input id="ingredientSearch" class="input is-primary" type="text" placeholder="list your ingredient(s)">
<button id="searchBtn" class="button is-primary">
Search
</button>
</div>
</div>
<div id="searchOutput" class='container'>
<!-- DATA GOES HERE -->
<!-- DATA WILL BE GENERATED DYNAMICALLY THROUGH API CALLS-->
<!-- CLEAR CONTENT:: $('#searchOutput').empty() -->
<!-- INSERT DATA WITH:: $('#searchOutput').append( createdElement ) -->
</div>
<!-- END OF DUMMY DATA -->
</main>
<!-- JUST A BORDER ELEMENT -->
<div id='main-col-div'>
</div>
<!-- END OF BORDER ELEMENT -->
<!-- END OF RESULTS / MAIN CONTENT -->
<!-- EXTRA INFO COLUMNS -->
<section id='info-columns'>
<!-- LEFT COLUMN -->
<div id='left-column'>
</div>
<!-- END OF LEFT COLUMN -->
<!-- ANOTHER BORDER ELEMENT -->
<div id='mid-col-div'>
</div>
<!-- END OF BORDER ELEMENT -->
<!-- RIGHT COLUMN -->
<div id='right-column'>
</div>
<!-- END OF RIGHT COLUMN -->
</section>
<!-- END OF EXTRA INFO COLUMNS-->
<!-- FOOTER -->
<footer id='footer'>
MADE WITH
<div class='love'> </div> by TEAM AHSOKA
</footer>
<!-- SIDEBAR GROCERY LIST -->
<!-- THIS WILL BE POSITIONED WITH CSS AND SHOULD GO AT THE END -->
<!-- HOPEFULLY THIS STOPS IT FROM MOVING OTHER ELEMENTS AROUND-->
<div id="grocerylist" class="grocerylist">
<button id='grocery-list-remove' class='button is-danger is-small'>➖</button>
<button id='grocery-list-add' class='button is-success is-small'>➕</button>
<input class="input is-info" type='text' id='add-grocery-item'>
<button id='grocery-list-close' class='button is-warning is-small' onclick="closeNav()">X</button>
<div id='grocerylist-list'></div>
</div>
<!-- END OF SIDEBAR GROCERY LIST -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>