-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (170 loc) · 8.72 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!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">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
<title>Inventory</title>
</head>
<body>
<!--section Header Navbar-->
<section>
<div class="container">
<header class="d-flex justify-content-center py-3">
<!--Nav bar-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark d-flex">
<div class="container-fluid width-class-80">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-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 mb-2 mb-md-0 ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<!--end-navbar-->
</header>
</div>
</section>
<!--end-->
<main>
<section class="px-4 py-5 bg-jumbo">
<!--Start-Jumbotron-->
<div class="p-5 mb-4 bg-body-tertiary mt-5">
<div class="container-fluid width-class-60">
<h1 class="display-5 fw-bold">Welcome</h1>
<p class="col-md-8 fs-4">This is a web app to create, read, update and deleted item
for an inventory, use it as permanent storage because all data
is stored in your browser and you don't lose when you close
the web app or turn of your computer<br><br>
To use our web app you must fill out all the input in the next form.
</p>
</div>
</div>
</section>
<!--End-Jumbotron-->
<!--form-->
<section>
<div class="container px-4 py-5">
<div class="col-md-7 col-lg-8">
<h4 class="mb-3">Add item to the inventory</h4>
<form class="needs-validation" novalidate="" id="formInvent">
<div class="row g-3">
<div class="col-12">
<label for="productForm" class="form-label">Product</label>
<input type="text" class="form-control" id="productForm" placeholder="" value=""
required="">
<div class="invalid-feedback">
A valid product is required.
</div>
</div>
<div class="mb-3">
<label for="descriptionForm" class="form-label">Description</label>
<textarea class="form-control" id="descriptionForm" rows="3"></textarea>
<div class="invalid-feedback">
The description is required
</div>
</div>
<div class="col-6">
<label for="priceForm" class="form-label">Price</label>
<input type="number" class="form-control" id="priceForm" placeholder="10, 60, 120">
<div class="invalid-feedback">
Please enter a valid price.
</div>
</div>
<div class="col-6">
<label for="address" class="form-label">Amount</label>
<input type="number" class="form-control" id="cantForm" placeholder="1,2,3,4,5"
required="">
<div class="invalid-feedback">
Please enter a valid amount.
</div>
</div>
</div>
<hr class="my-4">
<button class="w-100 btn btn-primary btn-lg" id="btnAddInventary">Add Item</button>
</form>
</div>
</div>
</section>
<!--end form-->
<section>
<div class="container">
<div class="mt-2 mb-2"><button id="btnReadArray">List Inventory</button></div>
<table class="table">
<thead class="table-light">
<tr>
<th widtht="70px">Product</th>
<th widtht="200px">Description</th>
<th widtht="70px">Price</th>
<th widtht="70px">Amount</th>
<th widtht="100px">...</th>
</tr>
</thead>
<tbody id="dataTableFor">
</tbody>
</table>
</div>
</section>
</main>
<!--end inventory and main section-->
<!--begin footer-->
<section>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
<svg class="bi" width="30" height="24">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<span class="mb-3 mb-md-0 text-body-secondary">© 2023 Company, Inc</span>
</div>
<nav>
<!--<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">-->
<ul class="nav list-unstyled">
<li class="nav-item margin-social"><a href="https://twitter.com"
class="nav-link px-2 text-body-secondary"><img class="social-network" width="24"
src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Logo_of_Twitter.svg"
alt="Twitter"></a></li>
<li class="nav-item"><a href="https://instagram.com"
class="nav-link px-2 text-body-secondary"><img class="social-network" width="24"
src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Instagram_logo_2016.svg"
alt="Instagram"></a></li>
<li class="nav-item"><a href="https://instagram.com"
class="nav-link px-2 text-body-secondary"><img class="social-network" width="24"
src="https://upload.wikimedia.org/wikipedia/en/0/04/Facebook_f_logo_%282021%29.svg"
alt="Facebook"></a></li>
</ul>
</nav>
</footer>
</div>
</section>
<!--end footer-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="./js/scripts.js">
</script>
</body>
</html>