├── README.md
├── dev-data
    └── data.json
├── index.js
├── templates
    ├── template-card.html
    ├── template-overview.html
    └── template-product.html
└── txt
    ├── append.txt
    ├── final.txt
    ├── input.txt
    ├── output.txt
    ├── read-this.txt
    └── start.txt


/README.md:
--------------------------------------------------------------------------------
 1 | Project name:Node Farm<br>
 2 | 👇👇👇👇👇👇👇👇<br>
 3 | My Node Farm project is my first project in node js, in this project the data is taken from a json file and it works through an http server
 4 | 
 5 | <h4 style='color:green'>Run the following commands to clone the project and install the required libraries:</h4>
 6 | git clone: <a>https://github.com/SardorbekCoder07/nodeJS_First_Project.git</a><br>
 7 | cd nodeJS_First_Project <br>
 8 | Download the project : npm install <br>
 9 | Open your terminal : node index.js <br>
10 | Reminder!!!<br>
11 | If you rename the index.js file, the node index.js command will not work <br>
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/dev-data/data.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": 0,
 4 |     "productName": "Fresh Avocados",
 5 |     "image": "🥑",
 6 |     "from": "Spain",
 7 |     "nutrients": "Vitamin B, Vitamin K",
 8 |     "quantity": "4 🥑",
 9 |     "price": "6.50",
10 |     "organic": true,
11 |     "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."
12 |   },
13 |   {
14 |     "id": 1,
15 |     "productName": "Goat and Sheep Cheese",
16 |     "image": "🧀",
17 |     "from": "Portugal",
18 |     "nutrients": "Vitamin A, Calcium",
19 |     "quantity": "250g",
20 |     "price": "5.00",
21 |     "organic": false,
22 |     "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."
23 |   },
24 |   {
25 |     "id": 2,
26 |     "productName": "Apollo Broccoli",
27 |     "image": "🥦",
28 |     "from": "Portugal",
29 |     "nutrients": "Vitamin C, Vitamin K",
30 |     "quantity": "3 🥦",
31 |     "price": "5.50",
32 |     "organic": true,
33 |     "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."
34 |   },
35 |   {
36 |     "id": 3,
37 |     "productName": "Baby Carrots",
38 |     "image": "🥕",
39 |     "from": "France",
40 |     "nutrients": "Vitamin A, Vitamin K",
41 |     "quantity": "20 🥕",
42 |     "price": "3.00",
43 |     "organic": true,
44 |     "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."
45 |   },
46 |   {
47 |     "id":4 ,
48 |     "productName": "Apple Carrots",
49 |     "image": "🍎🍏",
50 |     "from": "Uzbekistan",
51 |     "nutrients": "Vitamin A, Vitamin K",
52 |     "quantity": "20 🍎🍏",
53 |     "price": "3.00",
54 |     "organic": true,
55 |     "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."
56 |   },
57 |   {
58 |     "id": 5,
59 |     "productName": "Sweet Corncobs",
60 |     "image": "🌽",
61 |     "from": "Germany",
62 |     "nutrients": "Vitamin C, Magnesium",
63 |     "quantity": "2 🌽",
64 |     "price": "2.00",
65 |     "organic": false,
66 |     "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."
67 |   }
68 | ]
69 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const { log } = require('console');
 2 | const fs = require('fs');
 3 | const http = require('http');
 4 | const { Logger } = require('sass');
 5 | const URL = require('url')
 6 | 
 7 | //////////////////////////////////////////////////////////////////
 8 | //FILES
 9 | 
