diff --git a/css/style.css b/css/style.css
index a31eeb4..d9befd9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -22,11 +22,18 @@ body {
}
#container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+
text-align: center;
height: 100%;
width: 100%;
+}
- align-content: center;
+#container > * {
+ width: 50%;
}
[data-tooltip] {
@@ -71,10 +78,11 @@ input {
white-space: preserve;
color: var(--color);
- padding: 2em;
+ max-height: 100%;
+ overflow-y: auto;
}
-#switch_theme {
+#switch_theme, #help {
text-decoration: underline;
cursor: pointer;
}
@@ -90,4 +98,10 @@ input {
.image-grid > * {
max-width: 50%;
max-height: 50%;
+}
+
+@media screen and (max-width: 798px) {
+ #container {
+ flex-direction: column !important;
+ }
}
\ No newline at end of file
diff --git a/index.html b/index.html
index c789332..534322a 100644
--- a/index.html
+++ b/index.html
@@ -14,14 +14,15 @@
-
welcome to my website
-
switch theme
-
-
press Enter to run command
-
use 'help' to list all commands
-
-
[guest@website ~]$
-
+
+
welcome to my website
+
switch theme
+
+
press Enter to run command
+
use 'help' to list all commands
+
[guest@website ~]$
+
+
diff --git a/js/script.js b/js/script.js
index 8dd9c6f..cb58359 100644
--- a/js/script.js
+++ b/js/script.js
@@ -4,6 +4,36 @@ function updateAge() {
age.textContent = difference.toFixed(4);
}
+// process command function
+function processCommand() {
+ const [commandName, ...args] = command.value.split(' ') || [command.value]
+ const suppliedCommand = COMMANDS.find(c => c.name === commandName)
+
+ if (!suppliedCommand) {
+ result.textContent = 'invalid command';
+ return
+ }
+
+ const { arguments, output } = suppliedCommand;
+ for (const i in arguments) {
+ const argument = arguments[i]
+
+ if (argument.required && !args[i]) {
+ result.textContent = `argument ${argument.name} is missing`;
+ return
+ }
+
+ const errorMessage = argument.check(argument.multiword ? args.join(' ') : args[i])
+
+ if (typeof errorMessage === 'string') {
+ result.textContent = `error while executing ${suppliedCommand.name}: ${errorMessage}`;
+ return
+ }
+ }
+
+ result.innerHTML = output(...args).replaceAll(TAB, '')
+}
+
// wrapper for setInterval
const runEvery = (task, ms) => {
task()
@@ -37,34 +67,7 @@ command?.addEventListener('focusout', () => {
})
command?.addEventListener('keydown', e => {
- if (e.key === 'Enter') {
- const [commandName, ...args] = e.target.value.split(' ') || [e.target.value]
- const command = COMMANDS.find(c => c.name === commandName)
-
- if (!command) {
- result.textContent = 'invalid command';
- return
- }
-
- const { arguments, output } = command;
- for (const i in arguments) {
- const argument = arguments[i]
-
- if (argument.required && !args[i]) {
- result.textContent = `argument ${argument.name} is missing`;
- return
- }
-
- const errorMessage = argument.check(argument.multiword ? args.join(' ') : args[i])
-
- if (typeof errorMessage === 'string') {
- result.textContent = `error while executing ${command.name}: ${errorMessage}`;
- return
- }
- }
-
- result.innerHTML = output(...args).replaceAll(TAB, '')
- }
+ if (e.key === 'Enter') processCommand()
})
// run all tasks
@@ -74,4 +77,10 @@ command?.focus()
// initial theme configuration
const theme = localStorage.getItem('theme');
if (theme === 'dark')
- document.body.classList.add('dark')
\ No newline at end of file
+ document.body.classList.add('dark')
+
+// listen to help tooltip
+help.addEventListener('click', () => {
+ command.value = 'help';
+ processCommand();
+})
\ No newline at end of file