Homework 1 JavaScript highlighter in JavaScript (#14)

* Js2Html in Js

* remove screenshot

4 files changed, 221 insertions, 0 deletions

diff --git a/homework/81459/js2html/README.md b/homework/81459/js2html/README.md
new file mode 100644
index 0000000..bb0d3a7
--- /dev/null
+++ b/homework/81459/js2html/README.md
@@ -0,0 +1,9 @@
+# Requirements
+- [Node.js](https://nodejs.org/en/)
+
+# Usage
+```bash
+node highlight.js <input-file> <output-file>
+```
+`<input-file>` - the file with code to highlight (**testfile.js**)<br>
+`<output-file>` - the file where to save the computed html (**output.html**) *If missing the result will be printed on the console*
diff --git a/homework/81459/js2html/highlight.js b/homework/81459/js2html/highlight.js
new file mode 100644
index 0000000..947ae5f
--- /dev/null
+++ b/homework/81459/js2html/highlight.js
@@ -0,0 +1,103 @@
+(() => {
+   const inputFile = process.argv[2];
+   const outputFile = process.argv[3];
+
+   const fs = require('fs');
+
+   fs.readFile(inputFile, 'utf8', (err, contents) => {
+      if (err) {
+         throw err;
+      }
+
+      const html = generateHtml(contents);
+
+      if (outputFile) {
+         fs.writeFile(outputFile, html, 'utf8', (err) => {
+            if (err) {
+               throw err;
+            }
+         });
+      } else {
+         console.log(html);
+      }
+   });
+})();
+
+const tokens = [
+   {type: 'KEYWORD', className: 'orange', regex: /^(break|case|catch|class|const|continue|debugger|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|of|return|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/},
+   {type: 'WHITESPACE', className: '', regex: /^\s+/},
+   {type: 'BRACKET', className: 'white', regex: /^[\[\]{}()]/},
+   {type: 'PUNCTUATION', className: 'white', regex: /^[:;,.]/},
+   {type: 'COMMENT', className: 'grey', regex: /^\/\/.*/},
+   {type: 'OPERATOR', className: 'red', regex: /^(\+|-|\/|={1,3}|!={0,2}|&{1,2}|\|{1,2}|\*|~|\^)/},
+   {type: 'BOOLEAN_LITERAL', className: 'purple', regex: /^(true|false)\b/},
+   {type: 'NUMBER_LITERAL', className: 'blue', regex: /^-?\d+(?:\.\d+)?(?:e[+\-]?\d+)?/i},
+   {type: 'STRING_LITERAL', className: 'green', regex: /^("(?:\\.|[^"])*"|'(?:\\.|[^'])*')/},
+   {type: 'NULL', className: 'orange', regex: /^(null|undefined)\b/},
+   {type: 'IDENTIFIER', className: 'white', regex: /^\w+/},
+   {type: "UNKNOWN", className: 'white', regex: /^./}
+];
+
+function generateHtml(code) {
+   let highlitedTokens = [];
+
+   while (code && code.length) {
+      for (const token of tokens) {
+         if (token.regex.test(code)) {
+            const match = token.regex.exec(code);
+            highlitedTokens.push(highlightToken(match[0], token));
+            code = code.substring(match[0].length);
+            break;
+         }
+      }
+   }
+
+   return `${getHtmlHeader()}${highlitedTokens.join('')}${getHtmlFooter()}`
+}
+
+function highlightToken(token, tokenType) {
+   return `<span class="${tokenType.className}">${token}</span>`
+}
+
+const getHtmlHeader = () => `<!doctype html>
+<html>
+    <head>
+        <style>
+            .orange {
+                color: orange;
+            }
+            .white {
+                color: white;
+            }
+            .grey {
+                color: grey;
+            }
+            .green {
+                color: green;
+            }
+            .purple {
+                color: purple;
+            }
+            .red {
+                color: red;
+            }
+            .blue {
+                color: cyan;
+            }
+            .gold {
+                color: gold;
+            }
+            .background {
+                background: #2d2d2d;
+            }
+        </style>
+    </head>
+    <body class="background">
+        <pre>
+`;
+
+const getHtmlFooter = () => `
+        </pre>
+    </body>
+</html>
+`;
diff --git a/homework/81459/js2html/output.html b/homework/81459/js2html/output.html
new file mode 100644
index 0000000..52eeeb6
--- /dev/null
+++ b/homework/81459/js2html/output.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html>
+    <head>
+        <style>
+            .orange {
+                color: orange;
+            }
+            .white {
+                color: white;
+            }
+            .grey {
+                color: grey;
+            }
+            .green {
+                color: green;
+            }
+            .purple {
+                color: purple;
+            }
+            .red {
+                color: red;
+            }
+            .blue {
+                color: cyan;
+            }
+            .gold {
+                color: gold;
+            }
+            .background {
+                background: #2d2d2d;
+            }
+        </style>
+    </head>
+    <body class="background">
+        <pre>
+<span class="orange">class</span><span class=""> </span><span class="white">Nonsense</span><span class=""> </span><span class="white">{</span><span class="">
+   </span><span class="white">constructor</span><span class="white">(</span><span class="white">)</span><span class=""> </span><span class="white">{</span><span class="">
+      </span><span class="orange">this</span><span class="white">.</span><span class="white">arbitraryArray</span><span class=""> </span><span class="red">=</span><span class=""> </span><span class="white">[</span><span class="green">'string with no meaning'</span><span class="white">,</span><span class=""> </span><span class="blue">42</span><span class="white">]</span><span class="white">;</span><span class="">
+   </span><span class="white">}</span><span class="">
+
+   </span><span class="white">doesThisMakeSense</span><span class="white">(</span><span class="white">)</span><span class=""> </span><span class="white">{</span><span class="">
+      </span><span class="orange">return</span><span class=""> </span><span class="purple">false</span><span class="white">;</span><span class="">
+   </span><span class="white">}</span><span class="">
+
+   </span><span class="white">answer</span><span class="white">(</span><span class="white">answer</span><span class="white">)</span><span class=""> </span><span class="white">{</span><span class="">
+      </span><span class="white">console</span><span class="white">.</span><span class="white">log</span><span class="white">(</span><span class="white">answer</span><span class="white">)</span><span class="white">;</span><span class="">
+   </span><span class="white">}</span><span class="">
+
+   </span><span class="white">whatIsTheMeaning</span><span class="white">(</span><span class="white">)</span><span class=""> </span><span class="white">{</span><span class="">
+      </span><span class="orange">return</span><span class=""> </span><span class="orange">this</span><span class="white">.</span><span class="white">arbitraryArray</span><span class="white">[</span><span class="orange">this</span><span class="white">.</span><span class="white">getRandomIndex</span><span class="white">(</span><span class="white">)</span><span class="white">]</span><span class="">
+   </span><span class="white">}</span><span class="">
+
+   </span><span class="white">getRandomIndex</span><span class="white">(</span><span class="white">)</span><span class=""> </span><span class="white">{</span><span class="">
+      </span><span class="orange">return</span><span class=""> </span><span class="white">Math</span><span class="white">.</span><span class="white">floor</span><span class="white">(</span><span class="white">Math</span><span class="white">.</span><span class="white">random</span><span class="white">(</span><span class="white">)</span><span class=""> </span><span class="red">*</span><span class=""> </span><span class="blue">2</span><span class="white">)</span><span class="white">;</span><span class="">
+   </span><span class="white">}</span><span class="">
+</span><span class="white">}</span><span class="">
+
+</span><span class="white">(</span><span class="orange">function</span><span class=""> </span><span class="white">(</span><span class="white">)</span><span class=""> </span><span class="white">{</span><span class="">
+   </span><span class="white">console</span><span class="white">.</span><span class="white">log</span><span class="white">(</span><span class="white">(</span><span class="red">-</span><span class="red">~</span><span class="orange">function</span><span class="white">(</span><span class="white">)</span><span class="white">{</span><span class="white">}</span><span class="red">-</span><span class="red">~</span><span class="orange">function</span><span class="white">(</span><span class="white">)</span><span class="white">{</span><span class="white">}</span><span class="white">)</span><span class="white">)</span><span class="white">;</span><span class=""> </span><span class="grey">// 2, now that's weird</span><span class="">
+   </span><span class="white">console</span><span class="white">.</span><span class="white">log</span><span class="white">(</span><span class="white">Array</span><span class="white">(</span><span class="blue">16</span><span class="white">)</span><span class="white">.</span><span class="white">join</span><span class="white">(</span><span class="green">"lol"</span><span class=""> </span><span class="red">-</span><span class=""> </span><span class="blue">2</span><span class="white">)</span><span class=""> </span><span class="red">+</span><span class=""> </span><span class="green">" Batman!"</span><span class="white">)</span><span class="white">;</span><span class=""> </span><span class="grey">// ;)</span><span class="">
+
+
+   </span><span class="orange">const</span><span class=""> </span><span class="white">nonsense</span><span class=""> </span><span class="red">=</span><span class=""> </span><span class="orange">new</span><span class=""> </span><span class="white">Nonsense</span><span class="white">(</span><span class="white">)</span><span class="white">;</span><span class="">
+
+   </span><span class="orange">while</span><span class="white">(</span><span class="white">nonsense</span><span class="white">.</span><span class="white">doesThisMakeSense</span><span class="white">(</span><span class="white">)</span><span class="white">)</span><span class=""> </span><span class="white">{</span><span class=""> </span><span class="grey">// No, it doesn't</span><span class="">
+      </span><span class="white">nonsense</span><span class="white">.</span><span class="white">answer</span><span class="white">(</span><span class="white">nonsense</span><span class="white">.</span><span class="white">whatIsTheMeaning</span><span class="white">(</span><span class="white">)</span><span class="white">)</span><span class="white">;</span><span class="">
+   </span><span class="white">}</span><span class="">
+</span><span class="white">}</span><span class="white">)</span><span class="white">(</span><span class="white">)</span><span class="white">;</span><span class="">
+
+
+</span>
+        </pre>
+    </body>
+</html>
diff --git a/homework/81459/js2html/testfile.js b/homework/81459/js2html/testfile.js
new file mode 100644
index 0000000..0097012
--- /dev/null
+++ b/homework/81459/js2html/testfile.js
@@ -0,0 +1,35 @@
+class Nonsense {
+   constructor() {
+      this.arbitraryArray = ['string with no meaning', 42];
+   }
+
+   doesThisMakeSense() {
+      return false;
+   }
+
+   answer(answer) {
+      console.log(answer);
+   }
+
+   whatIsTheMeaning() {
+      return this.arbitraryArray[this.getRandomIndex()]
+   }
+
+   getRandomIndex() {
+      return Math.floor(Math.random() * 2);
+   }
+}
+
+(function () {
+   console.log((-~function(){}-~function(){})); // 2, now that's weird
+   console.log(Array(16).join("lol" - 2) + " Batman!"); // ;)
+
+
+   const nonsense = new Nonsense();
+
+   while(nonsense.doesThisMakeSense()) { // No, it doesn't
+      nonsense.answer(nonsense.whatIsTheMeaning());
+   }
+})();
+
+