Skip to content

Commit 9782d9d

Browse files
jonasschmedtmannjonasschmedtmann
authored
Added bonus node.js crash course
1 parent 3a3049c commit 9782d9d

20 files changed

+1499
-0
lines changed

‎99-bonus-1/final/data/data.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
[
2+
{
3+
"id": "0",
4+
"productName": "Huawei MateBook X Pro",
5+
"image": "huawei-matebook-pro.jpg",
6+
"cpu": "Intel Core i7, 8th generation",
7+
"ram": "8GB",
8+
"storage": "512 GB SSD",
9+
"screen": "13.9-inch, 3K (3,000 x 2,080)",
10+
"price": "1499",
11+
"description": "The Huawei MateBook X Pro is our pick for the best laptop money can buy in 2018. This is a gorgeously-designed laptop with a stunning screen (albeit with a rather odd aspect ratio), and it comes packed with cutting edge components that allows it to perform brilliantly, and a battery life that runs rings around many of its rivals. It also has a very competitive price, giving you features, design and performance for quite a bit less money."
12+
},
13+
{
14+
"id": "1",
15+
"productName": "Apple Macbook Pro 2018",
16+
"image": "macbook-pro-15.jpg",
17+
"cpu": "6-core Intel i7, 8th generation",
18+
"ram": "16GB",
19+
"storage": "1TB GB SSD",
20+
"screen": "15-inch Retina display",
21+
"price": "3199",
22+
"description": "If you're after the latest and greatest laptop from Apple, we suggest you look into the 2018 model of the 15-inch MacBook Pro with Touch Bar. The headline Touch Bar – a thin OLED display at the top of the keyboard which can be used for any number of things, whether that be auto-suggesting words as you type or offering Touch ID so you can log in with just your fingerprint – is of course included. It's certainly retained Apple's sense of style, but it comes at a cost. This is a pricey machine, so you may want to consider one of the Windows alternatives. But, if you're a steadfast Apple diehard, this is definitely the best laptop for you!"
23+
},
24+
{
25+
"id": "2",
26+
"productName": "Dell XPS 13",
27+
"image": "dell-xps-13.png",
28+
"cpu": "Intel Core i7, 8th generation",
29+
"ram": "16GB",
30+
"storage": "512 GB SSD",
31+
"screen": "13.3-inch, Full HD",
32+
"price": "1199",
33+
"description": "The Dell XPS 13 is an absolutely brilliant laptop. The 2018 version rocks an 8th-generation Intel Core i5 or i7 processor and a bezel-less ‘Infinity Edge’ display, this Dell XPS 13 continues to be the most popular Windows laptop in the world. What’s more, there’s a wide range of customization options, so you can really make the Dell XPS 13 the best laptop for your needs. "
34+
},
35+
{
36+
"id": "3",
37+
"productName": "Asus ZenBook Flip S",
38+
"image": "asus-zenbook-flip-s.jpg",
39+
"cpu": "Intel Core i7, 8th generation",
40+
"ram": "16GB",
41+
"storage": "512 GB SSD",
42+
"screen": "13.3-inch, Full HD touchscreen",
43+
"price": "1399",
44+
"description": "Asus has struck gold with its new refresh of its ZenBook Flip S 2-in-1 laptop. With a new Kaby Lake R 8th-generation processor powering the device, plenty of RAM and a super-fast PCIe SSD in certain models, this is an absolutely stunning laptop. Its 2-in-1 design means you can use it as both a laptop and a tablet, and while it's not as affordable as some other machines, if you have the budget you'll be really happy with this fantastic device."
45+
},
46+
{
47+
"id": "4",
48+
"productName": "Samsung Notebook 9",
49+
"image": "samsung-notebook-9.jpg",
50+
"cpu": "Intel Core i7, 8th generation",
51+
"ram": "16GB",
52+
"storage": "256 GB SSD",
53+
"screen": "15-inch, Full HD",
54+
"price": "1499",
55+
"description": "While it may not have the best keyboard in the world, the Samsung Notebook 9 is still one of the best laptops you can buy in 2018. Packed with more horsepower than some MacBook Pros,but at a much lower price, Samsung has crafted a laptop that has just as much substance as it does style. Plus, on top of its killer specs, it’s lightweight and thin, making this one of the most portable 15-inch laptops you can buy today."
56+
}
57+
]

