totole/complete-node-bootcamp
1
0
Fork 0
mirror of https://github.com/kevin-DL/complete-node-bootcamp.git synced 2026-01-11 19:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit 🚀

Browse Source
This commit is contained in:
Jonas Schmedtmann
2019-06-13 15:43:15 +01:00
commit 7f81af0ddf
1052 changed files with 2123177 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
1-node-farm/final/.prettierrc Normal file
View File

@@ -0,0 +1,3 @@
{
"singleQuote": true
}

57
1-node-farm/final/dev-data/data.json Normal file
View File

@@ -0,0 +1,57 @@
[
{
"id": 0,
"productName": "Fresh Avocados",
"image": "🥑",
"from": "Spain",
"nutrients": "Vitamin B, Vitamin K",
"quantity": "4 🥑",
"price": "6.50",
"organic": true,
"description": "A ripe avocado yields to gentle pressure when held in the palm of the hand and squeezed. The fruit is not sweet, but distinctly and subtly flavored, with smooth texture. The avocado is popular in vegetarian cuisine as a substitute for meats in sandwiches and salads because of its high fat content. Generally, avocado is served raw, though some cultivars, including the common 'Hass', can be cooked for a short time without becoming bitter. It is used as the base for the Mexican dip known as guacamole, as well as a spread on corn tortillas or toast, served with spices."
},
{
"id": 1,
"productName": "Goat and Sheep Cheese",
"image": "🧀",
"from": "Portugal",
"nutrients": "Vitamin A, Calcium",
"quantity": "250g",
"price": "5.00",
"organic": false,
"description": "Creamy and distinct in flavor, goat cheese is a dairy product enjoyed around the world. Goat cheese comes in a wide variety of flavors and textures, from soft and spreadable fresh cheese to salty, crumbly aged cheese. Although it’s made using the same coagulation and separation process as cheese made from cow’s milk, goat cheese differs in nutrient content."
},
{
"id": 2,
"productName": "Apollo Broccoli",
"image": "🥦",
"from": "Portugal",
"nutrients": "Vitamin C, Vitamin K",
"quantity": "3 🥦",
"price": "5.50",
"organic": true,
"description": "Broccoli is known to be a hearty and tasty vegetable which is rich in dozens of nutrients. It is said to pack the most nutritional punch of any vegetable. When we think about green vegetables to include in our diet, broccoli is one of the foremost veggies to come to our mind. Broccoli is a cruciferous vegetable and part of the cabbage family, which includes vegetables such as Brussel sprouts and kale. Although the tastes are different, broccoli and these other vegetables are from the same family."
},
{
"id": 3,
"productName": "Baby Carrots",
"image": "🥕",
"from": "France",
"nutrients": "Vitamin A, Vitamin K",
"quantity": "20 🥕",
"price": "3.00",
"organic": true,
"description": "The carrot is a root vegetable that is often claimed to be the perfect health food. It is crunchy, tasty and highly nutritious. Carrots are a particularly good source of beta-carotene, fiber, vitamin K, potassium and antioxidants. Carrots have a number of health benefits. They are a weight loss friendly food and have been linked to lower cholesterol levels and improved eye health."
},
{
"id": 4,
"productName": "Sweet Corncobs",
"image": "🌽",
"from": "Germany",
"nutrients": "Vitamin C, Magnesium",
"quantity": "2 🌽",
"price": "2.00",
"organic": false,
"description": "Also known as maize, corn is one of the most popular cereal grains in the world. Popcorn and sweet corn are commonly eaten varieties, but refined corn products are also widely consumed, frequently as ingredients in foods. These include tortillas, tortilla chips, polenta, cornmeal, corn flour, corn syrup, and corn oil. Whole-grain corn is as healthy as any cereal grain, rich in fiber and many vitamins, minerals, and antioxidants."
}
]

96
1-node-farm/final/index.js Normal file
View File