10 | 
11 | // const varib=fs.readFileSync('./txt/input.txt','utf-8')
12 | // const textOut=`This is what we know about the avacado: ${varib}.\nCreated on ${Date.now()}`;
13 | // fs.writeFileSync('./txt/output.txt',textOut)
14 | // console.log('file written')
15 | 
16 | //This is section async code
17 | // fs.readFile('./txt/start.txt','utf-8',(err,data1)=>{
18 | //     fs.readFile(`./txt/${data1}.txt`,'utf-8',(err,data2)=>{
19 | //         console.log(data2)
20 | //         fs.readFile('./txt/append.txt','utf-8',(err,data3)=>{
21 | //             console.log(data3);
22 | //             fs.writeFile('./txt/final.txt',`Here is the text;${data2}\n${data3}`,'utf-8',err=>{
23 | //                 console.log('your file has been written');
24 | //             })
25 | //         })
26 | //     })
27 | // })
28 | // console.log('will read file')
29 | //////////////////////////////////////////////////////////////////
30 | // //SERVER
31 | // const server=http.createServer((req,res)=>{
32 | //     console.log(req);
33 | //     res.end('Hello from the server')
34 | // })
35 | // server.listen(8000,'127.0.0.1',()=>{
36 | //     console.log('listening on port 7000');
37 | // })
38 | const replaceTemplate = (temp, product) => {
39 |     let output = temp.replace(/{%PRODUCTNAME%}/g, product.productName)
40 |     output = output.replace(/{%IMAGE%}/g, product.image)
41 |     output = output.replace(/{%PRICE%}/g, product.price)
42 |     output = output.replace(/{%FROM%}/g, product.from)
43 |     output = output.replace(/{%NUTRIENTS%}/g, product.nutrients)
44 |     output = output.replace(/{%QUANTITY%}/g, product.quantity)
45 |     output = output.replace(/{%DESCRIPTION%}/g, product.description)
46 |     output = output.replace(/{%ID%}/g, product.id)
47 | 
48 |     if (!product.organic) output = output.replace(/{%NOT_ORGANIC%}/g, 'not-organic')
49 | 
50 |     return output
51 | }
52 | 
53 | const tempOverview = fs.readFileSync(`${__dirname}/templates/template-overview.html`, 'utf-8')
54 | const tempСard = fs.readFileSync(`${__dirname}/templates/template-card.html`, 'utf-8')
55 | const tempProduct = fs.readFileSync(`${__dirname}/templates/template-product.html`, 'utf-8')
56 | const data = fs.readFileSync(`${__dirname}/dev-data/data.json`, 'utf-8')
57 | const dataObj = JSON.parse(data)
58 | 
59 | const server = http.createServer((req, res) => {
60 | 
61 |     const { query, pathname } = URL.parse(req.url, true);
62 | 
63 |     //Overview page 
64 |     if (pathname === '/' || pathname === '/overview') {
65 |         res.writeHead(200, { 'Content-type': 'text/html' });
66 | 
67 |         const cardsHtml = dataObj.map(el => replaceTemplate(tempСard, el)).join('')
68 |         const output = tempOverview.replace('{%PRODUCT_CARDS%}', cardsHtml)
69 | 
70 |         res.end(output);
71 | 
72 |         //Product page 
73 |     } else if (pathname === '/product') {
74 |         res.writeHead(200, { 'Content-type': 'text/html' });
75 |         const product = dataObj[query.id]
76 |         const output=replaceTemplate(tempProduct,product)
77 |         res.end(output);
78 | 
79 |         //Overview page 
80 |     } else if (pathname === '/api') {
81 |         res.writeHead(200, {
82 |             'Content-type': 'application/json',
83 |         });
84 |         res.end(data);
85 | 
86 |         //Not found
87 |     } else {
88 |         res.writeHead(404, {
89 |             'Content-type': 'text/html',
90 |             'my-own-header': 'hello-world'
91 |         });
92 |         res.end('<h1>OOOO page not found</h1>');
93 |     }
94 | });
95 | 
96 | server.listen(8000, '127.0.0.1', () => {
97 |     console.log('Server is running on port 8000');
98 | });
99 | 


--------------------------------------------------------------------------------
/templates/template-card.html:
--------------------------------------------------------------------------------
 1 | <figure class="card">
 2 |     <div class="card__emoji">{%IMAGE%}{%IMAGE%}</div>
 3 |     <div class="card__title-box">
 4 |       <h2 class="card__title">{%PRODUCTNAME%}</h2>
 5 |     </div>
 6 | 
 7 |     <div class="card__details">
 8 |       <div class="card__detail-box {%NOT_ORGANIC%}">
 9 |         <h6 class="card__detail">{%QUANTITY%} per 📦</h6  >
10 |       </div>
11 | 
12 |       <div class="card__detail-box">
13 |         <h6 class="card__detail card__detail--price">{%PRICE%}€</h6>
14 |       </div>
15 |     </div>
16 | 
17 |     <a class="card__link" href="/product?id={%ID%}">
18 |       <span>Detail <i class="emoji-right">👉</i></span>
19 |     </a>
20 |   </figure>