‎99-bonus-1/final/data/img/asus-zenbook-flip-s.jpg‎

248 KB
Loading

‎99-bonus-1/final/data/img/dell-xps-13.png‎

396 KB
Loading

‎99-bonus-1/final/data/img/huawei-matebook-pro.jpg‎

175 KB
Loading

‎99-bonus-1/final/data/img/macbook-pro-15.jpg‎

48.8 KB
Loading

‎99-bonus-1/final/data/img/samsung-notebook-9.jpg‎

253 KB
Loading

‎99-bonus-1/final/index.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
const fs = require('fs');
2+
const http = require('http');
3+
const url = require('url');
4+
5+
const json = fs.readFileSync(`${__dirname}/data/data.json`, 'utf-8');
6+
const laptopData = JSON.parse(json);
7+
8+
const server = http.createServer((req, res) => {
9+
10+
const pathName = url.parse(req.url, true).pathname;
11+
const id = url.parse(req.url, true).query.id;
12+
13+
// PRODUCTS OVERVIEW
14+
if (pathName === '/products' || pathName === '/') {
15+
res.writeHead(200, { 'Content-type': 'text/html'});
16+
17+
fs.readFile(`${__dirname}/templates/template-overview.html`, 'utf-8', (err, data) => {
18+
let overviewOutput = data;
19+
20+
fs.readFile(`${__dirname}/templates/template-card.html`, 'utf-8', (err, data) => {
21+
22+
const cardsOutput = laptopData.map(el => replaceTemplate(data, el)).join('');
23+
overviewOutput = overviewOutput.replace('{%CARDS%}', cardsOutput);
24+
25+
res.end(overviewOutput);
26+
});
27+
});
28+
29+
30+
}
31+
32+
// LAPTOP DETAIL
33+
else if (pathName === '/laptop' && id < laptopData.length) {
34+
res.writeHead(200, { 'Content-type': 'text/html'});
35+
36+
fs.readFile(`${__dirname}/templates/template-laptop.html`, 'utf-8', (err, data) => {
37+
const laptop = laptopData[id];
38+
const output = replaceTemplate(data, laptop);
39+
res.end(output);
40+
});
41+
}
42+
43+
// IMAGES
44+
else if ((/\.(jpg|jpeg|png|gif)$/i).test(pathName)) {
45+
fs.readFile(`${__dirname}/data/img${pathName}`, (err, data) => {
46+
res.writeHead(200, { 'Content-type': 'image/jpg'});
47+
res.end(data);
48+
});
49+
}
50+
51+
// URL NOT FOUND
52+
else {
53+
res.writeHead(404, { 'Content-type': 'text/html'});
54+
res.end('URL was not found on the server!');
55+
}
56+
57+
});
58+
59+
server.listen(1337, '127.0.0.1', () => {
60+
console.log('Listening for requests now');
61+
});
62+
63+
function replaceTemplate(originalHtml, laptop) {
64+
let output = originalHtml.replace(/{%PRODUCTNAME%}/g, laptop.productName);
65+
output = output.replace(/{%IMAGE%}/g, laptop.image);
66+
output = output.replace(/{%PRICE%}/g, laptop.price);
67+
output = output.replace(/{%SCREEN%}/g, laptop.screen);
68+
output = output.replace(/{%CPU%}/g, laptop.cpu);
69+
output = output.replace(/{%STORAGE%}/g, laptop.storage);
70+
output = output.replace(/{%RAM%}/g, laptop.ram);
71+
output = output.replace(/{%DESCRIPTION%}/g, laptop.description);
72+
output = output.replace(/{%ID%}/g, laptop.id);
73+
return output;
74+
}