@@ -0,0 +1,96 @@
const fs = require('fs');
const http = require('http');
const url = require('url');
const slugify = require('slugify');
const replaceTemplate = require('./modules/replaceTemplate');
/////////////////////////////////
// FILES
// Blocking, synchronous way
// const textIn = fs.readFileSync('./txt/input.txt', 'utf-8');
// console.log(textIn);
// const textOut = `This is what we know about the avocado: ${textIn}.\nCreated on ${Date.now()}`;
// fs.writeFileSync('./txt/output.txt', textOut);
// console.log('File written!');
// Non-blocking, asynchronous way
// fs.readFile('./txt/start.txt', 'utf-8', (err, data1) => {
// if (err) return console.log('ERROR! 💥');
// fs.readFile(`./txt/${data1}.txt`, 'utf-8', (err, data2) => {
// console.log(data2);
// fs.readFile('./txt/append.txt', 'utf-8', (err, data3) => {
// console.log(data3);
// fs.writeFile('./txt/final.txt', `${data2}\n${data3}`, 'utf-8', err => {
// console.log('Your file has been written 😁');
// })
// });
// });
// });
// console.log('Will read file!');
/////////////////////////////////
// SERVER
const tempOverview = fs.readFileSync(
`${__dirname}/templates/template-overview.html`,
'utf-8'
);
const tempCard = fs.readFileSync(
`${__dirname}/templates/template-card.html`,
'utf-8'
);
const tempProduct = fs.readFileSync(
`${__dirname}/templates/template-product.html`,
'utf-8'
);
const data = fs.readFileSync(`${__dirname}/dev-data/data.json`, 'utf-8');
const dataObj = JSON.parse(data);
const slugs = dataObj.map(el => slugify(el.productName, { lower: true }));
console.log(slugs);
const server = http.createServer((req, res) => {
const { query, pathname } = url.parse(req.url, true);
// Overview page
if (pathname === '/' || pathname === '/overview') {
res.writeHead(200, {
'Content-type': 'text/html'
});
const cardsHtml = dataObj.map(el => replaceTemplate(tempCard, el)).join('');
const output = tempOverview.replace('{%PRODUCT_CARDS%}', cardsHtml);
res.end(output);
// Product page
} else if (pathname === '/product') {
res.writeHead(200, {
'Content-type': 'text/html'
});
const product = dataObj[query.id];
const output = replaceTemplate(tempProduct, product);
res.end(output);
// API
} else if (pathname === '/api') {
res.writeHead(200, {
'Content-type': 'application/json'
});
res.end(data);
// Not found
} else {
res.writeHead(404, {
'Content-type': 'text/html',
'my-own-header': 'hello-world'
});
res.end('<h1>Page not found!</h1>');
}
});
server.listen(8000, '127.0.0.1', () => {
console.log('Listening to requests on port 8000');
});

13
1-node-farm/final/modules/replaceTemplate.js Normal file
View File

@@ -0,0 +1,13 @@
module.exports = (temp, product) => {
let output = temp.replace(/{%PRODUCTNAME%}/g, product.productName);
output = output.replace(/{%IMAGE%}/g, product.image);
output = output.replace(/{%PRICE%}/g, product.price);
output = output.replace(/{%FROM%}/g, product.from);
output = output.replace(/{%NUTRIENTS%}/g, product.nutrients);
output = output.replace(/{%QUANTITY%}/g, product.quantity);
output = output.replace(/{%DESCRIPTION%}/g, product.description);
output = output.replace(/{%ID%}/g, product.id);
if(!product.organic) output = output.replace(/{%NOT_ORGANIC%}/g, 'not-organic');
return output;
}

2558
1-node-farm/final/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
1-node-farm/final/package.json Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "node-farm",
"version": "1.0.0",
"description": "Learning node.js",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
},
"author": "Jonas Schmedtmann",
"license": "ISC",
"dependencies": {
"slugify": "~1.3.4"
},
"devDependencies": {
"nodemon": "^1.18.11"
}
}

24
1-node-farm/final/templates/template-card.html Normal file
View File

@@ -0,0 +1,24 @@
<figure class="card">
<div class="card__emoji">{%IMAGE%}{%IMAGE%}</div>
<div class="card__title-box">
<h2 class="card__title">{%PRODUCTNAME%}</h2>
</div>
<div class="card__details">
<div class="card__detail-box {%NOT_ORGANIC%}">
<h6 class="card__detail card__detail--organic">Organic!</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail">{%QUANTITY%} per 📦</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail card__detail--price">{%PRICE%}€</h6>
</div>
</div>
<a class="card__link" href="/product?id={%ID%}">
<span>Detail <i class="emoji-right">👉</i></span>
</a>
</figure>

199
1-node-farm/final/templates/template-overview.html Normal file
View File