--------------------------------------------------------------------------------
/templates/template-overview.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  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 |     <link
  8 |       href="https://fonts.googleapis.com/css?family=Megrim|Nunito+Sans:400,900"
  9 |       rel="stylesheet"
 10 |     />
 11 |     <link
 12 |       rel="icon"
 13 |       href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/ear-of-maize_1f33d.png"
 14 |     />
 15 | 
 16 |     <title>NODE FARM</title>
 17 | 
 18 |     <style>
 19 |       *,
 20 |       *::before,
 21 |       *::after {
 22 |         margin: 0;
 23 |         padding: 0;
 24 |         box-sizing: inherit;
 25 |       }
 26 | 
 27 |       html {
 28 |         font-size: 62.5%;
 29 |         box-sizing: border-box;
 30 |       }
 31 | 
 32 |       body {
 33 |         padding: 5rem 5rem 10rem;
 34 |         line-height: 1.7;
 35 |         font-family: 'Nunito Sans', sans-serif;
 36 |         color: #555;
 37 |         min-height: 100vh;
 38 |         background: linear-gradient(to bottom right, #9be15d, #00e3ae);
 39 |       }
 40 | 
 41 |       h1 {
 42 |         font-family: 'Megrim', sans-serif;
 43 |         font-size: 6rem;
 44 |         color: white;
 45 |         transform: skewY(-5deg);
 46 |         text-align: center;
 47 |         position: relative;
 48 |         word-spacing: 3px;
 49 |       }
 50 | 
 51 |       h1::before {
 52 |         content: '';
 53 |         display: block;
 54 |         height: 65%;
 55 |         width: 49%;
 56 |         position: absolute;
 57 |         top: 105%;
 58 |         left: 50%;
 59 |         background: linear-gradient(to bottom, #9be15d, #00e3ae);
 60 |         opacity: 0.8;
 61 |         z-index: -1;
 62 |         transform: skewY(370deg) translate(-50%, -50%);
 63 |       }
 64 | 
 65 |       .container {
 66 |         width: 95rem;
 67 |         margin: 0 auto;
 68 |       }
 69 | 
 70 |       .cards-container {
 71 |         margin-top: 8rem;
 72 |       }
 73 | 
 74 |       .card {
 75 |         background: white;
 76 |         box-shadow: 0 2rem 6rem 1rem rgba(0, 0, 0, 0.15);
 77 |         margin-bottom: 5rem;
 78 |         transform: skewX(-20deg);
 79 |         display: flex;
 80 |         transition: all 0.5s;
 81 |       }
 82 | 
 83 |       .card__emoji {
 84 |         font-size: 5.5rem;
 85 |         line-height: 1.2;
 86 |         padding: 1.5rem 6rem 0.5rem 1.5rem;
 87 |         letter-spacing: -4rem;
 88 |         transform: skewX(20deg);
 89 |       }
 90 | 
 91 |       .card__title-box {
 92 |         background: linear-gradient(to bottom, #9be15d, #00e3ae);
 93 |         margin-right: auto;
 94 |         display: flex;
 95 |         align-items: center;
 96 |         padding: 0 3rem;
 97 |       }
 98 | 
 99 |       .card__title {
100 |         font-family: 'Megrim', sans-serif;
101 |         color: white;
102 |         font-size: 3.25rem;
103 |         transform: skewX(20deg);
104 |       }
105 | 
106 |       .card__details {
107 |         display: flex;
108 |       }
109 | 
110 |       .card__detail-box {
111 |         align-self: stretch;
112 |         border-right: 1px solid #ddd;
113 |         display: flex;
114 |         align-items: center;
115 |       }
116 | 
117 |       .card__detail-box:last-child {
118 |         border: none;
119 |       }
120 | 
121 |       .card__detail {
122 |         font-weight: 400;
123 |         font-size: 1.8rem;
124 |         transform: skewX(20deg);
125 |         padding: 1.75rem;
126 |       }
127 | 
128 |       .card__detail--organic {
129 |         font-weight: 900;
130 |         text-transform: uppercase;
131 |         font-size: 1.9rem;
132 |         background-image: linear-gradient(to right, #9be15d, #00e3ae);
133 |         -webkit-background-clip: text;
134 |         background-clip: text;
135 |         color: transparent;
136 |       }
137 | 
138 |       .card__detail--price {
139 |         font-weight: 900;
140 |         font-size: 1.9rem;
141 |       }
142 | 
143 |       .card__link:link,
144 |       .card__link:visited {
145 |         flex: 0 0 auto;
146 |         background-color: #79e17b;
147 |         color: white;
148 |         font-size: 1.6rem;
149 |         font-weight: 900;
150 |         text-transform: uppercase;
151 |         text-decoration: none;
152 |         padding: 2.5rem;
153 |         text-align: center;
154 |         display: flex;
155 |         align-items: center;
156 |         justify-content: center;
157 |         transition: all 0.3s;
158 |       }
159 | 
160 |       .card__link:hover,
161 |       .card__link:active {
162 |         background-color: #9be15d;
163 |       }
164 | 
165 |       .card__link span {
166 |         transform: skewX(20deg);
167 |       }
168 | 
169 |       .card:hover {
170 |         transform: skewX(-20deg) scale(1.08);
171 |         box-shadow: 0 3rem 8rem 2rem rgba(0, 0, 0, 0.15);
172 |       }
173 | 
174 |       .emoji-left {
175 |         font-size: 2rem;
176 |         margin-right: 1rem;
177 |       }
178 | 
179 |       .emoji-right {
180 |         font-size: 2rem;
181 |         margin-left: 1rem;
182 |       }
183 | 
184 |       .not-organic {
185 |         display: none;
186 |       }
187 |     </style>
188 |   </head>
189 | 
190 |   <body>
191 |     <div class="container">
192 |       <h1>🌽 Node Farm 🥦</h1>
193 | 
194 |       <div class="cards-container">
195 |         {%PRODUCT_CARDS%}
196 |       </div>
197 |     </div>
198 |   </body>
199 | </html>
200 | 


--------------------------------------------------------------------------------
/templates/template-product.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  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 |     <link
  8 |       href="https://fonts.googleapis.com/css?family=Megrim|Nunito+Sans:400,900"
  9 |       rel="stylesheet"
 10 |     />
 11 |     <link
 12 |       rel="icon"
 13 |       href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/ear-of-maize_1f33d.png"
 14 |     />
 15 | 
 16 |     <title>{%PRODUCTNAME%} {%IMAGE%} /// NODE FARM</title>
 17 | 
 18 |     <style>
 19 |       *,
 20 |       *::before,
 21 |       *::after {
 22 |         margin: 0;
 23 |         padding: 0;
 24 |         box-sizing: inherit;
 25 |       }
 26 | 
 27 |       html {
 28 |         font-size: 62.5%;
 29 |         box-sizing: border-box;
 30 |       }
 31 | 
 32 |       body {
 33 |         padding: 5rem 5rem 10rem;
 34 |         line-height: 1.7;
 35 |         font-family: 'Nunito Sans', sans-serif;
 36 |         color: #555;
 37 |         min-height: 100vh;
 38 |         background: linear-gradient(to bottom right, #9be15d, #00e3ae);
 39 |       }
 40 | 
 41 |       h1 {
 42 |         font-family: 'Megrim', sans-serif;
 43 |         font-size: 6rem;
 44 |         color: white;
 45 |         transform: skewY(-5deg);
 46 |         text-align: center;
 47 |         position: relative;
 48 |         word-spacing: 3px;
 49 |       }
 50 | 
 51 |       h1::before {
 52 |         content: '';
 53 |         display: block;
 54 |         height: 65%;
 55 |         width: 49%;
 56 |         position: absolute;
 57 |         top: 105%;
 58 |         left: 50%;
 59 |         background: linear-gradient(to bottom, #9be15d, #00e3ae);
 60 |         opacity: 0.8;
 61 |         z-index: -1;
 62 |         transform: skewY(370deg) translate(-50%, -50%);
 63 |       }
 64 | 
 65 |       .container {
 66 |         width: 95rem;
 67 |         margin: 0 auto;
 68 |       }
 69 | 
 70 |       .product {
 71 |         width: 60rem;
 72 |         margin: 0 auto;
 73 |         margin-top: 9rem;
 74 |         background: white;
 75 |         box-shadow: 0 3rem 6rem 1rem rgba(0, 0, 0, 0.2);
 76 |         position: relative;
 77 |       }
 78 | 
 79 |       .product__hero {
 80 |         position: relative;
 81 |         height: 22rem;
 82 |         overflow: hidden;
 83 |       }
 84 | 
 85 |       .product__hero::before {
 86 |         content: '';
 87 |         display: block;
 88 |         height: 100%;
 89 |         width: 100%;
 90 |         position: absolute;
 91 |         top: 0;
 92 |         left: 0;
 93 |         background-image: linear-gradient(to left bottom, #9be15d, #00e3ae);
 94 |         opacity: 0.5;
 95 |         z-index: 100;
 96 |       }
 97 | 
 98 |       .product__emoji {
 99 |         font-size: 15rem;
100 |         position: absolute;
101 |       }
102 | 
103 |       .product__emoji--1 {
104 |         top: -4rem;
105 |         left: -2rem;
106 |         z-index: 10;
107 |       }
108 | 
109 |       .product__emoji--2 {
110 |         top: -6rem;
111 |         left: 9rem;
112 |       }
113 | 
114 |       .product__emoji--3 {
115 |         top: -4rem;
116 |         right: 15rem;
117 |       }
118 | 
119 |       .product__emoji--4 {
120 |         top: -5rem;
121 |         right: 2rem;
122 |         z-index: 10;
123 |       }
124 | 
125 |       .product__emoji--5 {
126 |         bottom: -9rem;
127 |         left: 18rem;
128 |       }
129 | 
130 |       .product__emoji--6 {
131 |         bottom: -8rem;
132 |         left: 5rem;
133 |       }
134 | 
135 |       .product__emoji--7 {
136 |         bottom: -12rem;
137 |         right: 14rem;
138 |       }
139 | 
140 |       .product__emoji--8 {
141 |         bottom: -8rem;
142 |         right: -2rem;
143 |       }
144 | 
145 |       .product__emoji--9 {
146 |         top: -7rem;
147 |         left: 19rem;
148 |       }
149 | 
150 |       .product__organic {
151 |         position: absolute;
152 |         top: -4rem;
153 |         right: -4rem;
154 |         z-index: 1000;
155 |         height: 11rem;
156 |         width: 11rem;
157 |         background-image: linear-gradient(to bottom, #9be15d, #00e3ae);
158 |         border-radius: 50%;
159 |         transform: rotate(15deg);
160 |         box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);
161 |         display: flex;
162 |         align-items: center;
163 |         justify-content: center;
164 |       }
165 | 
166 |       .product__organic h5 {
167 |         font-weight: 900;
168 |         text-transform: uppercase;
169 |         font-size: 1.8rem;
170 |         color: white;
171 |       }
172 | 
173 |       .product__back:link,
174 |       .product__back:visited {
175 |         position: absolute;
176 |         top: 2rem;
177 |         left: 2rem;
178 |         font-size: 1.5rem;
179 |         font-weight: 700;
180 |         text-transform: uppercase;
181 |         text-decoration: none;
182 |         z-index: 1000;
183 |         color: #555;
184 |         background-color: white;
185 |         box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
186 |         border-radius: 100rem;
187 |         padding: 0 2rem;
188 |         transition: all 0.3s;
189 |         display: flex;
190 |         align-items: center;
191 |       }
192 | 
193 |       .product__back:hover,
194 |       .product__back:active {
195 |         background-color: #79e17b;
196 |       }
197 | 
198 |       .product__name {
199 |         background: linear-gradient(to bottom, #9be15d, #00e3ae);
200 |         padding: 1rem;
201 |         font-family: 'Megrim', sans-serif;
202 |         font-size: 4rem;
203 |         color: white;
204 |         text-align: center;
205 |         word-spacing: 2px;
206 |       }
207 | 
208 |       .product__details {
209 |         background-color: #eee;
210 |         padding: 4rem 6rem;
211 |         font-size: 1.9rem;
212 |         display: grid;
213 |         grid-template-columns: 1fr 1fr;
214 |         grid-gap: 1.5rem;
215 |       }
216 | 
217 |       .product__description {
218 |         padding: 5rem 6rem;
219 |         font-size: 1.6rem;
220 |         line-height: 1.8;
221 |       }
222 | 
223 |       .product__link:link,
224 |       .product__link:visited {
225 |         display: block;
226 |         background-color: #79e17b;
227 |         color: white;
228 |         font-size: 1.6rem;
229 |         font-weight: 700;
230 |         text-transform: uppercase;
231 |         text-decoration: none;
232 |         padding: 1.5rem;
233 |         text-align: center;
234 |         transform: scale(1.07) skewX(-20deg);
235 |         box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2);
236 |         display: flex;
237 |         align-items: center;
238 |         justify-content: center;
239 |         transition: all 0.3s;
240 |       }
241 | 
242 |       .product__link:hover,
243 |       .product__link:active {
244 |         background-color: #9be15d;
245 |         transform: scale(1.1) skewX(-20deg);
246 |       }
247 | 
248 |       .product__link span {
249 |         transform: skewX(20deg);
250 |       }
251 | 
252 |       .emoji-left {
253 |         font-size: 2rem;
254 |         margin-right: 1rem;
255 |       }
256 | 
257 |       .emoji-right {
258 |         font-size: 2rem;
259 |         margin-left: 1rem;
260 |       }
261 | 
262 |       .not-organic {
263 |         display: none;
264 |       }
265 |     </style>
266 |   </head>
267 | 
268 |   <body>
269 |     <div class="container">
270 |       <h1>🌽 Node Farm 🥦</h1>
271 | 
272 |       <figure class="product">
273 |         <div class="product__organic {%NOT_ORGANIC%}"><h5>Organic</h5></div>
274 |         <a href="/overview" class="product__back">
275 |           <span class="emoji-left">👈</span>Back
276 |         </a>
277 |         <div class="product__hero">
278 |           <span class="product__emoji product__emoji--1">{%IMAGE%}</span>
279 |           <span class="product__emoji product__emoji--2">{%IMAGE%}</span>
280 |           <span class="product__emoji product__emoji--3">{%IMAGE%}</span>
281 |           <span class="product__emoji product__emoji--4">{%IMAGE%}</span>
282 |           <span class="product__emoji product__emoji--5">{%IMAGE%}</span>
283 |           <span class="product__emoji product__emoji--6">{%IMAGE%}</span>
284 |           <span class="product__emoji product__emoji--7">{%IMAGE%}</span>
285 |           <span class="product__emoji product__emoji--8">{%IMAGE%}</span>
286 |           <span class="product__emoji product__emoji--9">{%IMAGE%}</span>
287 |         </div>
288 |         <h2 class="product__name">{%PRODUCTNAME%}</h2>
289 |         <div class="product__details">
290 |           <p><span class="emoji-left">🌍</span>From {%FROM%}</p>
291 |           <p><span class="emoji-left">❤️</span> {%NUTRIENTS%}</p>
292 |           <p><span class="emoji-left">📦</span> {%QUANTITY%}</p>
293 |           <p><span class="emoji-left">🏷</span> {%PRICE%}€</p>
294 |         </div>
295 |   
296 |         <a href="#" class="product__link">
297 |           <span class="emoji-left">🛒</span>
298 |           <span>Add to shopping card {%PRICE%}€</span>
299 |         </a>
300 |   
301 |         <p class="product__description">
302 |           {%DESCRIPTION%}
303 |         </p>
304 |       </figure>
305 |       
306 |     </div>
307 |   </body>
308 | </html>
309 | 


--------------------------------------------------------------------------------
/txt/append.txt:
--------------------------------------------------------------------------------
1 | APPENDIX: Generally, avocados 🥑 are served raw, but some cultivars can be cooked for a short time without becoming bitter.


--------------------------------------------------------------------------------
/txt/final.txt:
--------------------------------------------------------------------------------
1 | Here is the text;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.
2 | APPENDIX: Generally, avocados 🥑 are served raw, but some cultivars can be cooked for a short time without becoming bitter.


--------------------------------------------------------------------------------
/txt/input.txt:
--------------------------------------------------------------------------------
1 | The avocado 🥑 is popular in vegetarian cuisine as a substitute for meats in sandwiches and salads because of its high fat content 😄


--------------------------------------------------------------------------------
/txt/output.txt:
--------------------------------------------------------------------------------
1 | This is what we know about the avacado: The avocado 🥑 is popular in vegetarian cuisine as a substitute for meats in sandwiches and salads because of its high fat content 😄.
2 | Created on 1721918359676


--------------------------------------------------------------------------------
/txt/read-this.txt:
--------------------------------------------------------------------------------
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.


--------------------------------------------------------------------------------
/txt/start.txt:
--------------------------------------------------------------------------------
1 | read-this


--------------------------------------------------------------------------------