css/style.css

@@ -94,11 +94,13 @@ input {
 .image-grid {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
     gap: 5px;
 }
 
 .image-grid>* {
-    max-width: 100%;
+    max-width: 50%;
     max-height: 50%;
 }
 

index.html

@@ -20,7 +20,8 @@
             <h1>welcome to my website</h1>
             <h2 id="switch_theme">switch theme</h2>
 
-            <p>type <span id="help">'help'</span> to list all commands</p>
+            <p>press <kbd>Enter</kbd> to run command</p>
+            <p>use <span id="help">'help'</span> to list all commands</p>
             <span>[guest@website ~]$ </span>
             <input type="text" id="command">
         </div>

js/data.js

@@ -16,12 +16,21 @@ const MUSIC_METADATA = [
             'Metallica'
         ]
     },
+    {
+        name: 'gothic metal',
+        aliases: ['gm', 'goth', 'gothic'],
+        artists: [
+            'Draconian',
+            'Beseech',
+            'To/Die/For',
+            'For My Pain...',
+            'Entwine'
+        ]
+    },
     {
         name: 'depressive suicidal black metal',
         aliases: ['dsbm'],
         artists: [
-            'Totalselfhatred',
-            'Lifelover',
             'минута агонии',
             'Decalius'
         ]
@@ -36,8 +45,22 @@ const MUSIC_METADATA = [
             'Watain',
             'Bathory',
             'Carpathian Forest',
-            'Darkthrone',
+            'Darkthrone'
-            'Rotting Christ'
+        ]
+    },
+    {
+        name: 'nu metal',
+        aliases: ['nm', 'nu'],
+        artists: [
+            'Slipknot',
+            'Evanescence'
+        ]
+    },
+    {
+        name: 'other genres',
+        aliases: [],
+        artists: [
+            'Rammstein'
         ]
     }
 ]

js/script.js

@@ -5,13 +5,13 @@ function updateAge() {
 }
 
 // process command function
-function processCommand(input) {
+function processCommand() {
-    const [commandName, ...args] = input.split(' ') || [input]
+    const [commandName, ...args] = command.value.split(' ') || [command.value]
     const suppliedCommand = COMMANDS.find(c => c.name === commandName)
 
     if (!suppliedCommand) {
-        result.textContent = '';
+        result.textContent = 'invalid command';
-        return;
+        return
     }
 
     const { arguments, output } = suppliedCommand;
@@ -66,7 +66,9 @@ command?.addEventListener('focusout', () => {
     setTimeout(() => command.focus(), 0);
 })
 
-command?.addEventListener('input', () => processCommand(command.value))
+command?.addEventListener('keydown', e => {
+    if (e.key === 'Enter') processCommand()
+})
 
 // run all tasks
 if (typeof age !== 'undefined') runEvery(updateAge, 10 * 1000)
@@ -80,11 +82,5 @@ if (theme === 'dark')
 // listen to help tooltip
 help.addEventListener('click', () => {
     command.value = 'help';
-    processCommand('help');
+    processCommand();
-})
+})
-
-// ignore context menu
-document.addEventListener('contextmenu', e => e.preventDefault());
-
-// check for command in input
-if (command?.value) processCommand(command.value);