@@ -0,0 +1,199 @@
<!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" />
<link
href="https://fonts.googleapis.com/css?family=Megrim|Nunito+Sans:400,900"
rel="stylesheet"
/>
<link
rel="icon"
href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/ear-of-maize_1f33d.png"
/>
<title>NODE FARM</title>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
padding: 5rem 5rem 10rem;
line-height: 1.7;
font-family: 'Nunito Sans', sans-serif;
color: #555;
min-height: 100vh;
background: linear-gradient(to bottom right, #9be15d, #00e3ae);
}
h1 {
font-family: 'Megrim', sans-serif;
font-size: 6rem;
color: white;
transform: skewY(-5deg);
text-align: center;
position: relative;
word-spacing: 3px;
}
h1::before {
content: '';
display: block;
height: 65%;
width: 49%;
position: absolute;
top: 105%;
left: 50%;
background: linear-gradient(to bottom, #9be15d, #00e3ae);
opacity: 0.8;
z-index: -1;
transform: skewY(370deg) translate(-50%, -50%);
}
.container {
width: 95rem;
margin: 0 auto;
}
.cards-container {
margin-top: 8rem;
}
.card {
background: white;
box-shadow: 0 2rem 6rem 1rem rgba(0, 0, 0, 0.15);
margin-bottom: 5rem;
transform: skewX(-20deg);
display: flex;
transition: all 0.5s;
}
.card__emoji {
font-size: 5.5rem;
line-height: 1.2;
padding: 1.5rem 6rem 0.5rem 1.5rem;
letter-spacing: -4rem;
transform: skewX(20deg);
}
.card__title-box {
background: linear-gradient(to bottom, #9be15d, #00e3ae);
margin-right: auto;
display: flex;
align-items: center;
padding: 0 3rem;
}
.card__title {
font-family: 'Megrim', sans-serif;
color: white;
font-size: 3.25rem;
transform: skewX(20deg);
}
.card__details {
display: flex;
}
.card__detail-box {
align-self: stretch;
border-right: 1px solid #ddd;
display: flex;
align-items: center;
}
.card__detail-box:last-child {
border: none;
}
.card__detail {
font-weight: 400;
font-size: 1.8rem;
transform: skewX(20deg);
padding: 1.75rem;
}
.card__detail--organic {
font-weight: 900;
text-transform: uppercase;
font-size: 1.9rem;
background-image: linear-gradient(to right, #9be15d, #00e3ae);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card__detail--price {
font-weight: 900;
font-size: 1.9rem;
}
.card__link:link,
.card__link:visited {
flex: 0 0 auto;
background-color: #79e17b;
color: white;
font-size: 1.6rem;
font-weight: 900;
text-transform: uppercase;
text-decoration: none;
padding: 2.5rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.card__link:hover,
.card__link:active {
background-color: #9be15d;
}
.card__link span {
transform: skewX(20deg);
}
.card:hover {
transform: skewX(-20deg) scale(1.08);
box-shadow: 0 3rem 8rem 2rem rgba(0, 0, 0, 0.15);
}
.emoji-left {
font-size: 2rem;
margin-right: 1rem;
}
.emoji-right {
font-size: 2rem;
margin-left: 1rem;
}
.not-organic {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>🌽 Node Farm 🥦</h1>
<div class="cards-container">
{%PRODUCT_CARDS%}
</div>
</div>
</body>
</html>

308
1-node-farm/final/templates/template-product.html Normal file
View File

@@ -0,0 +1,308 @@
<!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" />
<link
href="https://fonts.googleapis.com/css?family=Megrim|Nunito+Sans:400,900"
rel="stylesheet"
/>
<link
rel="icon"
href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/ear-of-maize_1f33d.png"
/>
<title>{%PRODUCTNAME%} {%IMAGE%} /// NODE FARM</title>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
padding: 5rem 5rem 10rem;
line-height: 1.7;
font-family: 'Nunito Sans', sans-serif;
color: #555;
min-height: 100vh;
background: linear-gradient(to bottom right, #9be15d, #00e3ae);
}
h1 {
font-family: 'Megrim', sans-serif;
font-size: 6rem;
color: white;
transform: skewY(-5deg);
text-align: center;
position: relative;
word-spacing: 3px;
}
h1::before {
content: '';
display: block;
height: 65%;
width: 49%;
position: absolute;
top: 105%;
left: 50%;
background: linear-gradient(to bottom, #9be15d, #00e3ae);
opacity: 0.8;
z-index: -1;
transform: skewY(370deg) translate(-50%, -50%);
}
.container {
width: 95rem;
margin: 0 auto;
}
.product {
width: 60rem;
margin: 0 auto;
margin-top: 9rem;
background: white;
box-shadow: 0 3rem 6rem 1rem rgba(0, 0, 0, 0.2);
position: relative;
}
.product__hero {
position: relative;
height: 22rem;
overflow: hidden;
}
.product__hero::before {
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(to left bottom, #9be15d, #00e3ae);
opacity: 0.5;
z-index: 100;
}
.product__emoji {
font-size: 15rem;
position: absolute;
}
.product__emoji--1 {
top: -4rem;
left: -2rem;
z-index: 10;
}
.product__emoji--2 {
top: -6rem;
left: 9rem;
}
.product__emoji--3 {
top: -4rem;
right: 15rem;
}
.product__emoji--4 {
top: -5rem;
right: 2rem;
z-index: 10;
}
.product__emoji--5 {
bottom: -9rem;
left: 18rem;
}
.product__emoji--6 {
bottom: -8rem;
left: 5rem;
}
.product__emoji--7 {
bottom: -12rem;
right: 14rem;
}
.product__emoji--8 {
bottom: -8rem;
right: -2rem;
}
.product__emoji--9 {
top: -7rem;
left: 19rem;
}
.product__organic {
position: absolute;
top: -4rem;
right: -4rem;
z-index: 1000;
height: 11rem;
width: 11rem;
background-image: linear-gradient(to bottom, #9be15d, #00e3ae);
border-radius: 50%;
transform: rotate(15deg);
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.product__organic h5 {
font-weight: 900;
text-transform: uppercase;
font-size: 1.8rem;
color: white;
}
.product__back:link,
.product__back:visited {
position: absolute;
top: 2rem;
left: 2rem;
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
z-index: 1000;
color: #555;
background-color: white;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
border-radius: 100rem;
padding: 0 2rem;
transition: all 0.3s;
display: flex;
align-items: center;
}
.product__back:hover,
.product__back:active {
background-color: #79e17b;
}
.product__name {
background: linear-gradient(to bottom, #9be15d, #00e3ae);
padding: 1rem;
font-family: 'Megrim', sans-serif;
font-size: 4rem;
color: white;
text-align: center;
word-spacing: 2px;
}
.product__details {
background-color: #eee;
padding: 4rem 6rem;
font-size: 1.9rem;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1.5rem;
}
.product__description {
padding: 5rem 6rem;
font-size: 1.6rem;
line-height: 1.8;
}
.product__link:link,
.product__link:visited {
display: block;
background-color: #79e17b;
color: white;
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem;
text-align: center;
transform: scale(1.07) skewX(-20deg);
box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.product__link:hover,
.product__link:active {
background-color: #9be15d;
transform: scale(1.1) skewX(-20deg);
}
.product__link span {
transform: skewX(20deg);
}
.emoji-left {
font-size: 2rem;
margin-right: 1rem;
}
.emoji-right {
font-size: 2rem;
margin-left: 1rem;
}
.not-organic {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>🌽 Node Farm 🥦</h1>
<figure class="product">
<div class="product__organic {%NOT_ORGANIC%}"><h5>Organic</h5></div>
<a href="/overview" class="product__back">
<span class="emoji-left">👈</span>Back
</a>
<div class="product__hero">
<span class="product__emoji product__emoji--1">{%IMAGE%}</span>
<span class="product__emoji product__emoji--2">{%IMAGE%}</span>
<span class="product__emoji product__emoji--3">{%IMAGE%}</span>
<span class="product__emoji product__emoji--4">{%IMAGE%}</span>
<span class="product__emoji product__emoji--5">{%IMAGE%}</span>
<span class="product__emoji product__emoji--6">{%IMAGE%}</span>
<span class="product__emoji product__emoji--7">{%IMAGE%}</span>
<span class="product__emoji product__emoji--8">{%IMAGE%}</span>
<span class="product__emoji product__emoji--9">{%IMAGE%}</span>
</div>
<h2 class="product__name">{%PRODUCTNAME%}</h2>
<div class="product__details">
<p><span class="emoji-left">🌍</span>From {%FROM%}</p>
<p><span class="emoji-left">❤️</span>{%NUTRIENTS%}</p>
<p><span class="emoji-left">📦</span>{%QUANTITY%}</p>
<p><span class="emoji-left">🏷</span>{%PRICE%}€</p>
</div>
<a href="#" class="product__link">
<span class="emoji-left">🛒</span>
<span>Add to shopping card ({%PRICE%}€)</span>
</a>
<p class="product__description">
{%DESCRIPTION%}
</p>
</figure>
</div>
</body>
</html>

1
1-node-farm/final/txt/append.txt Normal file
View File

@@ -0,0 +1 @@
APPENDIX: Generally, avocados 🥑 are served raw, but some cultivars can be cooked for a short time without becoming bitter.

2
1-node-farm/final/txt/final.txt Normal file
View File

@@ -0,0 +1,2 @@
The avocado 🥑 is also used as the base for the Mexican dip known as guacamole, as well as a spread on corn tortillas or toast, served with spices.
APPENDIX: Generally, avocados 🥑 are served raw, but some cultivars can be cooked for a short time without becoming bitter.

1
1-node-farm/final/txt/input.txt Normal file
View File

@@ -0,0 +1 @@
The avocado 🥑 is popular in vegetarian cuisine as a substitute for meats in sandwiches and salads because of its high fat content 😄

2
1-node-farm/final/txt/output.txt Normal file
View File

@@ -0,0 +1,2 @@
This is what we know about the avocado: The avocado 🥑 is popular in vegetarian cuisine as a substitute for meats in sandwiches and salads because of its high fat content 😄.
Created on 1555080042101

1
1-node-farm/final/txt/read-this.txt Normal file
View File

@@ -0,0 +1 @@
The avocado 🥑 is also used as the base for the Mexican dip known as guacamole, as well as a spread on corn tortillas or toast, served with spices.

1
1-node-farm/final/txt/start.txt Normal file
View File

@@ -0,0 +1 @@
read-this

57
1-node-farm/starter/dev-data/data.json Normal file
View File

@@ -0,0 +1,57 @@
[
{
"id": 0,
"productName": "Fresh Avocados",
"image": "🥑",
"from": "Spain",
"nutrients": "Vitamin B, Vitamin K",
"quantity": "4 🥑",
"price": "6.50",
"organic": true,
"description": "A ripe avocado yields to gentle pressure when held in the palm of the hand and squeezed. The fruit is not sweet, but distinctly and subtly flavored, with smooth texture. The avocado is popular in vegetarian cuisine as a substitute for meats in sandwiches and salads because of its high fat content. Generally, avocado is served raw, though some cultivars, including the common 'Hass', can be cooked for a short time without becoming bitter. It is used as the base for the Mexican dip known as guacamole, as well as a spread on corn tortillas or toast, served with spices."
},
{
"id": 1,
"productName": "Goat and Sheep Cheese",
"image": "🧀",
"from": "Portugal",
"nutrients": "Vitamin A, Calcium",
"quantity": "250g",
"price": "5.00",
"organic": false,
"description": "Creamy and distinct in flavor, goat cheese is a dairy product enjoyed around the world. Goat cheese comes in a wide variety of flavors and textures, from soft and spreadable fresh cheese to salty, crumbly aged cheese. Although it’s made using the same coagulation and separation process as cheese made from cow’s milk, goat cheese differs in nutrient content."
},
{
"id": 2,
"productName": "Apollo Broccoli",
"image": "🥦",
"from": "Portugal",
"nutrients": "Vitamin C, Vitamin K",
"quantity": "3 🥦",
"price": "5.50",
"organic": true,
"description": "Broccoli is known to be a hearty and tasty vegetable which is rich in dozens of nutrients. It is said to pack the most nutritional punch of any vegetable. When we think about green vegetables to include in our diet, broccoli is one of the foremost veggies to come to our mind. Broccoli is a cruciferous vegetable and part of the cabbage family, which includes vegetables such as Brussel sprouts and kale. Although the tastes are different, broccoli and these other vegetables are from the same family."
},
{
"id": 3,
"productName": "Baby Carrots",
"image": "🥕",
"from": "France",
"nutrients": "Vitamin A, Vitamin K",
"quantity": "20 🥕",
"price": "3.00",
"organic": true,
"description": "The carrot is a root vegetable that is often claimed to be the perfect health food. It is crunchy, tasty and highly nutritious. Carrots are a particularly good source of beta-carotene, fiber, vitamin K, potassium and antioxidants. Carrots have a number of health benefits. They are a weight loss friendly food and have been linked to lower cholesterol levels and improved eye health."
},
{
"id": 4,
"productName": "Sweet Corncobs",
"image": "🌽",
"from": "Germany",
"nutrients": "Vitamin C, Magnesium",
"quantity": "2 🌽",
"price": "2.00",
"organic": false,
"description": "Also known as maize, corn is one of the most popular cereal grains in the world. Popcorn and sweet corn are commonly eaten varieties, but refined corn products are also widely consumed, frequently as ingredients in foods. These include tortillas, tortilla chips, polenta, cornmeal, corn flour, corn syrup, and corn oil. Whole-grain corn is as healthy as any cereal grain, rich in fiber and many vitamins, minerals, and antioxidants."
}
]

315
1-node-farm/starter/templates/overview.html Normal file
View File

@@ -0,0 +1,315 @@
<!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" />
<link
href="https://fonts.googleapis.com/css?family=Megrim|Nunito+Sans:400,900"
rel="stylesheet"
/>
<link
rel="icon"
href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/ear-of-maize_1f33d.png"
/>
<title>NODE FARM</title>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
padding: 5rem 5rem 10rem;
line-height: 1.7;
font-family: 'Nunito Sans', sans-serif;
color: #555;
min-height: 100vh;
background: linear-gradient(to bottom right, #9be15d, #00e3ae);
}
h1 {
font-family: 'Megrim', sans-serif;
font-size: 6rem;
color: white;
transform: skewY(-5deg);
text-align: center;
position: relative;
word-spacing: 3px;
}
h1::before {
content: '';
display: block;
height: 65%;
width: 49%;
position: absolute;
top: 105%;
left: 50%;
background: linear-gradient(to bottom, #9be15d, #00e3ae);
opacity: 0.8;
z-index: -1;
transform: skewY(370deg) translate(-50%, -50%);
}
.container {
width: 95rem;
margin: 0 auto;
}
.cards-container {
margin-top: 8rem;
}
.card {
background: white;
box-shadow: 0 2rem 6rem 1rem rgba(0, 0, 0, 0.15);
margin-bottom: 5rem;
transform: skewX(-20deg);
display: flex;
transition: all 0.5s;
}
.card__emoji {
font-size: 5.5rem;
line-height: 1.2;
padding: 1.5rem 6rem 0.5rem 1.5rem;
letter-spacing: -4rem;
transform: skewX(20deg);
}
.card__title-box {
background: linear-gradient(to bottom, #9be15d, #00e3ae);
margin-right: auto;
display: flex;
align-items: center;
padding: 0 3rem;
}
.card__title {
font-family: 'Megrim', sans-serif;
color: white;
font-size: 3.25rem;
transform: skewX(20deg);
}
.card__details {
display: flex;
}
.card__detail-box {
align-self: stretch;
border-right: 1px solid #ddd;
display: flex;
align-items: center;
}
.card__detail-box:last-child {
border: none;
}
.card__detail {
font-weight: 400;
font-size: 1.8rem;
transform: skewX(20deg);
padding: 1.75rem;
}
.card__detail--organic {
font-weight: 900;
text-transform: uppercase;
font-size: 1.9rem;
background-image: linear-gradient(to right, #9be15d, #00e3ae);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card__detail--price {
font-weight: 900;
font-size: 1.9rem;
}
.card__link:link,
.card__link:visited {
flex: 0 0 auto;
background-color: #79e17b;
color: white;
font-size: 1.6rem;
font-weight: 900;
text-transform: uppercase;
text-decoration: none;
padding: 2.5rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.card__link:hover,
.card__link:active {
background-color: #9be15d;
}
.card__link span {
transform: skewX(20deg);
}
.card:hover {
transform: skewX(-20deg) scale(1.08);
box-shadow: 0 3rem 8rem 2rem rgba(0, 0, 0, 0.15);
}
.emoji-left {
font-size: 2rem;
margin-right: 1rem;
}
.emoji-right {
font-size: 2rem;
margin-left: 1rem;
}
.not-organic {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>🌽 Node Farm 🥦</h1>
<div class="cards-container">
<figure class="card">
<div class="card__emoji">🥑🥑</div>
<div class="card__title-box">
<h2 class="card__title">Fresh Avocado</h2>
</div>
<div class="card__details">
<div class="card__detail-box">
<h6 class="card__detail card__detail--organic">Organic!</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail">4 🥑 per 📦</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail card__detail--price">6.50€</h6>
</div>
</div>
<a class="card__link" href="#">
<span>Detail <i class="emoji-right">👉</i></span>
</a>
</figure>
<figure class="card">
<div class="card__emoji">🧀🧀</div>
<div class="card__title-box">
<h2 class="card__title">Goat and Sheep Cheese</h2>
</div>
<div class="card__details">
<div class="card__detail-box">
<h6 class="card__detail">250g per 📦</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail card__detail--price">5.00€</h6>
</div>
</div>
<a class="card__link" href="#">
<span>Detail <i class="emoji-right">👉</i></span>
</a>
</figure>
<figure class="card">
<div class="card__emoji">🥦🥦</div>
<div class="card__title-box">
<h2 class="card__title">Apollo Broccoli</h2>
</div>
<div class="card__details">
<div class="card__detail-box">
<h6 class="card__detail card__detail--organic">Organic!</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail">3 🥦 per 📦</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail card__detail--price">5.50€</h6>
</div>
</div>
<a class="card__link" href="#">
<span>Detail <i class="emoji-right">👉</i></span>
</a>
</figure>
<figure class="card">
<div class="card__emoji">🥕🥕</div>
<div class="card__title-box">
<h2 class="card__title">Baby Carrots</h2>
</div>
<div class="card__details">
<div class="card__detail-box">
<h6 class="card__detail card__detail--organic">Organic!</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail">20 🥕 per 📦</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail card__detail--price">3.00€</h6>
</div>
</div>
<a class="card__link" href="#">
<span>Detail <i class="emoji-right">👉</i></span>
</a>
</figure>
<figure class="card">
<div class="card__emoji">🌽🌽</div>
<div class="card__title-box">
<h2 class="card__title">Sweet Corncobs</h2>
</div>
<div class="card__details">
<div class="card__detail-box">
<h6 class="card__detail">2 🌽 per 📦</h6>
</div>
<div class="card__detail-box">
<h6 class="card__detail card__detail--price">2.00€</h6>
</div>
</div>
<a class="card__link" href="#">
<span>Detail <i class="emoji-right">👉</i></span>
</a>
</figure>
</div>
</div>
</body>
</html>

316
1-node-farm/starter/templates/product.html Normal file
View File

@@ -0,0 +1,316 @@
<!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" />
<link
href="https://fonts.googleapis.com/css?family=Megrim|Nunito+Sans:400,900"
rel="stylesheet"
/>
<link
rel="icon"
href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/ear-of-maize_1f33d.png"
/>
<title>Fresh Avocados 🥑 /// NODE FARM</title>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
padding: 5rem 5rem 10rem;
line-height: 1.7;
font-family: 'Nunito Sans', sans-serif;
color: #555;
min-height: 100vh;
background: linear-gradient(to bottom right, #9be15d, #00e3ae);
}
h1 {
font-family: 'Megrim', sans-serif;
font-size: 6rem;
color: white;
transform: skewY(-5deg);
text-align: center;
position: relative;
word-spacing: 3px;
}
h1::before {
content: '';
display: block;
height: 65%;
width: 49%;
position: absolute;
top: 105%;
left: 50%;
background: linear-gradient(to bottom, #9be15d, #00e3ae);
opacity: 0.8;
z-index: -1;
transform: skewY(370deg) translate(-50%, -50%);
}
.container {
width: 95rem;
margin: 0 auto;
}
.product {
width: 60rem;
margin: 0 auto;
margin-top: 9rem;
background: white;
box-shadow: 0 3rem 6rem 1rem rgba(0, 0, 0, 0.2);
position: relative;
}
.product__hero {
position: relative;
height: 22rem;
overflow: hidden;
}
.product__hero::before {
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(to left bottom, #9be15d, #00e3ae);
opacity: 0.5;
z-index: 100;
}
.product__emoji {
font-size: 15rem;
position: absolute;
}
.product__emoji--1 {
top: -4rem;
left: -2rem;
z-index: 10;
}
.product__emoji--2 {
top: -6rem;
left: 9rem;
}
.product__emoji--3 {
top: -4rem;
right: 15rem;
}
.product__emoji--4 {
top: -5rem;
right: 2rem;
z-index: 10;
}
.product__emoji--5 {
bottom: -9rem;
left: 18rem;
}
.product__emoji--6 {
bottom: -8rem;
left: 5rem;
}
.product__emoji--7 {
bottom: -12rem;
right: 14rem;
}
.product__emoji--8 {
bottom: -8rem;
right: -2rem;
}
.product__emoji--9 {
top: -7rem;
left: 19rem;
}
.product__organic {
position: absolute;
top: -4rem;
right: -4rem;
z-index: 1000;
height: 11rem;
width: 11rem;
background-image: linear-gradient(to bottom, #9be15d, #00e3ae);
border-radius: 50%;
transform: rotate(15deg);
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.product__organic h5 {
font-weight: 900;
text-transform: uppercase;
font-size: 1.8rem;
color: white;
}
.product__back:link,
.product__back:visited {
position: absolute;
top: 2rem;
left: 2rem;
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
z-index: 1000;
color: #555;
background-color: white;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
border-radius: 100rem;
padding: 0 2rem;
transition: all 0.3s;
display: flex;
align-items: center;
}
.product__back:hover,
.product__back:active {
background-color: #79e17b;
}
.product__name {
background: linear-gradient(to bottom, #9be15d, #00e3ae);
padding: 1rem;
font-family: 'Megrim', sans-serif;
font-size: 4rem;
color: white;
text-align: center;
word-spacing: 2px;
}
.product__details {
background-color: #eee;
padding: 4rem 6rem;
font-size: 1.9rem;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1.5rem;
}
.product__description {
padding: 5rem 6rem;
font-size: 1.6rem;
line-height: 1.8;
}
.product__link:link,
.product__link:visited {
display: block;
background-color: #79e17b;
color: white;
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem;
text-align: center;
transform: scale(1.07) skewX(-20deg);
box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.product__link:hover,
.product__link:active {
background-color: #9be15d;
transform: scale(1.1) skewX(-20deg);
}
.product__link span {
transform: skewX(20deg);
}
.emoji-left {
font-size: 2rem;
margin-right: 1rem;
}
.emoji-right {
font-size: 2rem;
margin-left: 1rem;
}
.not-organic {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>🌽 Node Farm 🥦</h1>
<figure class="product">
<div class="product__organic"><h5>Organic</h5></div>
<a href="#" class="product__back">
<span class="emoji-left">👈</span>Back
</a>
<div class="product__hero">
<span class="product__emoji product__emoji--1">🥑</span>
<span class="product__emoji product__emoji--2">🥑</span>
<span class="product__emoji product__emoji--3">🥑</span>
<span class="product__emoji product__emoji--4">🥑</span>
<span class="product__emoji product__emoji--5">🥑</span>
<span class="product__emoji product__emoji--6">🥑</span>
<span class="product__emoji product__emoji--7">🥑</span>
<span class="product__emoji product__emoji--8">🥑</span>
<span class="product__emoji product__emoji--9">🥑</span>
</div>
<h2 class="product__name">Fresh Avocados</h2>
<div class="product__details">
<p><span class="emoji-left">🌍</span> From Portugal</p>
<p><span class="emoji-left">❤️</span> Vitamin B, Vitamin K</p>
<p><span class="emoji-left">📦</span> 4 🥑</p>
<p><span class="emoji-left">🏷</span> 6.50€</p>
</div>
<a href="#" class="product__link">
<span class="emoji-left">🛒</span>
<span>Add to shopping card (6.50€)</span>
</a>
<p class="product__description">
A ripe avocado yields to gentle pressure when held in the palm of the
hand and squeezed. The fruit is not sweet, but distinctly and subtly
flavored, with smooth texture. The avocado is popular in vegetarian
cuisine as a substitute for meats in sandwiches and salads because of
its high fat content. Generally, avocado is served raw, though some
cultivars, including the common 'Hass', can be cooked for a short time
without becoming bitter. It is used as the base for the Mexican dip
known as guacamole, as well as a spread on corn tortillas or toast,
served with spices.
</p>
</figure>
</div>
</body>
</html>

1
1-node-farm/starter/txt/append.txt Normal file
View File

@@ -0,0 +1 @@
APPENDIX: Generally, avocados 🥑 are served raw, but some cultivars can be cooked for a short time without becoming bitter.

1
1-node-farm/starter/txt/final.txt Normal file
View File

@@ -0,0 +1 @@
The avocado 🥑 is also used as the base for the Mexican dip known as guacamole, as well as a spread on corn tortillas or toast, served with spices. APPENDIX: Generally, avocados 🥑 are served raw, but some cultivars can be cooked for a short time without becoming bitter.

1
1-node-farm/starter/txt/input.txt Normal file
View File

@@ -0,0 +1 @@
The avocado 🥑 is popular in vegetarian cuisine as a substitute for meats in sandwiches and salads because of its high fat content 😄

1
1-node-farm/starter/txt/read-this.txt Normal file
View File

@@ -0,0 +1 @@
The avocado 🥑 is also used as the base for the Mexican dip known as guacamole, as well as a spread on corn tortillas or toast, served with spices.

1
1-node-farm/starter/txt/start.txt Normal file
View File

@@ -0,0 +1 @@
read-this