‎99-bonus-1/final/laptop.html‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<!DOCTYPE html>
2+
<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+
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline|Nunito+Sans" rel="stylesheet">
9+
<link href="css/style.css" rel="stylesheet">
10+
11+
<title>Apple Macbook Pro 2018 /// The Laptop Store!</title>
12+
13+
<style>
14+
*,
15+
*::before,
16+
*::after {
17+
margin: 0;
18+
padding: 0;
19+
box-sizing: inherit;
20+
}
21+
22+
html {
23+
font-size: 62.5%;
24+
box-sizing: border-box;
25+
}
26+
27+
body {
28+
padding: 6rem 4rem 10rem;
29+
line-height: 1.7;
30+
font-family: "Nunito Sans", sans-serif;
31+
color: #555;
32+
min-height: 100vh;
33+
background: linear-gradient(to bottom right, #67b26f, #4ca2cd);
34+
}
35+
36+
h1 {
37+
font-family: "Bungee Inline", sans-serif;
38+
font-weight: 400;
39+
font-size: 6rem;
40+
color: white;
41+
transform: skewY(-5deg);
42+
margin-bottom: 6rem;
43+
text-align: center;
44+
position: relative;
45+
word-spacing: 3px;
46+
}
47+
48+
h1::before {
49+
content: '';
50+
display: block;
51+
height: 65%;
52+
width: 58%;
53+
position: absolute;
54+
top: 105%;
55+
left: 50%;
56+
background: linear-gradient(to bottom, #67b26f, #4ca2cd);
57+
opacity: .8;
58+
z-index: -1;
59+
transform: skewY(370deg) translate(-50%, -50%);
60+
}
61+
62+
.container {
63+
width: 110rem;
64+
margin: 0 auto;
65+
}
66+
67+
.laptop {
68+
width: 70rem;
69+
margin: 0 auto;
70+
background: white;
71+
box-shadow: 0 3rem 6rem 1rem rgba(0, 0, 0, 0.25);
72+
position: relative;
73+
}
74+
75+
.laptop__hero {
76+
position: relative;
77+
}
78+
79+
.laptop__hero::before {
80+
content: '';
81+
display: block;
82+
height: 100%;
83+
width: 100%;
84+
position: absolute;
85+
top: 0;
86+
left: 0;
87+
background-image: linear-gradient(to right bottom, #67b26f, #4ca2cd);
88+
opacity: .4;
89+
}
90+
91+
.laptop__img {
92+
width: 100%;
93+
display: block;
94+
}
95+
96+
.laptop__price {
97+
position: absolute;
98+
top: -3rem;
99+
right: -3rem;
100+
z-index: 100;
101+
background: linear-gradient(to right bottom, #67b26f, #4ca2cd);
102+
height: 14rem;
103+
width: 14rem;
104+
border: 6px solid white;
105+
border-radius: 50%;
106+
transform: rotate(15deg);
107+
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);
108+
color: white;
109+
font-size: 3rem;
110+
font-family: "Bungee Inline", sans-serif;
111+
display: flex;
112+
align-items: center;
113+
justify-content: center;
114+
}
115+
116+
.laptop__back:link,
117+
.laptop__back:visited {
118+
position: absolute;
119+
top: 2rem;
120+
left: 2rem;
121+
font-size: 1.5rem;
122+
color: white;
123+
font-weight: 700;
124+
text-transform: uppercase;
125+
text-decoration: none;
126+
z-index: 1;
127+
border: 2px solid white;
128+
border-radius: 100rem;
129+
padding: 0 2rem;
130+
transition: all .3s;
131+
display: flex;
132+
align-items: center;
133+
}
134+
135+
.laptop__back:hover,
136+
.laptop__back:active {
137+
background-color: white;
138+
color: #555;
139+
}
140+
141+
.laptop__name {
142+
background: linear-gradient(to right, #67b26f, #4ca2cd);
143+
padding: 1.75rem 1rem;
144+
font-family: "Bungee Inline", sans-serif;
145+
font-weight: 400;
146+
font-size: 3.25rem;
147+
color: white;
148+
text-align: center;
149+
word-spacing: 2px;
150+
}
151+
152+
.laptop__details {
153+
background-color: #eee;
154+
padding: 4rem 6rem;
155+
font-size: 1.5rem;
156+
display: grid;
157+
grid-template-columns: 1fr 1fr;
158+
grid-gap: 1.75rem;
159+
}
160+
161+
.laptop__description {
162+
padding: 5rem 6rem;
163+
font-size: 1.6rem;
164+
line-height: 1.8;
165+
}
166+
167+
.laptop__link:link,
168+
.laptop__link:visited {
169+
display: block;
170+
background-color: #5aaa9d;
171+
color: white;
172+
font-size: 1.6rem;
173+
font-weight: 700;
174+
text-transform: uppercase;
175+
text-decoration: none;
176+
padding: 1.5rem;
177+
text-align: center;
178+
display: flex;
179+
align-items: center;
180+
justify-content: center;
181+
transition: all .3s;
182+
}
183+
184+
.laptop__link:hover,
185+
.laptop__link:active {
186+
background-color: #67b26f;
187+
}
188+
189+
.laptop__source {
190+
padding: 0 6rem 3rem;
191+
color: #999;
192+
font-size: 1.2rem;
193+
}
194+
195+
.laptop__source a:link,
196+
.laptop__source a:visited {
197+
color: #999;
198+
}
199+
200+
.laptop__source a:hover,
201+
.laptop__source a:active {
202+
color: #555;
203+
}
204+
205+
.emoji-left {
206+
font-size: 2rem;
207+
margin-right: 1rem;
208+
}
209+
210+
.emoji-right {
211+
font-size: 2rem;
212+
margin-left: 1rem;
213+
}
214+
</style>
215+
</head>
216+
217+
<body>
218+
<div class="container">
219+
<h1>The Laptop Store!</h1>
220+
<figure class="laptop">
221+
<p class="laptop__price">$3199</p>
222+
<a href="overview.html" class="laptop__back"><span class="emoji-left">👈</span>Back</a>
223+
<div class="laptop__hero">
224+
<img src="data/img/macbook-pro-15.jpg" alt="" class="laptop__img">
225+
</div>
226+
<h2 class="laptop__name">Apple Macbook Pro 2018</h2>
227+
<div class="laptop__details">
228+
<p><span class="emoji-left">🖥</span> 15-inch Retina display</p>
229+
<p><span class="emoji-left">🧮</span> 6-core Intel i7, 8th generation</p>
230+
<p><span class="emoji-left">💾</span> 1TB GB SSD of storage</p>
231+
<p><span class="emoji-left">📦</span> 16GB of RAM</p>
232+
</div>
233+
<p class="laptop__description">
234+
If you're after the latest and greatest laptop from Apple, we suggest you look into the 2018 model of
235+
the 15-inch MacBook Pro with Touch Bar. The headline Touch Bar – a thin OLED display at the top of the
236+
keyboard which can be used for any number of things, whether that be auto-suggesting words as you type
237+
or offering Touch ID so you can log in with just your fingerprint – is of course included. It's
238+
certainly retained Apple's sense of style, but it comes at a cost. This is a pricey machine, so you may
239+
want to consider one of the Windows alternatives. But, if you're a steadfast Apple diehard, this is
240+
definitely the best laptop for you!
241+
</p>
242+
<p class="laptop__source">Source: <a href="https://www.techradar.com/news/mobile-computing/laptops/best-laptops-1304361"
243+
target="_blank">https://www.techradar.com/news/mobile-computing/laptops/best-laptops-1304361</a></p>
244+
<a href="#" class="laptop__link">Buy now for $3199 <span class="emoji-right">🥳 😍</span></a>
245+
</figure>
246+
</div>
247+
</body>
248+
249+
</html>

0 commit comments

Comments
 (0)