Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9782d9d

Browse files
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+
]
248 KB
Loading[フレーム]
396 KB
Loading[フレーム]
175 KB
Loading[フレーム]
48.8 KB
Loading[フレーム]
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)

AltStyle によって変換されたページ (->オリジナル) /