Skip to content

Commit 529b86a

Browse files
craigshoemakercraigshoemaker
committed
Update order workflow
1 parent a323189 commit 529b86a

File tree

3 files changed

+121
-66
lines changed

3 files changed

+121
-66
lines changed

‎order.html‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,6 @@
88
<title>Order | Bethany's Pie Shop</title>
99
<link rel="stylesheet" href="site.css" type="text/css">
1010
<style>
11-
.content {
12-
width: 100%;
13-
max-width: 350px;
14-
}
15-
1611
.selected-pie {
1712
margin: 20px 20px 20px 0;
1813
padding: 10px;
@@ -69,15 +64,14 @@
6964
<h1>Order</h1>
7065

7166
<div class="selected-pie">
72-
<img src="images/apple-pie.png" alt="Apple pie">
67+
<img src="">
7368
<div class="layout-container">
74-
<div>Apple Pie</div>
75-
<div>$12.95</div>
69+
<div class="title">Apple Pie</div c>
70+
<div class="price">$12.95</div>
7671
</div>
77-
<p>Our famous apple pie</p>
72+
<p class="desc">Our famous apple pie</p>
7873
</div>
7974

80-
8175
<form action="" method="POST">
8276

8377
<div class="input-group">
@@ -184,7 +178,22 @@ <h1>Order</h1>
184178

185179
window.addEventListener('DOMContentLoaded', function (e) {
186180

187-
console.log('loaded');
181+
const order = JSON.parse(localStorage.getItem('order'));
182+
183+
if (order) {
184+
const container = document.querySelector('.selected-pie');
185+
const title = container.querySelector('.title');
186+
const price = container.querySelector('.price');
187+
const desc = container.querySelector('.desc');
188+
189+
title.innerText = order.title;
190+
price.innerText = order.price;
191+
desc.innerText = order.desc;
192+
193+
const img = container.querySelector('img');
194+
img.setAttribute('src', `images/${ order.id }.png`);
195+
img.setAttribute('alt', order.title);
196+
}
188197

189198
}, false);
190199

‎pies.html‎

Lines changed: 81 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,90 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8-
<title>Pies | Bethany's Pie Shop</title>
9-
<link rel="stylesheet" href="site.css" type="text/css">
10-
</head>
11-
12-
<body>
13-
<header>
14-
<nav>
15-
<ul>
16-
<li><a href="/">Home</a></li>
17-
<li><a href="pies.html">Pies</a></li>
18-
<li><a href="contact.html">Contact</a></li>
19-
</ul>
20-
</nav>
21-
</header>
22-
<main>
23-
<div class="layout-container">
24-
<div class="branding"><img src="images/logo.png" alt="Bethany's Pie Shop"></div>
25-
<div class="content">
26-
<h1>Pies</h1>
27-
<div>
28-
<img src="images/apple-pie.png" alt="Apple Pie">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Pies | Bethany's Pie Shop</title>
8+
<link rel="stylesheet" href="site.css" type="text/css" />
9+
</head>
10+
<body>
11+
<header>
12+
<nav>
13+
<ul>
14+
<li><a href="/">Home</a></li>
15+
<li><a href="pies.html">Pies</a></li>
16+
<li><a href="contact.html">Contact</a></li>
17+
</ul>
18+
</nav>
19+
</header>
20+
<main>
21+
<div class="layout-container">
22+
<div class="branding">
23+
<img src="images/logo.png" alt="Bethany's Pie Shop" />
24+
</div>
25+
<div class="content">
26+
<h1>Pies</h1>
2927
<div>
30-
<div>Apple Pie</div>
31-
<div>$12.95</div>
28+
<img src="images/apple-pie.png" alt="Apple Pie" />
29+
<div>
30+
<div class="title">Apple Pie</div>
31+
<div class="price">$12.95</div>
32+
</div>
33+
<p class="desc">Our famous apple pie</p>
34+
<button data-order="apple-pie">Order</button>
3235
</div>
33-
<p>Our famous apple pie</p>
34-
<button data-name="apple-pie">Order</button>
35-
</div>
36-
</div>
37-
<div>
38-
<img src="" alt="">
3936
<div>
40-
<div>Cherry Pie</div>
41-
<div>$15.95</div>
37+
<img src="images/cherry-pie.png" alt="Chery Pie" />
38+
<div>
39+
<div class="title">Cherry Pie</div>
40+
<div class="price">$15.95</div>
41+
</div>
42+
<p class="desc">A summer classic!</p>
43+
<button data-order="cherry-pie">Order</button>
4244
</div>
43-
<p>A summer classic</p>
44-
<button data-name="cherry-pie">Order</button>
4545
</div>
4646
</div>
47-
</div>
48-
</main>
49-
<footer>
50-
<nav>
51-
<ul>
52-
<li><a href="/">Home</a></li>
53-
<li><a href="pies.html">Pies</a></li>
54-
<li><a href="contact.html">Contact</a></li>
55-
</ul>
56-
</nav>
57-
</footer>
58-
</body>
47+
</main>
48+
<footer>
49+
<nav>
50+
<ul>
51+
<li><a href="/">Home</a></li>
52+
<li><a href="pies.html">Pies</a></li>
53+
<li><a href="contact.html">Contact</a></li>
54+
</ul>
55+
</nav>
56+
</footer>
57+
</body>
58+
<script>
59+
window.addEventListener(
60+
"DOMContentLoaded",
61+
function(e) {
62+
const orderButtons = document.querySelectorAll("button[data-order]");
63+
64+
[].forEach.call(orderButtons, function(button) {
65+
button.addEventListener("click", function(e) {
66+
const button = e.currentTarget;
67+
const id = button.getAttribute("data-order");
68+
const container = button.parentNode;
69+
const title = container.querySelector(".title").innerText;
70+
const price = container.querySelector(".price").innerText;
71+
const desc = container.querySelector(".desc").innerText;
72+
73+
const order = {
74+
title: title,
75+
id: id,
76+
price: price,
77+
desc: desc
78+
};
79+
80+
localStorage.setItem("order", JSON.stringify(order));
5981

60-
</html>
82+
const url = window.location.href.replace("pies.html", "order.html");
83+
window.location.href = url;
84+
});
85+
});
86+
},
87+
false
88+
);
89+
</script>
90+
</html>

‎site.css‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
margin: 0;
33
}
44

5-
html {
5+
html,
6+
body {
67
height: 100%;
78
}
89

@@ -46,21 +47,36 @@ main {
4647
background-image: url("images/background.png");
4748
padding-top: 3em;
4849
padding-bottom: 3em;
50+
min-height: 85%;
4951
}
5052

5153
footer {
5254
padding: 15px;
5355
}
5456

5557
.layout-container {
56-
display: flex;
58+
display: block;
5759
}
5860

5961
.branding,
6062
.content {
6163
padding: 2em;
6264
}
6365

64-
.branding {
65-
margin-left: 2%;
66+
.content {
67+
width: 75%;
68+
}
69+
70+
@media only screen and (min-width: 768px) {
71+
.layout-container {
72+
display: flex;
73+
}
74+
75+
.branding {
76+
margin-left: 2%;
77+
}
78+
79+
.content {
80+
width: 350px;
81+
}
6682
}

0 commit comments

Comments
 (0)