express-inventory-application/views/createitem.ejs

77 lines
2.6 KiB
Text

<!DOCTYPE html>
<html>
<head>
<title>Good Pickin's - <%= category.name %> - New Item</title>
<link rel="stylesheet" href="/styles/css/bootstrap.min.css" />
</head>
<body class="bg-dark text-light">
<div class="d-flex flex-column py-4 px-4 align-items-center">
<h1 class="mb-4">Create Item</h1>
<form class="d-flex flex-column align-items-center w-50" method="post">
<div class="input-group mb-4" data-bs-theme="dark">
<span class="input-group-text" id="name">Item Name:</span>
<input
type="text"
class="form-control"
aria-label="item name"
aria-describedby="name"
name="name"
/>
</div>
<div class="input-group mb-4" data-bs-theme="dark">
<span class="input-group-text" id="description">
Item Description:
</span>
<input
type="text"
class="form-control"
aria-label="item description"
aria-describedby="description"
name="description"
/>
</div>
<div class="input-group mb-4" data-bs-theme="dark">
<span class="input-group-text" id="price"> Item Price: </span>
<input
type="text"
class="form-control"
aria-label="dollars"
aria-describedby="price"
name="dollars"
oninput="this.value = this.value.replace(/[^0-9]/g, '')"
/>
<span class="input-group-text" id="price">.</span>
<input
type="text"
class="form-control"
aria-label="cents"
aria-describedby="price"
name="cents"
oninput="this.value < 3 ? this.value = this.value.replace(/[^0-9]{1,2}/g, '') : this.value = this.value.substring(0, 2)"
/>
</div>
<div class="input-group mb-4" data-bs-theme="dark">
<span class="input-group-text" id="quantity"> Item Quantity: </span>
<input
type="text"
class="form-control"
aria-label="item quantity"
aria-describedby="quantity"
name="quantity"
oninput="this.value = this.value.replace(/[^0-9]/g, '')"
/>
</div>
<button type="submit" class="btn btn-outline-light px-4 py-2">
Submit
</button>
</form>
</div>
<footer
class="position-fixed bottom-0 border-light border-top w-100 py-2 d-flex justify-content-center bg-dark"
>
<a href="/" type="button" class="btn btn-outline-light px-4 py-1">
Back to Home
</a>
</footer>
</body>
</html>