Version 2.4.0 release

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.4.0
+
+- Persist input history (up to 10 entries) using `localStorage`
+- Add `bgcolor` and `color` commands for setting background color and text color respectively
+- Add _Looking to learn_ in skills section
+
 ## 2.3.0
 
 - Add special _'help'_ command for dummies

assets/js/script.js

@@ -2,26 +2,29 @@ const input = document.querySelector('#cmd');
 const cmdHistoryElement = document.querySelector('#cmd-history');
 const today = new Date();
 const currentYear = today.getFullYear();
-const cmdHistory = [];
+const inputHistory = localStorage.getItem('inputHistory')
-
+  ? localStorage.getItem('inputHistory').split(',')
+  : [];
 let cmdIndex = 0;
+
 document.querySelector('#current-year').textContent = currentYear;
 input.focus();
 
-input.addEventListener('blur', (evt) => input.focus());
-
 window.addEventListener('keypress', (evt) => {
-  const command = input.value.trim();
+  const inputText = input.value.trim();
+  const split = inputText.split(/ +/);
+  const command = split[0];
 
   if (evt.key === 'Enter' && command.length > 0) {
+    const args = split.slice(1);
+
     const cmdToSave = document.createElement('p');
     const output = document.createElement('p');
-    cmdToSave.textContent = `> ${command}`;
+    cmdToSave.textContent = `> ${inputText}`;
     cmdHistoryElement.append(cmdToSave);
 
     switch (command.toLowerCase()) {
       default:
-        output.style.color = 'red';
         output.textContent = `ERROR: Unknown command '${command}'`;
         break;
       case 'about':
@@ -33,14 +36,24 @@ window.addEventListener('keypress', (evt) => {
         He believes that by being creative and cooperating with others, you can achieve success.
         When not coding, he is probably watching an F1 race, or playing retro video games.`;
         break;
+      case 'bgcolor':
+        const bgcolor = args[0];
+        document.body.style.backgroundColor = bgcolor;
+        break;
       case 'cls':
         cmdHistoryElement.textContent = '';
         break;
+      case 'color':
+        const color = args[0];
+        document.body.style.color = color;
+        input.style.color = color;
+        break;
       case 'contact':
         output.innerHTML = `Email address:
         <a href="mailto:contact@maciejpedzi.ch">contact@maciejpedzi.ch</a>`;
         break;
       case 'github':
+        output.innerHTML = `If new tab didn't show up, go <a href="https://github.com/maciejpedzich">here</a>`;
         window.open('https://github.com/maciejpedzich');
         break;
       case "'help'":
@@ -48,9 +61,11 @@ window.addEventListener('keypress', (evt) => {
         break;
       case 'help':
         output.innerHTML = `<p>about - shows everything you need to know about Maciej</p>
-				<p>cls - clears screen</p>
+				<p>bgcolor [color] - sets background color to given [color]</p>
+        <p>cls - clears screen</p>
+        <p>color [color] - sets text color to given [color]</p>
 				<p>contact - displays contact information</p>
-        <p>github - opens Maciej's Github profile</p>
+        <p>github - opens Maciej's Github profile page</p>
         <p>help - displays a list of available commands</p>
         <p>skills - presents a set of current skills</p>
         <p>If on desktop/laptop, use up and down arrows to retype commands</p>`;
@@ -60,11 +75,14 @@ window.addEventListener('keypress', (evt) => {
         <p>Backend: JavaScript, TypeScript, Node.js, Express</p>
         <p>Database: MongoDB, PostgreSQL</p>
         <p>Tooling: Git, Visual Studio Code, Bash, Windows PowerShell, Postman</p>
-        <p>Hosting/Deployment: Netlify, Heroku, Amazon Web Services, MongoDB Atlas</p>`;
+        <p>Hosting/Deployment: Netlify, Heroku, Amazon Web Services, MongoDB Atlas</p>
+        <p>Looking to learn: Nuxt.js, GraphQL, Vim</p>`;
         break;
     }
 
-    cmdHistory.push(command);
+    inputHistory.unshift(inputText);
+    localStorage.setItem('inputHistory', inputHistory.slice(0, 10).join());
+
     cmdHistoryElement.append(output);
     input.value = '';
     input.scrollIntoView();
@@ -72,13 +90,15 @@ window.addEventListener('keypress', (evt) => {
 });
 
 window.addEventListener('keydown', (evt) => {
-  if (cmdHistory.length > 0) {
+  if (inputHistory.length > 0) {
     if (evt.key === 'ArrowUp') {
-      cmdIndex - 1 >= 0 ? cmdIndex-- : (cmdIndex = cmdHistory.length - 1);
+      cmdIndex - 1 >= 0 ? cmdIndex-- : (cmdIndex = inputHistory.length - 1);
-      input.value = cmdHistory[cmdIndex];
+      input.value = inputHistory[cmdIndex];
     } else if (evt.key === 'ArrowDown') {
-      cmdIndex + 1 < cmdHistory.length ? cmdIndex++ : (cmdIndex = 0);
+      cmdIndex + 1 < inputHistory.length ? cmdIndex++ : (cmdIndex = 0);
-      input.value = cmdHistory[cmdIndex];
+      input.value = inputHistory[cmdIndex];
     }
   }
 });
+
+input.addEventListener('blur', (evt) => input.focus());

index.html

@@ -12,14 +12,14 @@
   </head>
   <body>
     <div id="header">
-      <p>maciejpedzi.ch [Version 2.3.0]</p>
+      <p>maciejpedzi.ch [Version 2.4.0]</p>
       <p>(C) Maciej Pedzich <span id="current-year"></span></p>
       <p id="hint">Welcome! Type 'help' for more information</p>
     </div>
     <div id="cmd-history"></div>
     <div id="input-container">
       <div id="bracket">></div>
-      <input type="text" id="cmd" />
+      <input type="text" id="cmd" autocomplete="off" />
     </div>
     <script src="./assets/js/script.js"></script>
   </body>