bronku/cake-order-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rudimentary css

Browse source
This commit is contained in:
Bronku 2025-02-01 08:18:08 +01:00
parent 7515010afd
commit 2c90e19eba
10 changed files with 109 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

5
public/alpine-3.14.8.js
View file

File diff suppressed because one or more lines are too long

40
public/index.html
View file

@ -6,6 +6,7 @@
<title>IROON</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="htmx-2.04.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
@ -13,44 +14,7 @@
<h1>I ran out of names</h1>
</header>
<main>
<div id="new_order_form">
<form x-show="open" hx-post="order/new" hx-swap="innerHTML" hx-target="#new_order_response"
id="new_cake_form">
<div>
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname" required value="">
</div>
<div>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" value="">
</div>
<div>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" value="">
</div>
<div>
<label for="location">Location</label>
<input type="text" id="location" name="location" value="">
</div>
<div>
<label for="paid">Paid</label>
<input type="number" id="paid" name="paid" step="0.01" min="0" value="">
</div>
<div id="selected_cakes"></div>
<button id="submit_button" type="submit">Submit</button>
<button id="reset_button" type="reset">Reset</button>
<script>
document.getElementById("reset_button").addEventListener("click", function () {
document.getElementById("selected_cakes").innerHTML = "";
})
</script>
</form>
<!--A dropdown with all available cakes loaded dynamically-->
<div hx-get="available_cakes" hx-swap="outerHTML" hx-trigger="load">
</div>
<!--A space to fit the response after submitting the form-->
<div id="new_order_response"></div>
</div>
<div hx-get="new_order_form.html" hx-swap="outerHTML" hx-trigger="load"></div>
</main>
</body>

31
public/new_order_form.html Normal file
View file

@ -0,0 +1,31 @@
<form x-show="open" hx-post="order/new" hx-swap="outerHTML" id="new_order_form">
<div id="main_form">
<h3>New Order</h3>
<div>
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname" required value="">
</div>
<div>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" value="">
</div>
<div>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" value="">
</div>
<div>
<label for="location">Location</label>
<input type="text" id="location" name="location" value="">
</div>
<div>
<label for="paid">Paid</label>
<input type="number" id="paid" name="paid" step="0.01" min="0" value="">
</div>
<button id="submit_button" type="submit">Submit</button>
<button onclick="document.getElementById('basket').innerHTML=''" type="reset">Reset</button>
</div>
<div id="basket">
<h3>Baset</h3>
</div>
<div hx-get="available_cakes" hx-swap="innerHTML" hx-trigger="load"></div>
</form>

10
public/style.css Normal file
View file

@ -0,0 +1,10 @@
#new_order_form {
display: flex;
flex-direction: row;
padding: 10pt
}
#new_order_form>div {
padding: 10pt;
width: 400px;
}