Skip to content

Instantly share code, notes, and snippets.

@craigshoemaker

craigshoemaker/order.html

Last active October 26, 2021 12:52
Show Gist options
  • Save craigshoemaker/430b6cc5618e7307cdfc85a3653cddca to your computer and use it in GitHub Desktop.
Save craigshoemaker/430b6cc5618e7307cdfc85a3653cddca to your computer and use it in GitHub Desktop.
Download ZIP
Bethany's Pie Shop Order Form
Raw
order.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Order | Bethany's Pie Shop</title>
<link rel="stylesheet" href="site.css" type="text/css" />
<style>
@media only screen and (min-width: 768px) {
article {
width: 350px;
}
}
.pie {
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
}
.input-group input,
.input-group textarea,
.input-group select {
padding: 10px;
border: solid 1px #999;
border-radius: 2px;
width: 100%;
}
label {
font-weight: 600;
}
input[type="reset"] {
background: transparent;
border: 0;
text-decoration: underline;
cursor: pointer;
}
input[type="submit"] {
border: solid 1px #999;
border-radius: 3px;
padding: 10px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="pies.html">Pies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<aside><img src="images/logo.png" alt="Bethany's Pie Shop" /></aside>
<article>
<!-- ADD CONTENT HERE -->
<h1>Order</h1>
<div class="pie">
<img src="" />
<div class="columns">
<div class="title"></div>
<div class="price"></div>
</div>
<p class="desc"></p>
</div>
<form action="http://localhost:7071/api/post" method="POST">
<input type="hidden" id="pie-order" name="pie-order">
<input type="hidden" id="location" name="location">
<div class="input-group">
<div><label for="first-name">First name</label></div>
<div><input type="text" name="first-name" id="first-name" /></div>
</div>
<div class="input-group">
<div><label for="last-name">Last name</label></div>
<div><input type="text" name="last-name" id="last-name" /></div>
</div>
<div class="input-group">
<div><label for="address">Address</label></div>
<div><input type="text" name="address" id="address" /></div>
</div>
<div class="input-group">
<div><label for="state">State</label></div>
<div>
<select name="state" id="state">
<option value="" selected>[ Select one ]</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>
</div>
<div class="input-group">
<div><label for="postal-code">Postal code</label></div>
<div><input type="text" name="postal-code" id="postal-code" /></div>
</div>
<div class="input-group">
<div><label for="comments">Comments</label></div>
<div>
<textarea
name="comments"
id="comments"
cols="30"
rows="10"
></textarea>
</div>
</div>
<input type="reset" value="Reset" />
<input type="submit" value="Order" />
</form>
</article>
</main>
<footer>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="pies.html">Pies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</footer>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function(e) {
let locationBox = document.querySelector("#location");
let location = {
latitude: "unknown",
longitude: "unknown"
};
window.navigator.geolocation.getCurrentPosition(
function(position) {
location = {
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
locationBox.value = JSON.stringify(location);
},
function(error) {
locationBox.value = JSON.stringify(location);
});
const order = localStorage.getItem("order");
const pieOrder = JSON.parse(order);
if (order) {
const pie = document.querySelector(".pie");
const title = pie.querySelector(".title");
const price = pie.querySelector(".price");
const desc = pie.querySelector(".desc");
const orderInput = document.querySelector("#pie-order");
title.innerText = pieOrder.title;
price.innerText = pieOrder.price;
desc.innerText = pieOrder.desc;
orderInput.value = order;
const img = pie.querySelector("img");
img.setAttribute("src", `images/${pieOrder.id}.png`);
img.setAttribute("alt", pieOrder.title);
}
});
</script>
</body>
</html>
@fa2819
Copy link

fa2819 commented Aug 25, 2021

Nice cake

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment