The Solution

.github/workflows/test.yml-template

@@ -0,0 +1,23 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test

package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@mate-academy/eslint-config": "latest",
-    "@mate-academy/scripts": "^1.8.6",
+    "@mate-academy/scripts": "^2.1.3",
     "axios": "^1.7.2",
     "eslint": "^8.57.0",
     "eslint-plugin-jest": "^28.6.0",

src/createServer.js

@@ -1,8 +1,135 @@
 'use strict';
 
+const http = require('http');
+const path = require('path');
+const fs = require('fs');
+const zlib = require('node:zlib');
+const { IncomingForm } = require('formidable');
+
+const compressionTypes = {
+  gzip: {
+    createStream: zlib.createGzip,
+    extension: 'gz',
+  },
+  deflate: {
+    createStream: zlib.createDeflate,
+    extension: 'dfl',
+  },
+  br: {
+    createStream: zlib.createBrotliCompress,
+    extension: 'br',
+  },
+};
+
+function sendHtml(res) {
+  const filePath = path.join(__dirname, 'index.html');
+
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
+      res.end('Internal Server Error');
+
+      return;
+    }
+
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+    res.end(data);
+  });
+}
+
+function sendBadRequest(response) {
+  response.writeHead(400, { 'Content-Type': 'text/plain; charset=utf-8' });
+  response.end('Bad Request');
+}
+
+function sendNotFound(response) {
+  response.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+  response.end('Not Found');
+}
+
 function createServer() {
-  /* Write your code here */
-  // Return instance of http.Server class
+  return http.createServer((request, response) => {
+    const { method, url } = request;
+
+    if (method === 'GET' && url === '/') {
+      sendHtml(response);
+
+      return;
+    }
+
+    if (method === 'GET' && url === '/compress') {
+      sendBadRequest(response);
+
+      return;
+    }
+
+    if (method === 'POST' && url === '/compress') {
+      const form = new IncomingForm({ multiples: false });
+
+      form.parse(request, async (error, fields, files) => {
+        if (error) {
+          sendBadRequest(response);
+
+          return;
+        }
+
+        const compressionType = Array.isArray(fields.compressionType)
+          ? fields.compressionType[0]
+          : fields.compressionType;
+        const file = Array.isArray(files.file) ? files.file[0] : files.file;
+
+        if (!file || !compressionType) {
+          sendBadRequest(response);
+
+          return;
+        }
+
+        if (!compressionTypes[compressionType]) {
+          sendBadRequest(response);
+
+          return;
+        }
+
+        const filePath = file.filepath || file.file?.path || file.path;
+        const filename =
+          file.originalFilename ||
+          file.name ||
+          path.basename(filePath || 'unknown');
+
+        if (!filePath || !filename) {
+          sendBadRequest(response);
+
+          return;
+        }
+
+        const { createStream, extension } = compressionTypes[compressionType];
+        const readStream = fs.createReadStream(filePath);
+        const compressStream = createStream();
+
+        const handleStreamError = () => {
+          if (!response.headersSent) {
+            sendBadRequest(response);
+          } else {
+            response.destroy();
+          }
+        };
+
+        readStream.on('error', handleStreamError);
+        compressStream.on('error', handleStreamError);
+
+        response.writeHead(200, {
+          'Content-Type': 'application/octet-stream',
+          'Content-Disposition': `attachment; filename=${filename}.${extension}`,
+        });
+
+        readStream.pipe(compressStream).pipe(response);
+      });
+
+      return;
+    }
+
+    sendNotFound(response);
+  });
 }
 
 module.exports = {

src/index.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f5f5f5;
+    }
+
+    .container {
+      width: 80%;
+      margin: 0 auto;
+      padding: 0;
+      display: flex;
+      height: 100vh;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .mainTitle {
+      text-align: center;
+      color: #333;
+    }
+
+    .mainDescription {
+      text-align: center;
+      color: #666;
+      margin-bottom: 40px;
+    }
+
+    .form {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 20px;
+    }
+
+    .label {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      font-size: 18px;
+      color: #333;
+    }
+
+    .fileInput {
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background-color: #fff;
+      cursor: pointer;
+    }
+
+    .selector {
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background-color: #fff;
+      cursor: pointer;
+    }
+
+    .submitBtn {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      background-color: #007bff;
+      color: #fff;
+      font-size: 16px;
+      cursor: pointer;
+    }
+  </style>
+  <title>The Compressor</title>
+</head>
+<body>
+  <div class="container">
+    <h1 class="mainTitle">Welcome to The Compressor</h1>
+
+    <p class="mainDescription">
+    This is a simple web application that allows you to upload a file and compress it
+    using one of three compression algorithms: gzip, deflate, or brotli (br).
+    To use the application, simply select a file from your computer, choose the desired compression
+    type from the dropdown menu, and click the "Compress" button. The compressed file will be generated
+    and made available for download. Enjoy compressing your files with ease!
+    </p>
+
+    <form action="/compress" method="POST" enctype="multipart/form-data" class="form">
+      <label class="label">
+        <span>Choose a file to compress:</span>
+        <input class="fileInput" type="file" id="file" name="file" required>
+      </label>
+
+      <label class="label">
+        <span>Choose a compression type:</span>
+        <select class="selector" id="compressionType" name="compressionType" required>
+          <option value="gzip">gzip</option>
+          <option value="deflate">deflate</option>
+          <option value="br">brotli</option>
+        </select>
+      </label>
+
+      <button type="submit" class="submitBtn">Compress</button>
+
+    </form>
+  </div>
+</body>
+</html>

src/styles/styles.css

@@ -0,0 +1,69 @@
+body {
+  font-family: 'Arial', sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f5f5f5;
+}
+
+.container {
+  width: 80%;
+  margin: 0 auto;
+  padding: 0;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.mainTitle {
+  text-align: center;
+  color: #333;
+}
+
+.mainDescription {
+  text-align: center;
+  color: #666;
+  margin-bottom: 40px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.label {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 18px;
+  color: #333;
+}
+
+.fileInput {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.selector {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.submitBtn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+}